How to Add WooCommerce Payment Icons In the Footer

Adding WooCommerce payment icons to your website footer is a simple yet effective way to enhance trust and improve user experience.

These icons let your customers know what payment methods your store supports right away.

The easiest way to add these icons is by using a widget, which allows you to display supported payment icons without writing any code.

With drag-and-drop simplicity, you can use a custom HTML widget to embed your icons or an image widget to showcase payment method logos.

If you’re comfortable with a bit of coding, you can also add WooCommerce payment icons directly to your theme’s footer.php file.

In this post, we’ll walk you through both methods, so you can choose the one that works best for you

A Smarter Way to Add WooCommerce Payment Icons Footer

When working on multiple WooCommerce projects, I kept running into the same issue,finding a simple way to customize and display payment icons that looked great and aligned with the store’s branding.

After testing different approaches and tools, I decided to create a plugin to make this process easier – WC PayIcons Plugin

With this plugin, you can:

• Add SVG payment icons to your footer using a straightforward widget.
• Customize the colors of the icons to match your store’s design seamlessly.
• Include pre and post-text to help customers understand the payment options you offer.
• Use shortcodes to display the icons anywhere, whether it’s on product pages, blog posts, or custom templates.
• Replace the default WooCommerce checkout icons with custom designs for a polished and professional look.

If you’ve faced similar challenges, this solution is designed to save you time and give you complete control over how your payment icons appear.

If you’re ready to simplify how you manage WooCommerce payment icons and give your store a polished, professional look, this plugin is here to help.

Whether you want to customize your footer, add payment icons anywhere on your site, or replace default checkout icons, this tool has you covered.

Try it out today and take control of your store’s payment icons with ease!

Why Add Payment Icons to Your WooCommerce Footer?

Adding payment icons to your WooCommerce footer is more than just a design choice; it’s a trust-building feature that can significantly enhance the shopping experience.

Here’s why it matters:

• Build Trust with Your Customers:
  Payment icons are widely recognized and provide instant reassurance to customers about the payment methods available. Seeing trusted logos like PayPal, Visa, or Mastercard helps users feel secure when making a purchase.
• Improved User Experience:
  By displaying payment options upfront, customers don’t have to search for payment details during checkout. This clarity makes the shopping process smoother and faster, leading to fewer abandoned carts.
• Boost Conversion Rates:
  When customers see familiar payment methods they trust, it can encourage them to complete their purchase. Offering a variety of payment options in the footer makes it easy for users to pick their preferred method.
• Professional Appearance:
  A footer with payment icons adds a polished and professional touch to your store. It shows that your store is well-established and prepared to offer customers multiple payment options.

Incorporating payment icons in the footer is a simple yet effective way to enhance both trust and usability on your WooCommerce store.

Using Images to Add WooCommerce Payment Icons Footer

One of the easiest ways to add WooCommerce payment icons to your footer is by using image files.

This method requires no coding knowledge and lets you quickly display the logos of payment gateways you support.

Follow these steps to get started:

1. Find High-Quality Payment Icons

First, you’ll need to gather the icons you want to display.

Most payment gateways, like PayPal, Stripe, and Visa, provide official icons that can be used on your website.

You can also download payment icons from reputable sources, such as Creative Commons image marketplaces.

2. Upload the Icons to Your WordPress Media Library

• Go to your WordPress Dashboard → Media → Add New.
• Upload the payment icons you’ve downloaded or created.
• Once uploaded, click on each image to get the URL, which you’ll need for embedding the images in your footer.

3. Add the Icons to Your Footer Using a Custom HTML Widget

Now that your icons are uploaded, you can easily add them to your footer using a Custom HTML widget.

• Go to Appearance → Widgets in your WordPress Dashboard.
• Locate the Custom HTML widget and drag it to the footer area.
• In the widget’s content area, paste the following code, replacing the src URLs with the links to your uploaded icons:

<div style="text-align: center;">
<img height="40" src="https://yourstore.com/wp-content/uploads/visa.png" alt="Visa">
<img height="40" src="https://yourstore.com/wp-content/uploads/mastercard.png" alt="Mastercard">
<img height="40" src="https://yourstore.com/wp-content/uploads/paypal.png" alt="PayPal">
</div>

