Boost Sales with Simple Payment Icons in Flatsome – Woocommerce

Recognizable payment methods like PayPal, Visa, and MasterCard act as visual signals that reassure customers of secure transactions. If you’re using the Flatsome theme, you’re in luck—it offers excellent flexibility for adding and customizing these icons, making it easier to guide your customers toward a purchase.

How to Add Payment Icons in Flatsome – Step-by-Step

Step 1: Create a UX Block for Payment Icons

1. Go to WordPress Dashboard: In the backend of your WordPress site, go to UX Blocks (under the Flatsome menu).
2. Create a New UX Block:
   • Click Add New.
   • Name it something simple like Payment Icons.
3. Open UX Builder:
   • Once your block is created, click Edit with UX Builder.
   • Create a row with one column.
   • Set the row’s settings to Collapse and Full.

Step 2: Add Payment Icons

1. Insert a Stack Element:
   • In the UX Builder, search for Stack and add it to the column.
   • Inside the stack, we’ll be adding the payment icon images.
2. Upload the Icons:
   • For this tutorial, we’ll use SVG files since they offer sharp, clear images.
   • Upload the SVG icons to your Media Library.
3. Add the Images:
   • Insert your payment icons (e.g., Visa, MasterCard, PayPal) one by one by adding Image Elements within the stack.
   • Set the image size to Original to keep them sharp.

Step 3: Customizing the Icons’ Layout

1. Adjust Stack Settings:
   • You can adjust the gap between icons. A gap of 0.5 or 1 should look good.
2. Preview Mobile View:
   • It’s important to check how the icons appear on mobile. You may need to adjust padding or column settings.
3. Column Padding:
   • Go into the column settings and set the padding to around 10px.
   • Adjust the width (e.g., 50%) to fit them nicely on your page.

Step 4: Adding Missing Payment Icons (Optional)

If a payment icon is missing (like Swish, for example), you can create a custom one using Figma:

1. Open Figma:
   • If you’re not familiar with Figma, don’t worry—it’s free to use, and you can easily create custom SVGs.
2. Create the Icon:
   • Duplicate an existing payment icon in Figma and replace the artwork.
   • Export it as an SVG and upload it to your media library.
3. Add the New Icon:
   • Follow the same steps as above to add it to your stack.

Step 5: Display Icons on Checkout and Cart Pages

1. Copy the UX Block Shortcode:
   • Once your UX block is ready, copy its shortcode.
2. Go to Flatsome Theme Options:
   • Navigate to Flatsome > Theme Options > WooCommerce.
   • Scroll down to Cart Settings and paste the shortcode where you want the icons to appear (e.g., above or below the TrustPilot badge).
3. Check the Icons:
   • Refresh your site and ensure the icons are visible on the cart page and checkout page.

Step 6: Add Icons to Product Pages

1. Edit Product Layout with UX Builder:
   • Open your Product Layout in UX Builder.
2. Insert the Payment Icons UX Block:
   • Add the same UX Block shortcode under the Add to Cart button to display the payment icons on product pages.
3. Finalize and Adjust:
   • You can tweak the padding and gaps to make sure the icons are spaced nicely.

Why Payment Icons Improve Conversions

Payment icons may seem like a small detail, but they play a big role in driving conversions. These familiar logos act as trust signals, reassuring customers about your store’s legitimacy and security. By displaying recognizable payment methods like Visa, PayPal, and MasterCard, you reduce friction in the buying process and address common concerns upfront.

Build Trust with Your Customers

Trust is the foundation of every successful online store. Shoppers want confidence when entering payment details, and seeing familiar logos—like Visa, PayPal, or American Express—immediately boosts that confidence.

In fact, 75% of customers trust websites that display recognizable payment options. These icons send a clear message: your store is professional, secure, and reliable.

Reduce Abandoned Carts

Cart abandonment often happens because customers feel uncertain—about payment methods, security, or the checkout process itself. Adding clear and familiar payment icons eliminates this hesitation.

When shoppers see their preferred payment options upfront, they’re more likely to complete their purchase. It’s a simple step that can significantly lower cart abandonment rates and streamline the buying experience.

Enhance User Experience with Visual Clarity

Good user experience is key to improving conversions, and payment icons help by providing clear, visual cues. Instead of hunting for payment details, customers can instantly recognize their options.

When integrated seamlessly into your design—like with the Flatsome theme—these icons create a clean, professional look. They reduce friction, add clarity, and enhance the overall checkout experience without cluttering your page.

Final Thoughts

Adding payment icons to your WooCommerce store is a small but powerful change. They build trust, reduce cart abandonment, and improve the buying experience—all of which help increase conversions.

With Flatsome’s intuitive UX Builder, you can customize these icons to match your store’s design and display them on key pages: Cart, Checkout, and Product Layouts. Take a moment to test your checkout flow and tweak the placement of payment icons for maximum impact. For more practical tutorials and expert advice, head over to Seb de la Web.