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:

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 = '';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = '';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = '';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = '';
/var/www/html/wp-content/plugins/woocommerce/includes/gateways/paypal/class-wc-gateway-paypal.php:				$icon = '';

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 = '';

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' );

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.

Let's get in touch!

Nicholas Manderfield

Ecommerce + Internet Marketer

(920) 843-8442

Currently Based in Appleton, WI