Placing badges

There are two ways the badge row appears: automatically under the add-to-cart button on single product pages, and manually via the [trust_badges] shortcode. This page covers both, plus theming and the performance and accessibility behaviour.

Badges under the add-to-cart button

The default placement, right where shoppers decide to buy.

1. Open WooCommerce → Trust Badges and make sure Enable trust badges and Show on product pages are both on.
2. Write a heading like Guaranteed safe checkout, or clear it for an icons-only row.
3. In the Badges card, tick the badges that match your store, three to five usually read better than all ten.
4. Save.

The row prints on woocommerce_after_add_to_cart_form at the default priority, so on most themes it lands immediately below the add-to-cart button in the product summary. Because it is server-rendered PHP sitting in normal document flow, it adds no layout shift.

Placing the row with the shortcode

To show the row somewhere other than the product summary, a page, a block, a widget area, a custom template part, use:

[trust_badges]

The shortcode takes no attributes; it renders the same row from your saved settings (same badges, heading and colour). It enqueues the stylesheet on demand, so it works on pages where the product-page row never runs. The master Enable trust badges toggle still has to be on. If you only want the badges where you place them by hand, turn Show on product pages off and use the shortcode alone.

In a block theme, drop a Shortcode block and paste [trust_badges]. In classic widgets, use a Shortcode/Text widget.

Theming to your brand

• One colour does it. Set Icon colour on the settings screen; it tints both the icons and the heading and applies inline as --trust-seal, so every badge follows it through currentColor.
• Match the theme automatically. Where your theme exposes --wp--preset--color--primary, the strip inherits it as the default accent before your explicit colour overrides it.
• CSS for the rest. Size, gap and radius are --trust-icon-size, --trust-gap and --trust-radius on .trust-badges; set them in your theme stylesheet to resize or tighten the row.
• Icons only. Leave the heading blank for a compact, minimal strip.

What the row looks like in markup

The output is a .trust-badges container with an optional .trust-badges__heading paragraph and a .trust-badges__list unordered list (role="list"). Each badge is a list item whose icon is wrapped in <span class="trust-badge__icon" role="img" aria-label="…">, where the label is the badge’s library name (for example Secure checkout (lock)). The icons are visible; the labels are read by assistive technology, not printed as captions.

There is no theme-template override path, the row is rendered from the plugin’s own templates/badges.php and is not loaded through locate_template, so copying it into your theme has no effect. Re-theme with the CSS custom properties above instead.

Why it stays fast and accessible

• No front-end JavaScript. The storefront output is pure CSS; nothing is scripted on the page.
• No external requests. Every icon is an inline SVG from your own site, nothing loads from a third party and there is nothing to track.
• No layout shift. The row is server-rendered in normal flow, so it does not push content as the page paints.
• Accessible names and a list. Each badge exposes an accessible name via aria-label; the row is a semantic list.
• Motion is opt-out aware. The hover lift and the one-time seal “inscribe” animation are wrapped in prefers-reduced-motion: no-preference, so visitors who ask for reduced motion get a still strip.