Skip to content
WooCommerce & WordPress Plugin Docs

Swatch

Swatch replaces WooCommerce’s variation <select> dropdowns with colour dots and labelled buttons on single product pages. You choose a swatch type per attribute, colour or button/label, and assign a hex colour or a custom label to each attribute term. The swatches drive WooCommerce’s own variations form, so a shopper picks a colour or size in one tap instead of opening a select menu.

Why stores pick Swatch

Section titled “Why stores pick Swatch”

Swatch does not reimplement WooCommerce’s variation logic, it filters the dropdown markup, keeps the original <select> in the page (visually hidden), and mirrors swatch clicks onto it. Price, stock and the add-to-cart button update exactly as they do with the stock dropdown, and out-of-combination swatches are disabled automatically as WooCommerce recalculates. The free edition is the full GPL product: self-contained, no external service, no account.

Free edition highlights

Section titled “Free edition highlights”
  • Two swatch types, round colour dots, or button/label pills showing the term name.
  • Per-attribute type chosen on the global attribute screen (Products > Attributes); a Colour attribute can use dots while Size uses pills.
  • Per-term colour and label, a hex colour (sanitised with sanitize_hex_color) and an optional short label, both stored as term meta.
  • Drives the native variations form, vanilla JavaScript hooking WooCommerce’s own variation events; no jQuery added by Swatch.
  • Keyboard operable, each attribute is a radiogroup; arrow keys, Home/End and Space/Enter all work, with visible focus rings.
  • Graceful fallback, an unconfigured attribute, or a colour attribute with no colours set, keeps the standard dropdown. Nothing ever breaks.
  • Swatches in the shop loop, optional and off by default: colour and label swatches under each variable product on shop, category, tag and product search listings, each one a link to the product with that option preselected.
  • Settings page under WooCommerce, a master enable/disable toggle, the shop-loop toggle and the default swatch type. That is the whole settings screen.

How the swatches work

Section titled “How the swatches work”

For each variation attribute, Swatch resolves a type (the attribute’s own, or the store default), reads each term’s colour or label, and renders a radiogroup of role="radio" buttons after the hidden <select>. Clicking or keying a swatch sets the select’s value and fires its change event; WooCommerce does the rest. There is no separate variation engine to keep in sync.

Editions

Section titled “Editions”
  • Free and GPL, in preparation for the WordPress.org directory, colour and button/label swatches on the product page and, optionally, in the shop loop, per-attribute type, per-term colour/label, the settings page, and the swatch/swatch_group_html and swatch/archive_html filters for add-ons.
  • Swatch Pro (Freemius) adds image swatches on both surfaces, per-variation image galleries, rich tooltips and per-attribute sizes and shapes. See Swatch Pro.

Next steps

Section titled “Next steps”