4. Style and Align the Icons (Optional)

If you want to customize the look of your icons, you can add some simple CSS to align them or change their appearance. For example:

.footer-icons img {
margin: 0 10px;
}

This will add spacing between the icons, making them look neat and evenly aligned.

5. Save and Preview

Once you’ve added the code and any necessary styling, click Save. Refresh your website, and you should see the payment icons displayed in your footer.

This method is quick and easy, making it a great option for anyone who wants to add payment icons without coding.

Use Custom HTML Widget to Add WooCommerce Payment Icons Footer

If you’re comfortable with a bit of coding, adding WooCommerce payment icons directly using HTML code gives you full control over their placement and appearance.

You can embed the icons using a Custom HTML Widget or directly within the footer.php file of your theme. Let’s walk through both methods:

Method 1: Using a Custom HTML Widget

This method is simple and doesn’t require editing any theme files.

You’ll add the HTML code to a widget, which is perfect for users who want to avoid messing with code in theme files.

Steps:

1. Navigate to Widgets:
   • In your WordPress Dashboard, go to Appearance → Widgets.
2. Add a Custom HTML Widget:
   • Find the Custom HTML widget and drag it into the footer area of your site.
   • In the widget settings, paste the following HTML code, replacing the src URLs with the links to your uploaded payment icon images:

<div class="payment-icons" style="text-align: center;">
<img height="40" src="https://yourstore.com/wp-content/uploads/visa.png" alt="Visa">
<img height="40" src="https://yourstore.com/wp-content/uploads/mastercard.png" alt="Mastercard">
<img height="40" src="https://yourstore.com/wp-content/uploads/paypal.png" alt="PayPal">
</div>

3. Save and Preview:
   • Click Save to store your changes.
   • Refresh your site to ensure the payment icons appear as expected.

Method 2: Editing the footer.php File

For more advanced users, you can add the payment icons directly to your theme’s footer.php file.

This method gives you more flexibility for custom placements, but be cautious when editing theme files to avoid errors.

Steps:

1. Backup Your Theme Files:
   • Before making any changes, it’s always a good idea to back up your theme files.
   • If you’re not using a child theme, consider creating one to ensure your changes aren’t lost during theme updates.
2. Edit footer.php:
   • In the WordPress Dashboard, go to Appearance → Theme Editor.
   • Locate and open the footer.php file.
3. Insert the HTML Code:
   • Find the section of the code where you want to place the payment icons (typically near the bottom).
   • Paste the following HTML code:

<div class="payment-icons" style="text-align: center;">
<img height="40" src="https://yourstore.com/wp-content/uploads/visa.png" alt="Visa">
<img height="40" src="https://yourstore.com/wp-content/uploads/mastercard.png" alt="Mastercard">
<img height="40" src="https://yourstore.com/wp-content/uploads/paypal.png" alt="PayPal">
</div>

4. Save Your Changes and Preview:
   • Click Update File to save your changes.
   • Refresh your website and check if the payment icons are displaying correctly in the footer.

Important Notes:

• Be Careful with Theme Updates:
  • If you’re editing footer.php directly, keep in mind that theme updates can overwrite your customization. Using a child theme is recommended to preserve your changes.
• Test Your Icons:
  • After adding the icons, always test your site across different devices and browsers to ensure they’re displaying properly and that the layout looks good.

Using HTML code provides more flexibility and control over the placement and styling of your payment icons. However, if you’re looking for a simpler method, a Custom HTML widget might be the better choice.

Customizing WooCommerce Payment Icons with CSS

Once you’ve added your WooCommerce payment icons to the footer, you can enhance their appearance and positioning using custom CSS.

This allows you to maintain a consistent design that matches your store’s branding, while also ensuring that the icons are neatly aligned and visually appealing.

1. Basic CSS for Icon Alignment and Spacing

To begin, you can use CSS to manage the alignment, spacing, and size of the payment icons. Here’s an example of how to add some basic styling:

