How To Change The PayPal Icon In WooCommerce

WooCommerceHere’s a quick tutorial that might help you increase conversions on your WooCommerce shopping cart.

If you’re using PayPal as the payment gateway (like many people do, including myself), then you’re likely to have noticed the dodgy little icon displayed on the cart.

This is a great place to put a more informative icon that shows just how many payment options you can process with PayPal. Many people aren’t even aware that you can process credit cards using PayPal and might completely abandon your cart if you don’t show them the right credit card symbols.

I put together the following graphic and code snippet which you can use on your WooCommerce checkout.

Here’s the new icon image we’ll be using which includes all the credit cards that PayPal accepts (right click and save):

acceptedCards

Make sure you keep the naming of the file consistent with the following code snippet. For tidyness I’ve placed this image in my theme’s directory under a subdirectory called “images”, if you’re using the following code verbatim you’ll want to do the same.

Copy and paste the following code into your functions.php:

function replacePayPalIcon($iconUrl) {
	return get_bloginfo('stylesheet_directory') . '/images/acceptedCards.png';
}
 
add_filter('woocommerce_paypal_icon', 'replacePayPalIcon');

Now take a look at your new and improved cart with it’s sexy little credit card icons. If this code snippet helped you out let me know in the comments.

Looking for a coding job? See our job listings page. Click here to view →

About Josh Kohlbach

Josh is a programmer, entrepreneur and the founder of Code My Own Road. He started this website to help programmers with business stuff and also to get things straight in his head. You can read more about Code My Own Road and Josh on the About page

, ,

26 Responses to How To Change The PayPal Icon In WooCommerce

  1. Seamus Ryan July 26, 2013 at 10:14 pm #

    Very useful. I also used your method with woocommerce_skrill_logo instead of woocommerce_paypal_icon to replace the Moneybookers/Skrill logo at the checkout.

    • Josh Kohlbach July 27, 2013 at 3:19 pm #

      Awesome Seamus, glad to hear it works for other payment gateways too!

  2. Markus Steiger September 20, 2013 at 11:44 pm #

    Thanks for this Snippet!

    • Josh Kohlbach September 24, 2013 at 9:48 am #

      No worries Markus, glad you found it useful!

  3. Michael Mann October 17, 2013 at 3:45 am #

    Also to note, change woocommerce_paypal_icon to woocommerce_google_wallet_icon to show custom credit card image for Google Wallet.

    • Josh Kohlbach October 17, 2013 at 7:47 am #

      Awesome tip, thanks Michael!

  4. SK November 24, 2013 at 3:10 am #

    Thanks a lot, that’s fantastic. Have you considered removing the ‘Pay Pal’ text as well?

  5. Ja November 26, 2013 at 4:05 am #

    Thankyou!

  6. Michael Mann November 26, 2013 at 1:01 pm #

    @SK, the simplest way to change the “PayPal” text on the checkout page is to edit it through the dashboard.

    WooCommerce > Settings > Payment Gateways > PayPal

    Change the text in the Title Box. I’ve done this for a few clients, changing it from “PayPal” to “Credit Card/PayPal”.

    Whatever you put in for the title will show as the title on the checkout page.

    • Josh Kohlbach November 26, 2013 at 3:20 pm #

      Spot on Michael, thanks for contributing

  7. Jp December 4, 2013 at 2:21 am #

    I actually wanted to remove the icon completely. As I could not find another way I used your solution to replace the image with an small transparent PNG. Works good for me :) Tnx.

    • Josh Kohlbach December 4, 2013 at 7:55 am #

      Nice work around Jp!

  8. Julio December 6, 2013 at 1:18 pm #

    Excellent, very thanks!!

  9. ryan December 19, 2013 at 1:33 pm #

    Stumbled on this while looking for other issues. Great tip and easy to do! Thanks!

    • Josh Kohlbach December 19, 2013 at 1:52 pm #

      Thanks Ryan, glad you found it helpful!

  10. scott February 13, 2014 at 2:37 pm #

    Thanks for this. Is it possible to re-size the image or you just need to create the image the size you want it to display?

    • Josh Kohlbach February 14, 2014 at 8:33 am #

      Hi Scott, you would either create the image you want in the size you want or style with CSS (or both).

      Hope that helps!

  11. Mark February 19, 2014 at 1:59 pm #

    Thanks for the tip – very helpful :)

    • Josh Kohlbach February 19, 2014 at 2:30 pm #

      No probs Mark, glad you found it useful.

  12. Denis March 6, 2014 at 2:51 pm #

    Nice one, Josh! …the right way to use WooCommerce hooks ‘n filters instead of hacking the code.

  13. vinz May 20, 2014 at 10:04 pm #

    Wahouh ! Exactly what I was searching !
    Thank you so much !

    • Josh Kohlbach May 23, 2014 at 4:11 pm #

      No probs vinz, glad it helped

  14. Tim Maina September 17, 2014 at 1:27 am #

    Extremely useful, truly sexy!! Thanks for sharing this.

  15. Gary Neville November 14, 2014 at 8:44 am #

    Hey Josh great code do you know a similar function for the stripe Gateway?

    Regards
    Gary

    • Josh Kohlbach November 17, 2014 at 4:37 pm #

      Hi Gary,

      I don’t recall the filter name at the moment but there is a similar filter to woocommerce_paypal_icon in the official Stripe extension. Just do a code search in their plugin directory for ‘icon’ or something similar and you’ll find it!

      Cheers,
      Josh

  16. MIchael Mann November 17, 2014 at 8:59 pm #

    For Stripe, woocommerce_stripe_icon works here to give you the replacement. I’ve seen wc_stripe_icon as well in a few places, but it does not work (Tested under WC 2.2.8).

Leave a Reply

Read more:
VideoJS HTML5 Player
Better Video Blogging For WordPress Using VideoJS

As a programmer it's rare you come across software that does things exactly how you want it to. So imagine...

Close