WooCommerce Payment Icons on Product Pages
Overview
The Payment Icons embed is a reassurance row of accepted-payment logos (Visa, Mastercard, PayPal, Amex…) under a header like "Secure checkout with". It's one of the three presets of the icon-row (Trust Badges) type — placed near the Add to Cart button, it tells shoppers their payment is safe.
Display WooCommerce payment icons in a payment icons product page row with familiar accepted payment methods WooCommerce shoppers recognize. Sale Booster works as a flexible payment logo plugin WooCommerce store owners can use for WooCommerce secure checkout badges.
How it works
A first-time visitor is about to buy but wonders whether checkout is trustworthy. Right under the Add to Cart button they see "Secure checkout with" and the familiar Visa / Mastercard / PayPal / Amex logos — and they complete the purchase with confidence.
Embeds are available in the Pro version.
Step-by-step setup
1. Pick the Payment Icons type
Open Sale Badges → Embeds → Add New, give the embed a Name, and turn Status on. Under Embed Type choose Payment Icons. (It saves as the Trust Badges type, pre-filled with payment logos.)
2. Set the header and icons
On the Content tab:
- Header Text — e.g.
Secure checkout with. - Each icon — Change to a built-in logo or Upload your own; optional Top Text / Bottom Text; Add Action (None or Link); and Allow Size Adjustment for a per-icon desktop/mobile size.
Use Add New Badge to add more logos and Delete to remove one. Each text field has a Translate button.
3. Choose the layout & style
On the Theme & Styles tab, the Trust Badges Theme → Layout controls how the icons are laid out:
| Layout | Behavior |
|---|---|
| Style 1 — badges always visible | The classic row, all logos shown at once. |
| Style 2 | Collapses the badges behind a title row and lays them out as cards with the icon beside the text. |
Then set Icon Size (desktop/mobile), Badge Position and Header Text Position (Left / Center / Right, per device), Font Size / Font / Weight, Border, Hover Effect, open-links-in-new-tab, and an optional shadow.
4. Place it, target, then Save
On the Targeting tab, tick Custom Position and set Position on Product Page (e.g. After CSS selector) with a CSS Selector (default form.cart — this places the row just below the Add to Cart form). Pick the Devices, add Products rules (e.g. All Products), then click Save.
Ordering multiple embeds
When several embeds share the same position (for example a Feature Banner and this payment row, both After form.cart), the Order column on the Embeds list decides which shows first — lower numbers appear higher.
🧪 Example configuration
The payment row shown in the screenshots:
| Setting | Value |
|---|---|
| Type | Payment Icons |
| Header Text | Secure checkout with |
| Icons | Mastercard, Visa, PayPal, American Express |
| Layout | Style 1 — badges always visible |
| Position (Badge / Header) | Center |
| Placement | After form.cart |
| Targeting | All Products |
What customers see
Under the Add to Cart button, a centered "Secure checkout with" line followed by the familiar card logos — a small, trusted signal that reduces payment anxiety.
Related
The same icon-row type also powers the Social Media Icons and Trust Badges presets.
Next Steps
Frequently Asked Questions
How do I add payment icons to a WooCommerce product page?
Create an embed, choose Payment Icons, edit the header and logo rows in Content, select the layout in Theme & Styles, then configure placement and targeting.
Which payment logos can I display?
The Payment Icons preset includes common payment logos such as Visa, Mastercard, PayPal, and Amex. You can change icons or upload your own graphic through the icon controls.
Where should WooCommerce payment icons appear?
Place them under or near Add to Cart or near checkout reassurance content. Use the Position, Layout, and Targeting settings to keep the row visible without distracting from the purchase action.