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. Seamus Ryan

    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. Josh Kohlbach

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

    1. Josh Kohlbach

      No worries Markus, glad you found it useful!

  2. Michael Mann

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

    1. Josh Kohlbach

      Awesome tip, thanks Michael!

  3. SK

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

  4. Michael Mann

    @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. Josh Kohlbach

      Spot on Michael, thanks for contributing

  5. Jp

    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. Josh Kohlbach

      Nice work around Jp!

  6. Julio

    Excellent, very thanks!!

  7. ryan

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

    1. Josh Kohlbach

      Thanks Ryan, glad you found it helpful!

  8. scott

    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. Josh Kohlbach

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

    Thanks for the tip – very helpful 🙂

    1. Josh Kohlbach

      No probs Mark, glad you found it useful.

  10. Denis

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

  11. vinz

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

    1. Josh Kohlbach

      No probs vinz, glad it helped

  12. Tim Maina

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

  13. Gary Neville

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

    Regards
    Gary

    1. Josh Kohlbach

      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. MIchael Mann

    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. Dan Bolivar

    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. Romain VINCENT

    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. Mike Jennings

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

    1. Josh Kohlbach

      No problems Mike, glad it worked out!

  18. patty

    Awesome. Works like charm. Thanks so much

  19. anon

    Thanks, works great and excellent instructions. Much appreciated.

  20. Web242

    Thank you for this gem! Much appreciated.

    Cheers
    Avrom

  21. Troy Yu

    First search, perfect solution! Thanks man!

  22. Aaron

    Worked perfectly. Thank you for this!

  23. mamie-net.shop

    Hi there,

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

    Many thanks

Leave a Reply