Variation swatches

Swatches replace the dropdowns on a variable product’s page. Shoppers click a colour, a photo or a button, and the price, stock and product photo change as they would with the dropdown.

Turn on swatches for an attribute

Swatches work with the attributes under Products → Attributes (the ones shared by many products), not ones typed into a single product.

1. Go to Products → Attributes and select Edit under the attribute, such as Color
2. Pick a Swatch style:
   • Colour swatches: round colour dots
   • Image swatches: small square photos, good for fabrics and finishes
   • Buttons: the name of each choice in a box, good for sizes
   • Dropdown (WooCommerce default): no swatches
3. Select Update

Set each colour or photo

For colour and image swatches, give each choice its colour or photo:

1. On Products → Attributes, select Configure terms beside the attribute
2. Edit a term, such as Red
3. Pick a Swatch colour, or choose a Swatch image
4. Select Update

The term list shows each swatch in its Swatch column. A choice without a colour or photo shows as a button with its name until you set one.

What shoppers see

• The choice they picked is outlined in the site’s main colour. Next to colour and image swatches, its name is shown.
• A choice that’s out of stock with their other choices is crossed out and can’t be picked.
• A choice that doesn’t exist with their other choices (say, XL only comes in blue) is faded and can’t be picked.
• Clicking the picked swatch again clears it.
• Swatches work with the keyboard (Tab to a group, arrow keys to choose) and are read out by screen readers like any other choice.

Tips

• Swatches pick up the site’s form styles: border, corner rounding and main colour come from your Dirigible style settings.
• The shop and category pages don’t show swatches yet; only product pages do.
• Stock shown on a product page can be a little behind on a busy shop, because pages are cached. The cart always checks stock before checkout.