All Posts By

Nicholas Manderfield

Making PayPal Less Ugly in WooCommerce Checkout

By | Asides, Development, WooCommerce | No Comments

Annoying thing #1,432 about PayPal, the integration through WooCommerce is not appealing. Out of the box, everything in the back end works just fine, but the front end visuals during the checkout process are atrocious, especially when you consider the importance of this part of the sales funnel.

PayPal looks ugly ‘out of the box’ on WooCommerce Checkout Pages

Notice the PayPal area? The huge non-transparent image, text below it, and even more text below that? Gross!

Here’s what we’re going to be working on today.

Simple, must be an option in the back, right? Well, let me introduce you to PayPal… :). Here’s the URL displayed on my WooCommerce Checkout page: https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg

It’s not quite obvious where it decides to load this crappy graphic (and additional text), so I did a quick grep on the server to see where this was coming from.

grep -H -r "webstatic/mktg/logo" /var/www/
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo-center/logo_paypal_odeme_secenekleri.jpg';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo-center/logo_paypal_moyens_paiement_fr.jpg';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo-center/logo_PayPal_betalingsmuligheder_dk.jpg';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo-center/banner_pl_just_pp_319x110.jpg';

I’m not going to pick apart the entire file here, but it’s very simple to see what does what, and where. Around line 80 is where “Get gateway icon.” exists, which starts the process for what displays on the Checkout page. First you’ll see the ‘What is PayPal?’ texts and the pupup code, a little below that will be ‘Get PayPal images for a country’ since this specific integration displays certain images pending on source country.

	/**
	 * Get PayPal images for a country.
	 * @param  string $country
	 * @return array of image URLs
	 */
	protected function get_icon_image( $country ) {
		switch ( $country ) {
			case 'US' :
			case 'NZ' :
			case 'CZ' :
			case 'HU' :
			case 'MY' :
				$icon = 'https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg';

Change that URL to your local ‘and secure’ URL, and you’re all set, otherwise if you have force HTTPS checked, slightly farther down the file (about 10 lines for me), was this:

 default :
 $icon = WC_HTTPS::force_https_url( WC()->plugin_url() . '/includes/gateways/paypal/assets/images/paypal.png' );
 break;

So drop in a new image into that folder on your server, or replace the existing image, to make the changes appear on the front end.

After updating the URL the checkout page looked like this:

The icon doesn’t look great being on the next line down, so the following CSS had to be changed from ‘block’ to ‘inherit’:

.woocommerce-checkout .woocommerce-checkout-payment .payment_method_paypal label img {
    display: block;
}

Resulting in the icon lining up with the title line:

A less ugly PayPal Checkout integration

With a little more effort (changes to either the ‘class-wc-gateway-paypal.php’ file or CSS) and you can change the horrible default view to this, likely to increase conversions and simply just look better:

Of course my graphic example might not be the best for you, my example isn’t a responsive graphic (I know!), the changes I made here might actually hinder your Conversion Rate, there are a hundred ways to design and execute your Checkout pages, and a hundred a/b tests to be ran.

I think it could look a little better by bolding the titles or moving both graphics for the options to the bottom of the title, and increasing spacing to make it look like two separate options instead of two choices from a small list. Last time I really got into a Checkout page conversion I ended up replacing all the text and graphics with big graphic buttons, increasing the conversion rate a few points!

Your Website Is Now NOT SECURE, Thanks to Google Chrome

By | Development, Ecommerce | No Comments

Officially announced last September, but implied a long time before that, Google is taking yet another step towards a ‘secure internet’ by now notifying Chrome users, very blatantly, when they are on an insecure page with a form. This update is coming within a few days to all users of Google Chrome.

 

In it’s current form, the ‘Not Secure’ notification in the search/URL bar will only appear on pages which contain a password field or credit card input, whereas before, it would simply not show the ‘Secure’ notification, making it not as prominent that the page itself is ‘Not Secure’.

Though primarily important to community websites and Ecommerce, Google has already stated, and previewed how the address bar will soon look:

Eventually, Chrome will show a Not Secure warning for all pages served over HTTP, regardless of whether or not the page contains sensitive input fields. Even if you adopt one of the more targeted resolutions above, you should plan to migrate your site to use HTTPS for all pages.

So get it handled now, before there is a frantic rush to getting your website secure and likely supply and demand increasing cost and availability of developers who can truly make your entire website secure. It takes more than simply installing an SSL, there is a huge variety of potential issues, and I’ve seen them all.

Why Do I Always Have to Update WordPress?

By | Development, Wordpress | No Comments

 

https://codex.wordpress.org/WordPress_VersionsI’ve dealt with tons of WordPress installations, nearly all of them self-hosted (not hosted by WordPress.com, but using WordPress as a Content Management System), and I’ve prided myself on keeping all of them continuously up to date. This isn’t easy, it takes time, it takes developer knowledge, it takes patience and an occasional glass of whiskey, but in the end, it’s all worth it.

WordPress is a huge target

WordPress currently powers 23% of all websites in the world. Due to it’s immense popularity, WordPress is a popular target for hackers, malicious code distributors, data thieves, and wanna be hackers.’

https://sucuri.net/website-security/hacked-reports/2016-q3-hacked-website-report

Why Does WordPress Need To Be Updated?

http://www.wpbeginner.com/beginners-guide/why-you-should-always-use-the-latest-version-of-wordpress/

13 Surprising WordPress Statistics (Updated 2016!)

 

To Catch a Plagiarist – Feat. Taner Tozan

By | Blog, Personal | One Comment

I’ve been creating websites for a long time.  I’ve been using inspiration from other designers, color palettes from friends, from cars, from random sketches and paint splatter on dribbble.

If I can, I give credit.  If I can, I purchase directly from other designers or artists, sometimes I’m expected to create a lot of things in a short amount of time and low budget, like 10-15 newsletters, within a few hours time: I will use resources like CodeCanyon and GraphicRiver (which I highly recommend).  I’m always sure to purchase graphics, designs, patterns, and vectors, only when they are allowed to be used commercially, and modified for such use, or my own personal use.

There are a lot of bad people out there, who don’t do any of those things, I’ve had quite a few run ins with these types of people, and their job titles, LinkedIn profiles, and resumés, truly disgust me.

How I’ve Been Robbed

I’ve had my work stolen from under me, posted with someone else’s name on it.  I’ve had my pictures used for commercial purposes, and the owners of these companies arguing with me telling me that they themselves took the photographs.

I’ve had my own watermark used by other photographers or designers, who then claim they were the ones who stamped the image or photograph.

I have had websites taken down with DMCA Requests, mainly GoDaddy, but BlueHost is also very quick to approve requests.  I’ve contacted the legal teams of Facebook and Instagram (now one in the same!) to have profiles removed, postings deleted, and accounts changed.  All for the sake of protecting my efforts and my morale.

What’s Being Taken From You Now, Nicholas?

My latest ‘home run hit’ CarbonTrimSolutions.com – which I put months of time into, from marketing strategy, product development, brand identity, to the text on each and every page.

It’s been looked at by tens of thousands of unique visitors from all over the world, we’ve made revisions to the site on a regular basis since launching the new site early last year.

We’ve gotten it featured in Business Insider, DuPont Registry, PhoneArena, and countless huge social media pages and followings.  I redesigned the site and we worked on a new marketing plan in early 2014, so you’d have to be a fool to copy-paste our business model, product, and marketing strategy in 2015, right?  Wrong.

You can find low-grade replicas of my design work, marketing strategy, and Kiran’s products, on a few different websites – check out EliteCarbonFiber.com (update 12/14/16 website dead), CarbonClip.com(update 12/14/16 website dead), and …. The worst offender of all, is…

Read More

Let's get in touch!

Nicholas Manderfield

Ecommerce + Internet Marketer

(920) 843-8442

chat@nickmanderfield.com

Currently Based in Appleton, WI