WooCommerce Stripe – Modify Payment Method Icon

If you’re using the official Stripe Plugin for WooCommerce, you may have noticed that each of the payment methods you enable has an icon next to it in the checkout. Occasionally, you might want to display a different icon for a payment method. For example, the Alipay logo that is included as default in the plugin is out of date, so you may want to display the new logo instead.

The good news is, it’s really simple to modify the icon that the Stripe plugin shows. You can change the icon to an image that you have uploaded to your site, or one that is hosted on an external site, the choice is yours.

In the example below, we’re going to change the Alipay logo to the new one, which we have uploaded to our site:

add_filter( 'wc_stripe_payment_icons', 'snippetpress_custom_stripe_gateway_icon' );

function snippetpress_custom_stripe_gateway_icon( $icon_array ){    
	$icon_array['alipay'] = '<img src="/wp-content/uploads/2020/06/alipay_logo.png" alt="Alipay" />';	
	return $icon_array;	
}

As you can see, this has changed the Alipay logo from the default (old) one that came with the Stripe plugin to the new logo.

All you need to do to modify this snippet for yourself is to change alipay to the slug of the Stripe payment method you want to change, and replace /wp-content/uploads/2020/06/alipay_logo.png with the URL to the image that you want to use.

The list of Stripe payment method slugs is:
visa
amex
mastercard
discover
diners
jcb
alipay
wechat
bancontact
ideal
p24
giropay
eps
multibanco
sofort
sepa

Where to add the snippet?

The snippet should be placed at the bottom of the functions.php file of your child theme. Make sure you know what you’re doing when editing this file. Alternatively, you can use a plugin such as Code Snippets to add the custom code to your WordPress site. If you need further guidance on how to add the code, check out our post on How to Add WordPress Snippets.