How to Change WooCommerce Payment Gateway Icons

If you want to quickly and easily change WooCommerce payment gateway icon or multiple icons, I have two quick solutions for you. You can either edit the functions.php and add the code I have shared here or you can simply use the WC PayIcons plugin that will help to updated the payment icons quickly.

Table of Contents

If you are running a WooCommerce store, then you must be familiar with the default WooCommerce payment icons. These icons are located on the checkout page next to each payment option.

If you are searching for a way to change the icons of the WooCommerce Payment Gateway on your site or WooCommerce theme, this article will guide you on how to change the checkout payment gateway icons.

WooCommerce Payment Gateway Icons

These WooCommerce Payment Gateway icons are important as they help you to build trust, as people get more careful when it comes to making online purchases.

Therefore, this means that if you use images of payment methods that a user is familiar with, for example, VISA, MasterCard, PayPal, and AMEX, your store automatically establishes a more reliable and trustworthy presentation, grabbing the attention of first-time visitors.

For example, the appearance of trusted payment brands icons like this would make customers feel confident in using gateways.

However, WooCommerce has a variety of default payment gateways, for example, PayPal®, COD, check, bank draft, among other gateways.

Change WooCommerce Payment Gateway Icons

The icons that appear are default or fixed, there are settings that the admin can utilize to change this or do some editing on these icons, as I outlined on this article on – how to hide PayPal icon on WooCommerce checkout page as well as this post on how you change the WooCommerce PayPal gateway icon on checkout.

This could be a major challenge where one or more of the credit cards shown in the icon are not accepted, as there are no plugin options available for the removal of the unsupported icons.

Only a few articles on the web try to show you how to change the WooCommerce Payment Gateways icons using hooks and filters.

If you need a quick solution for managing WooCommerce payment Icons, I created a very useful plugin that helps hundreds of users and theme developers to quickly add the payment icons to footer or anywhere else on any WordPress theme or WooCommerce site as well as upload the custom payment gateway icon on the FLY! As you can see on the image below.You can get the plugin here.

This article tries to help you change the icon of each one of the default WooCommerce payment gateways to any custom icon that you want to display on the checkout page payment gateways.

Some WooCommerce stores only accept Visa and MasterCard payments and they do not want to display icons for other WooCommerce Payment Gateways like American Express, so as not to confuse the customer.

Does Storefront Theme Have a Setting to Change WooCommerce Payment Gateway Icons?

Storefront theme does not offer the option to change the icons using their gateway plugin and the way you can implement this is to use the following code to replace the plugin’s PNG icon file with a different PNG that you can create or install from the internet.

Moreover, this basic feature should be built-in in the WooCommerce plugin like in this plugin, to offer a non-programming solution for the changing of WooCommerce Payment Gateways. This code should be added in the functions.php file for your theme:

// Example Change an icon for COD Payment Gateway 

function njengah_woocommerce_cod_icon( $icon, $id ) {

	 if ( $id === 'cod' ){ 

	   return $icon_url; 
	} 
	else { 

	return $icon; } 

} 


add_filter( 'woocommerce_gateway_icon', 'njengah_woocommerce_cod_icon', 10, 2 );

However, you should replace the name of the $icon_url with the respective path of the icon you want to use on the payment gateway.

Once you are done with this, you should be able to see the payments.png icon in place of the plugin’s default icon when the checkout page loads.

Moreover, the new versions of WooCommerce will not affect the changes that you make on your icons if you place the code in the functions.php file of the child theme.

The following is an example of to add the custom PayPal icon using the code I shared above but I have substituted the variables respectively from COD to PayPal.

Conclusion

In this short post, you have outlined how to change the WooCommerce Payment Gateway Icons using two simple steps, Remember to add the code at the end of the functions.php file, to add this functionality to your website. I hope that this brief tutorial helped you to change the WooCommerce payment gateway icons.

Editorial Staff

How to Change WooCommerce Payment Gateway Icons

WooCommerce Payment Gateway Icons

Change WooCommerce Payment Gateway Icons

Conclusion

Similar Articles

Related