Displaying payment method icons on your Elementor website is a simple yet effective way to build trust with your customers. Whether you’re running an online store or offering services, showcasing recognizable payment options like Visa, Mastercard, American Express, Discover, Diners Club, JCB, and UnionPay reassures visitors that their transactions are secure. In this guide, you’ll learn how to add fully customizable payment icons to your site, ensuring a seamless and professional checkout experience.
Popular Use Cases for using Payment Method Icons in an Elementor Website
E-commerce Stores
Online shops selling physical or digital products can display payment method icons on product pages, checkout pages, and footers to assure customers that their preferred payment option is available.
Subscription-Based Websites
Membership platforms and SaaS products can showcase payment icons on pricing pages and checkout forms to reassure users that recurring billing is secure and supports their preferred payment method.
Service-Based Businesses
Freelancers, consultants, and agencies that accept online payments can display payment method icons on service pages, invoices, and checkout forms to build trust and streamline transactions.
Event Ticketing Platforms
Websites selling tickets for concerts, conferences, or online events can highlight payment icons on checkout pages and promotional banners to increase buyer trust and ease transactions.
Hotel & Travel Booking Sites
Hotels, airlines, and travel agencies can add payment method icons to booking pages and confirmation emails, ensuring customers feel confident about making secure payments.
Food Delivery & Restaurant Websites
Restaurants and food delivery services can showcase payment method icons on menu pages, checkout screens, and confirmation emails to reassure customers before placing an order.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Payment Method Icons widget to your Elementor website
To display payment method icons in Elementor, install the Payment Method Icons widget from the Unlimited Elements Widget library.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Payment Method Icons"
Hover over the widget and click install
Step #3: Add Payment Method Icons widget to your Elementor page
Now, in the Elementor editor, Find the Payment Method Icons widget and drag it to the desired part of your page.
General Settings
Layout
Select the layout from the given options:
- Inline
- Grid (Pro)
Items per row
Choose the number of icons to display per row.
Gap
Set the spacing between each icon.
Items Settings
Title
Enter the item title.
Payment Method
Select a payment method from the list to display the corresponding icon.
- Cards
- Alternative Payment Method
- Generic (Pro)
- Wallets (Pro)
- Custom (Pro)
Select Method (Cards)
Select a payment method from the list to display the corresponding icon.
- American Express
- Cartes Bancaires
- Dankort
- Diners
- Discover
- Elo
- Hipercard
- Jcb
- Maestro
- Maestro Alt
- Mastercard
- Mastercard Alt
- Uatp
- Unionpay
- Visa
- Vpay
Select Method (Alternative Payment Method)
Select a payment method from the list to display the corresponding icon.
- Alipay
- Alipay Plus
- Amazon Pay
- Availabill
- Bancontact
- BillPay
- Boncard
- Bonus Card
- Butterfly Card
- Cembra Pay
- Crif
- Crypto
- Eps
- Giropay
- Half Fare Plus
- Ideal
- Klarna
- Lunch Check
- Media Markt
- Migros GiftCard
- Mobilepay
- Paycard
- Paypal
- Paysafe Card
- Pointspay
- Postfinance Card
- Postfinance efinance
- Powerpay
- Reka
- Samsung Pay
- Sepa
- Skrill
- Swish
- Swissbilling
- Swisscom Pay
- Swisspass
- Twint
- Vipps
- Wechat Pay
Select Method (Generic)
Select a payment method from the list to display the corresponding icon.
- Card Generic
- Card Generic Alt
- Card Generic Gold
- Gift Card Generic
- Gift Card Generic Alt
- Gift Card Generic Gold
- Invoice
Select Method (Wallets)
Select a payment method from the list to display the corresponding icon.
- Apple Pay
- Google Pay
Select Method (Custom)
If you cannot find the desired icon in the predefined lists, you can also upload a custom image of your payment method icon.
Wrapping it Up!
By adding payment method icons to your Elementor website, you create a more transparent and user-friendly shopping experience. Customers feel more confident when they see trusted payment options, leading to higher conversion rates. With Elementor’s flexibility, you can easily customize and position these icons to match your site’s design. Start implementing this today and enhance your website’s credibility with just a few simple steps!