Change WooCommerce PayPal Icon To Custom Image With Credit Card Icons

Updated May 12, 2017     12 Comments
Originally posted March 15, 2014

Graveyard

This page is in the Code Graveyard where I lay to rest snippets of code that I don't use anymore. Some have lost their usefulness due to the evolving nature of the web, while others have been replaced with better code. "Be Ye Warned!"

This shows you how to change WooCommerce’s default PayPal icon. The WooCommerce checkout page shows payment icons for the payment methods and credit cards that you accept. If you only accept credit card payments via PayPal, then you will only have the default PayPal icon displayed. You probably want to show credit card icons even though you only accept them through PayPal. WooCommerce does not display these icons for PayPal by default. Here is how you can change WooCommerce’s default PayPal icon. For this example, I will replace the default PayPal icon with this picture which displays credit cards accepted via PayPal:

PayPal payments

This is a better way to let your customers know that you accept credit cards in addition to regular PayPal payments. This code goes into your functions file.

You must replace the image filename and path with your own image. If you want to use the code as-is with the same image in my example, then save the image from above (right-click it, then click “Save Image As”) and place it in your theme’s "images" folder. This example assumes that your theme’s images folder is in the root of theme, as in: “your-theme/images/“.


/**
 * Custom icon for PayPal payment option on WooCommerce checkout page.
 */

function isa_extended_paypal_icon() {
     // picture of accepted credit card icons for PayPal payments
     return get_stylesheet_directory_uri() . '/images/paypal-payments.jpg';
}
add_filter( 'woocommerce_paypal_icon', 'isa_extended_paypal_icon' );

See more:

We've 12 Responses

    • November 6th, 2014 at 6:29 pm

      This code should go in your theme’s functions.php file. You also have to upload the image to your theme’s “images” folder.

      If you don’t want this change to be erased when you update your theme, then you should instead place the code and image in a child theme.

      Reply ↓
      Isabel

  4. May 25th, 2015 at 6:17 pm

    When using a child theme that line needs to be:

        return get_stylesheet_directory_uri().'/images/paypal-payments.jpg';

    Otherwise the uri of the parent theme will be returned.

    Reply ↓
    Bryan

    • February 23rd, 2016 at 4:11 pm

      Additional Note: However, WooCommerce has updated the payment image that they show for PayPal. Their default PayPal image now includes credit card icons (actually, the image looks just like the one on this page), so my code here is not necessary anymore. Unless, you prefer to use the image on this page because it has a transparent background so it blends in to the WC checkout much better (WooCommerce’s image has a white background which doesn’t look as natural on the checkout page).

      Reply ↓
      Isabel

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]