Swatch

Swatch replaces WooCommerce’s default variation <select> dropdowns with visual, accessible swatches on single product pages. Pick a swatch type per attribute (colour dots or button/label pills) and assign a colour or label per term.

Why stores pick Swatch

Swatch drives WooCommerce’s own variations form, so price, stock and the add-to-cart button update exactly as they do with the stock dropdowns. Selected and out-of-combination states reflect automatically. The free edition is the full GPL product — self-contained, with no external services.

Highlights

• Two swatch types — colour dots and button/label pills, chosen per attribute.
• Per-attribute selection on the global attribute screen.
• Per-term colour and label — colour stored via sanitize_hex_color, custom label stored as term meta.
• Native variations form — no jQuery, vanilla JS hooking WooCommerce’s own variation events.
• Keyboard operable — radiogroup semantics, arrow keys, screen-reader labels.
• Accessible visuals — focus-visible rings, sufficient contrast, reduced-motion friendly, no layout shift.
• Graceful fallback to the standard dropdown when an attribute has no swatch data.
• Settings page under WooCommerce — enable/disable, default type, size, shape, tooltip.

How the swatches work

Each configured attribute renders as a radiogroup of swatches in place of the dropdown. Selecting a swatch feeds the choice into WooCommerce’s native variations form, which updates price, stock and the add-to-cart button. Attributes with no swatch data keep the standard dropdown, so nothing ever breaks.

Editions

• Free on WordPress.org — colour and button/label swatches, per-attribute type, per-term colour/label, settings page.
• Pro (planned) for image swatches, per-variation images, tooltips with previews and archive/loop swatches.

Next steps

• Getting started — install, set defaults, assign colours and labels.