Category

Asides

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!

Let's get in touch!

Nicholas Manderfield

Ecommerce + Internet Marketer

(920) 843-8442

chat@nickmanderfield.com

Currently Based in Appleton, WI