.payment-icons {
text-align: center; /* Centers the icons horizontally */
margin-top: 20px; /* Adds space above the icons */
}

.payment-icons img {
margin: 0 15px; /* Adds space between the icons */
height: 40px; /* Sets a consistent icon size */
transition: transform 0.3s ease; /* Adds smooth hover effect */
}

.payment-icons img:hover {
transform: scale(1.1); /* Slightly enlarges the icon on hover */
}

• text-align: center; ensures your icons are centered horizontally in the footer.
• margin: 0 15px; creates equal spacing between the icons for a clean look.
• height: 40px; sets a consistent size for all your payment icons.
• The hover effect with transform: scale(1.1); adds a nice interactive touch when users hover over the icons.

2. Customizing Icon Size and Position

If you want to adjust the size or position of the icons, you can modify the height and margin properties.

For instance, if you want larger icons, simply increase the height value:

.payment-icons img {
height: 60px; /* Increase icon size */
}

If you want the icons to be aligned to the left or right of the footer, you can adjust the text-align property:

.payment-icons {
text-align: left; /* Aligns icons to the left */
}

3. Adding Padding or Background Color

To make the icons stand out more, you might want to add some background color or padding around them. Here’s an example where we add padding and a background color:

.payment-icons img {
background-color: #f4f4f4; /* Light gray background */
padding: 5px; /* Adds space around the icons */
border-radius: 5px; /* Rounds the corners of the icons */
}

This gives the icons a more polished and professional look, making them stand out against the background.

4. Responsive Design for Mobile Devices

To ensure your payment icons look great on all devices, it’s essential to use responsive CSS.

You can adjust the icon size for mobile devices using media queries:

@media (max-width: 768px) {
.payment-icons img {
height: 30px; /* Smaller icons for mobile */
margin: 0 10px; /* Less space between icons */
}
}

This ensures that the icons won’t overwhelm the layout on smaller screens and will remain properly aligned.

5. Additional Styling (Optional)

You can also add custom effects, like a border around the icons, shadowing, or animations, depending on your store’s style:

.payment-icons img {
border: 2px solid #ccc; /* Adds a thin border around each icon */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
border-radius: 50%; /* Rounds the corners for a circular effect */
}

This will make the icons appear more interactive and visually distinct.

6. Testing Your Changes

After applying your CSS changes, always preview your site on different screen sizes to ensure that the icons look great on both desktop and mobile devices.

You can use your browser’s developer tools to inspect and tweak the CSS in real-time, making the testing process faster and easier.

How to Add WooCommerce Payment Icons Footer Step by Step  HTML Code

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 Widget 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.

Simplifying the Process with WC PayIcons Plugin

If you’re looking for an even easier and more efficient way to manage and display payment icons in your WooCommerce store, the WC PayIcons plugin is the perfect solution.

When working on multiple WooCommerce projects, I constantly encountered the challenge of customizing payment icons for different stores.

The process of manually uploading images, adjusting HTML code, and styling with CSS could be time-consuming, especially if the store needed frequent updates or customization.

That’s why I created the WC PayIcons plugin – a hassle-free, all-in-one solution to streamline this process.

With the WC PayIcons plugin, you can:

• Add payment icons with ease: No need for complex code. Simply install the plugin, and you can add SVG payment icons to your footer, checkout page, or anywhere on your site using an easy-to-use widget.
• Customize the look: Match the icons to your store’s branding by customizing their size, color, and spacing directly from the plugin settings.
• Pre and post-text options: Add helpful labels or descriptions to your payment icons, so your customers understand the payment methods available.
• Shortcodes for flexibility: Display payment icons anywhere on your site, including product pages, blog posts, or even custom templates, using simple shortcodes.
• Replace default WooCommerce checkout icons: Swap out the default icons in the checkout page with custom ones, giving your store a more cohesive and professional look.

By using the WC PayIcons plugin, you eliminate the need for manual coding, image uploading, or CSS editing.

It’s a smart, user-friendly solution that saves you time and ensures your payment icons are displayed the way you want, without the hassle.

Best Practices for Adding Payment Icons

