Using swatches
This walkthrough takes a fresh install to working swatches on a variable product, then explains the storefront behaviour you should expect.
1. Pick a global default
Section titled “1. Pick a global default”Open WooCommerce → Swatch, turn Enable swatches on, and pick a sensible default type. Most stores set the default to colour, because Colour is the attribute that benefits most from visual swatches; size and material attributes can override to button/label.
2. Choose the type per attribute
Section titled “2. Choose the type per attribute”Go to Products → Attributes and open each global attribute you use on variable products:
- For a Colour attribute, set the type to Colour so each term renders as a dot.
- For Size, Material or similar, set the type to Button / label so each term renders as a readable pill.
3. Assign colours and labels to terms
Section titled “3. Assign colours and labels to terms”Open the attribute’s terms. For a colour attribute, set a hex colour on each term (for example #1a1a1a for Black, #c0392b for Red). For a button/label attribute, leave the label blank to use the term name, or set a custom label when you want shorter or clearer text on the pill.
4. Confirm on a variable product
Section titled “4. Confirm on a variable product”Open a variable product that uses the attribute. The dropdown is replaced by a radiogroup of swatches. Selecting one:
- feeds the choice into WooCommerce’s native variations form,
- updates the price, stock and the add-to-cart button, exactly as the dropdown would,
- reflects selected and out-of-combination states automatically (a swatch that cannot pair with the current selection is shown unavailable).
Keyboard and screen-reader behaviour
Section titled “Keyboard and screen-reader behaviour”Each attribute’s swatches are a single radiogroup:
- Tab moves focus to the group; arrow keys move between swatches.
- The active swatch shows a visible focus ring (focus-visible), so keyboard users always see where they are.
- Each swatch carries the term name as an accessible label, so screen-reader users hear Red, Large and so on — not just “button”.
When swatches fall back
Section titled “When swatches fall back”Swatch never forces a broken control. If an attribute has no swatch type set and no usable per-term data, that attribute keeps WooCommerce’s standard dropdown. You can roll Swatch out one attribute at a time and the rest of the form keeps working.
Performance notes
Section titled “Performance notes”The front-end is vanilla JavaScript that listens to WooCommerce’s own variation events — there is no jQuery added by Swatch and no external request. Sizes and colours are CSS custom properties, the swatches reserve their space up front, and the design respects prefers-reduced-motion, so adding swatches does not introduce layout shift.