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.

Josh Kohlbach

Josh is a software entrepreneur from Brisbane, Australia. He spends most of his time helping e-commerce store owners. This is his personal blog where he shares his thoughts and other tidbits on online business and life in general.

This Post Has 37 Comments

  1. 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.

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

    1. No worries Markus, glad you found it useful!

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

    1. Awesome tip, thanks Michael!

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

  4. @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.

    1. Spot on Michael, thanks for contributing

  5. 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.

    1. Nice work around Jp!

  6. Excellent, very thanks!!

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

    1. Thanks Ryan, glad you found it helpful!

  8. 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?

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

      Hope that helps!

  9. Thanks for the tip – very helpful 🙂

    1. No probs Mark, glad you found it useful.

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

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

    1. No probs vinz, glad it helped

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

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

    Regards
    Gary

    1. 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

  14. 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).

  15. Heya Josh! Thank you for this man… It solved that very UGLY and huge paypal icons image that was really the fugliest thing I could not find a way to resolve…

    You’re the man!

  16. This snippet worked better for me :

    [code]
    // Change PayPal icon

    function replacePPicon($iconUrl) {
    return ‘https://www.paypalobjects.com/webstatic/mktg/logo/AM_mc_vs_dc_ae.jpg’; // change this to your IMAGE URL
    }

    add_filter(‘woocommerce_paypal_icon’, ‘replacePPicon’);
    [/code]

  17. Bro… was working on a woo commerce site and this was the perfect fix… thanks man. I appreciate it.

    1. No problems Mike, glad it worked out!

  18. Awesome. Works like charm. Thanks so much

  19. Thanks, works great and excellent instructions. Much appreciated.

  20. Thank you for this gem! Much appreciated.

    Cheers
    Avrom

  21. First search, perfect solution! Thanks man!

  22. Worked perfectly. Thank you for this!

  23. Hi there,

    And how can i add a little icon like paypal in other payment methods ?

    Many thanks

Leave a Reply

Close Menu