How to Add WooCommerce Payment Icons In the Footer [HTML]

If you want to add WooCommerce payment icons in the footer, you can use the HTML code shared in this post on your footer.php file or a custom HTML text widget to show the payment icons.

Alternatively, I have provided you with a top-notch plugin that helps you add payment icons in the footer or anywhere else on your site.

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.

This means that you should use images that users are familiar with, to establish a more reliable and trustworthy presentation, grabbing the attention of first-time visitors.

Add WooCommerce Payment Icons In the Footer

A good way to do this is to add the WooCommerce Payment Gateway icon at the footer.

However, the logos may be provided by your payment gateway account, through the payment card services themselves, or other services available online.

The ones available online are of good quality and this will help build trust.

Most of the time, the logos are provided as actual images, but sometimes they are provided to you in the form of HTML scripting to be added to your store.

This piece of code can be added to the footer to add the icons.

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.

Moreover, adding the WooCommerce Payment Gateway icons at the footer, allows users to easily pay for items, as you can link the icons to the checkout page for faster payment.

This can be done by using HTML or images and icons.

For this tutorial, I am going to use this image and embed it in the footer section.

The footer section can be accessed by navigating through Theme Setting > Footer > Text next to copyrights inserting this code and replacing the image source URL with the respective image path for your site. In this example, my image is located in the localhost as you can see on the image tag below :

<img src="//http://127.0.0.1/wordpress/wp-content/uploads/2020/07/payments.png">

However, it is important to note that you should replace the link of that image with your respective image link.

You can upload the image to the media files and then link it using your code.

This will help you to embed the payment icons for any payment gateway.

Additionally, you can customize them how you want and you can place them on any side using custom CSS code.

WooCommerce Payment Methods Custom Icons

What if the icons you want to include on your site are not available in the example that I have used?

You can get images from online sources that include Creative Commons image marketplaces.

1. For example, you can download the icons that you want to embed in the footer sections.
2. These WooCommerce Payment Gateways can be downloaded as a package and you can embed each one of them individually.
3. Secondly, you need to navigate to the footer section  or use a custom HTML widget that is placed in the footer  or the  footer.php code of your theme through Theme Setting > Footer > Text next to copyrights and insert this code:

<div class="credit-cards" style="text-align: center; width: 100%">

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_visa.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_master.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_paypal.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_unionpay.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_linepay.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_tw_711_pay.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_tw_fm_pay.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_taishin.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_amex.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_ecpay.png"/>

  <img height="40" src=" http://127.0.0.1/wordpress /wp-content/uploads/2020/07/card_jcb.png"/>

</div>

Where you add this code may vary from theme to theme but if you strictly want to add it to the footer you are safe using a Text HTML widget when placing the widget on your footer.

Conclusion

In this article, I have shown you how to add WooCommerce Payment Gateway icons at the footer using HTML.

This can be done to add trust and it is very simple to implement using the HTML Text widget under your theme widgets section.

Remember if you add this code to the functions.php the code will not work and caution must be exercised when you are adding the HTML code to the footer.php you should ensure you escape PHP appropriately.

Similar Articles

1. How to Integrate Stripe With WooCommerce
2. How to Add a Trust or Secure Logo on WooCommerce Checkout Page
3. How to Change PayPal Icon On WooCommerce Checkout Page
4. How to Hide PayPal Icon on WooCommerce Checkout Page
5. How to Change WooCommerce Payment Gateway Icons
6. How to Add Custom WooCommerce Payment Icons Checkout Page
7. How to Change Checkout Button Text in WooCommerce [Place Order]
8. How to Set Featured Products In WooCommerce
9. How to Add or Remove Icons to WooCommerce Checkout Page
10. How to Set Custom Related Products In WooCommerce