Configuration
Swatch is configured in two places: the global settings page for store-wide defaults, and the attribute and term screens where you choose the swatch type and assign colours or labels.
Global settings
Section titled “Global settings”Open WooCommerce → Swatch in wp-admin.
Enable swatches
Section titled “Enable swatches”The master switch. When off, every variable product falls back to WooCommerce’s standard <select> dropdowns. Turn it on to render swatches for any attribute that has swatch data.
Default type
Section titled “Default type”The swatch type used by an attribute that has no explicit type of its own:
- Colour — round (or square) colour dots, filled with the hex colour you set per term.
- Button / label — pills showing the term’s label text.
An attribute can override this on its own screen, so the default is just the starting point for new attributes.
The swatch dimensions. Larger sizes are easier to tap on mobile; smaller sizes suit dense attribute lists. The value drives a CSS custom property, so the swatches scale cleanly without a layout shift.
The corner style of the swatches — typically circle or square for colour dots, and rounded or square for button/label pills.
Tooltip
Section titled “Tooltip”When on, the term name appears on hover and on keyboard focus. This is useful for colour swatches where the dot alone does not name the colour. The tooltip is for sighted users; screen-reader users always get the term name through the accessible label regardless of this setting.
Per-attribute type
Section titled “Per-attribute type”Go to Products → Attributes and open a global attribute (for example Colour or Size). There you choose the swatch type for that attribute — colour or button/label — overriding the global default. This lets a Colour attribute use colour dots while a Size attribute uses label pills, in the same store.
Per-term colour and label
Section titled “Per-term colour and label”Open the terms of a global attribute (the Configure terms screen). For each term you can set:
- Colour — a hex value, sanitised on save with
sanitize_hex_color. Used by colour-type swatches as the dot’s fill. - Custom label — alternative text shown on a button/label pill, stored as term meta. Leave it blank to use the term’s own name.
How the settings combine
Section titled “How the settings combine”When a variable product renders, each attribute looks up its own type (or the global default), then reads each term’s colour or label to draw the swatches. An attribute with no usable swatch data — for example a colour attribute where no colours are set — falls back to the standard dropdown automatically, so a half-configured attribute never breaks the page.
Theming with CSS
Section titled “Theming with CSS”Swatch exposes its sizes and colours as CSS custom properties, so you can re-theme the swatches from your theme stylesheet without overriding markup. Focus rings, contrast and reduced-motion behaviour are built in and do not need configuration.