When adding payment icons to your WooCommerce store, it’s important to follow best practices to ensure your icons are optimized for performance, accessible to all users, and error-free.

Here are some useful tips to help you along the way:

1. Optimize Icon Files for Faster Load Times

Icons are usually image files (like PNG, JPEG, or SVG), and large file sizes can slow down your website, affecting performance and user experience. Here’s how to optimize your icons:

• Use SVGs whenever possible: SVG (Scalable Vector Graphics) files are lightweight and retain high quality at any size. They’re perfect for payment icons, as they won’t lose sharpness on any screen.
• Compress image files: If you’re using PNG or JPEG files, use image optimization tools (like TinyPNG or ImageOptim) to reduce the file size without compromising quality. Smaller file sizes result in quicker page loads.
• Choose the right resolution: While high-resolution images might look better on large screens, they can be unnecessarily large for simple icons. Aim for 40px to 60px in height for payment icons.

2. Ensure Accessibility for All Users

Accessibility should always be a priority when designing for the web.

Your payment icons should be easy to identify and interact with for all users, including those with disabilities. Here’s how to make your payment icons more accessible:

• Add alt text: For each icon image, use descriptive alt text. This helps screen readers provide context to visually impaired users. For example:<img src=”visa-icon.svg” alt=”Visa Payment Icon”>
• Ensure sufficient contrast: Make sure your icons stand out clearly against the background. Use high-contrast colors for better visibility, especially for users with visual impairments.
• Use accessible HTML elements: For clickable icons that lead to payment information, make sure they are wrapped in anchor (<a>) tags with proper links, and include focus states for users navigating with keyboards.

3. Avoid Common Errors

There are a few common mistakes that can occur when adding payment icons. Here are some things to avoid:

• Broken image links: Always double-check the file paths and URLs of your icons. If the link is broken, your icons will not display correctly. To avoid broken links, upload your icons to your WordPress media library and use the correct URL.Example:<img src=”https://yourwebsite.com/wp-content/uploads/payment-icons/visa.svg” alt=”Visa Payment Icon”>
• Not testing the icons on different devices: Ensure your payment icons look good on all screen sizes. Use responsive design techniques or media queries to adjust icon size and placement for mobile users.
• Overcrowding the footer: While it’s important to display your payment options clearly, avoid overcrowding the footer with too many icons. Limit the number of payment methods to the most popular ones, so the icons don’t overwhelm the design

4. Test Performance and User Experience

Once you’ve added your payment icons, take a moment to test the user experience and performance:

• Check loading times: Use tools like Google PageSpeed Insights or GTmetrix to test your website’s loading speed. If your icons are slowing down the site, consider further optimization.
• Test for mobile responsiveness: Ensure your icons resize and align properly on mobile devices. You can use browser developer tools to simulate different screen sizes and test the design.
• User feedback: Ask customers for feedback on the payment icons. Are they easy to spot and understand? Adjust the design based on their feedback to improve user experience.

Conclusion: Choose What Works Best for You

Adding payment icons to your WooCommerce footer is a simple yet impactful way to improve customer trust and enhance the overall user experience on your store.

Whether you prefer a hands-on approach or a smarter, automated solution, there are a variety of ways to display your payment options.

• Using images is a straightforward approach, especially if you have custom icons or want to manually control the look of your store.
• HTML code offers more flexibility if you’re comfortable editing your theme, letting you embed payment icons directly into your footer or any other section of your site.
• CSS customization gives you the ability to fine-tune the design and layout of your icons, ensuring they align perfectly with your store’s branding.
• WC PayIcons plugin simplifies the entire process by offering an easy-to-use, time-saving solution to add, customize, and manage payment icons without any coding.

Ultimately, the method you choose depends on your comfort level with code and how much control you want over the design.

If you’re looking for convenience and flexibility, the WC PayIcons plugin could be the perfect solution, saving you time and effort while giving you full control over your payment icons.

No matter which method you decide to go with, the most important thing is to make sure your payment icons are clear, visible, and representative of the payment options you offer.

This small addition can go a long way in building trust with your customers and improving their shopping experience.

Now that you know all the options, it’s time to take action!

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.

More articles written by Joe