How to Add Custom WooCommerce Payment Icons Checkout

Do you want to add a custom WooCommerce Payment Gateway icon for the checkout page?

Table of Contents

In this post, I will show you how to quickly add custom payment icons to the WooCommerce checkout page.

This article contains a detailed description of the steps to quickly add WooCommerce Payment Gateway icons to the checkout page.

Editing Your Theme Files is Not Always the Safe Way to Customize WooCommerce – I took away your burden of adding payment icons anywhere on your site by creating a WooCommerce Payment Icons plugin that you can find here.

This plugin comes with an easy way to add SVG icons with more than 65+ payment methods buttons!

You can also upload the payment banner if you don’t like the SVG and you can also use a shortcode to show accepted payments anywhere on your WooCommerce store. Check it out here currently at a discounted price.

If you are running a WooCommerce store, you are probably familiar with the default set of credit card icons.

To some, they might look okay, but if you open them on a high-resolution screen, they might appear a bit blurry.

Moreover, they look a bit outdated.

If you are looking for a custom, clear design that you can implement then this article will guide you.

Ideally, the best icon design would be to add custom curved button shapes that have faux drop shadows.

Custom WooCommerce Payment Gateway Icons

In most cases, you want to add high-resolution icons that scale well on mobile devices and look great.

There are a variety of sources where you can obtain these payment icons – for example, creative designs marketplaces offer a variety of free and premium payment methods icons like these payment methods icons set on Pixeden that you can download and use in your WooCommerce store.

For this simple tutorial, we are going to use icons that have a modern look.

The best solution would be to use SVG icons for perfect resolution on any screen.

We made it easier for you to use the SVG tutorial in our WC PayIcons plugin which helps you add payment icons anywhere on your WooCommerce store. If you do a quick search on the internet, you will find a plethora of credit card icons that you can implement on the checkout page and even the footer of your WooCommerce store.

However, the ones that stood out for me are available in Dribble.

Moreover, they have a pleasing design that users will love. These icons add some sense of trust to your checkout page, as people get more careful when it comes to making online purchases.

These are the icons that we are going to use:

Additionally, the ones available on Dribble are images of payment methods that a user is familiar with, for example, VISA, MasterCard, PayPal, and AMEX.

This will help to establish a more reliable and trustworthy presentation, grabbing the attention of first-time visitors.

However, you can also check around for more if your payment gateway includes different companies.

To be honest, only a few articles on the internet try to show you how to add custom WooCommerce Payment Gateways icons using hooks and filters.

This article tries to help you add the icon of each one of the default WooCommerce payment gateways to anything you wish.

Because of this, 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.

Adding Payment Methods Icons WooCommerce Checkout Page

You can use the same code that we have shared below for all WooCommerce Payment Gateway icons, but you just need to find the specific icons for the credit cards that you are using to accept payments in your online store.

To add the custom WooCommerce Payment Gateway Icons, we need to filter the woocommerce_gateway_icon function, which is most likely available in each gateway extension. You need to add the following code in the functions.php file:

// Add Custom Credit Card Icons to WooCommerce Checkout Page 

add_filter ('woocommerce_gateway_icon', 'njengah_custom_woocommerce_icons');

function njengah_custom_woocommerce_icons() {

    $icon  = '<img src="icons-url" alt="stripe" />';

     return $icon;

}

However, you need to replace the image URL depending on the location of the payment icon image on your site.

You can upload the icons to the WordPress media folder and then replace the icons-url in the code with the respective image path as shown on the image below :

Conclusion

You can quickly add the payment icons on your WooCommerce store checkout page using the filter in the code snippet above and upload the icon to your media gallery.

If you don’t want to mess with the code or you are a WooCommerce theme developer who wants to extend this filter and give users more options I have you covered in my excellent solution.

I built the best payment icons plugin that comes with a shortcode function and allows users to add icons on the payment gateway checkout page, on the footer widget, and anywhere else using a simple shortcode. – check it out here.

This plugin supports the use of SVG which is a great solution for customizing the payment icons to suit your theme or site color scheme.

With the WC PayIcons plugin, you can upload the icon directly from the respective payment gateway page as shown below :

Joe

Joe is an experienced full-stack web developer with a decade of industry experience in the LAMP & MERN stacks, WordPress, WooCommerce, and JavaScript – (diverse portfolio). He has a passion for creating elegant and user-friendly solutions and thrives in collaborative environments. In his spare time, he enjoys exploring new tech trends, tinkering with new tools, and contributing to open-source projects. You can hire me here for your next project.

How to Add Custom WooCommerce Payment Icons Checkout Page

Custom WooCommerce Payment Gateway Icons

Adding Payment Methods Icons WooCommerce Checkout Page

Conclusion

Similar Articles

Related