FAQ

Does it require WooCommerce?

Yes. Swatch extends WooCommerce’s variable products and does nothing without it active. It only loads its assets on single product pages that carry a variations form.

What swatch types are available?

Two: colour dots and button / label pills. You pick the type per attribute on the Products → Attributes screen, with a store-wide default for attributes you have not set. There are no other types in the free edition, image swatches are a Swatch Pro feature.

Where do I set colours and labels?

On each global attribute’s term screen (Products → Attributes → Configure terms). Swatch colour is a hex value used by colour swatches; Swatch label is optional short text for button swatches that defaults to the term name. Both are stored as term meta.

What happens to attributes I have not configured?

They keep WooCommerce’s standard dropdown. A colour-type attribute with no colours set on any term also falls back to the dropdown automatically, and custom (product-level) attributes, which have no taxonomy or terms, always use the dropdown. A half-configured attribute never breaks the page.

Does it work without jQuery?

Yes. The front-end is vanilla JavaScript that hooks WooCommerce’s own variation events. It sets the value on the original (hidden) <select> and fires its change event, so price, stock and the add-to-cart button update exactly as they do with the dropdown.

Are the swatches accessible?

Each attribute’s swatches form a radiogroup with arrow-key, Home/End and Space/Enter navigation and visible focus-visible rings. Every swatch carries the term name as an aria-label. Disabled (out-of-combination) swatches are dimmed and struck through with a diagonal line, so the state is not conveyed by colour alone. Built with WCAG 2.2 AA in mind.

How is the colour stored?

Per term, as the swatch_color term meta, sanitised on save with sanitize_hex_color, an invalid or empty value is removed rather than stored. The custom label is stored as the swatch_label term meta.

Can I change the swatch size and shape?

There is no size or shape setting on the admin screen. Sizing, radius, gap, border and the selection accent are exposed as --swatch-* CSS custom properties, so you re-theme them from your theme stylesheet without overriding markup. Focus rings, contrast, dark mode and reduced-motion behaviour are built in.

Will swatches show in the shop or category listings?

The free edition renders swatches on the single product page only. Swatches in shop/archive loops, per-variation image galleries and image swatches are part of Swatch Pro (image swatches ship today; loops and galleries are on the roadmap).

Is there a shortcode?

No. Swatch has no shortcode, the swatches appear automatically wherever WooCommerce renders the variations form. Developers can adjust the markup with the swatch/swatch_group_html filter.

Does it cause layout shift?

No. The swatches are server-rendered and reserve their space up front, the only script loads defer, and the design respects prefers-reduced-motion, so there is no jump as the page settles.