WooCommerce variation swatches: show colours and labels instead of dropdowns

A shopper choosing a colour or a size on a WooCommerce product page meets the same control for both: a dropdown. It works, but it hides the very thing the shopper is trying to compare. Swatches turn that choice into something visible and clickable. This guide explains what variation swatches are, why dropdowns slow the decision, and what to look for in a swatch plugin that stays fast and accessible.

What Variation Swatches Are and Why They Matter

A WooCommerce variable product has attributes such as colour and size, and each attribute is shown as a dropdown by default. The shopper has to open the list, read the option names, and pick blind: a colour is a word, not a colour.

Variation swatches replace those dropdowns with visual controls:

• Colour dots for a colour attribute, so the shopper sees the actual colour.
• Button or label pills for sizes and other attributes, so every option is visible at once.

The decision gets faster because nothing is hidden behind a click, and the store looks closer to the competitors shoppers already compare it against. The catch is that a swatch is only useful if it still behaves like the control it replaced.

What to Look For in a Swatch Plugin

Three things separate a swatch plugin you can trust from one that causes problems later:

• It drives the native variations form. The swatch should be an input into WooCommerce’s own variation logic, not a parallel system. Otherwise price, stock and add-to-cart can fall out of sync.
• It does not slow the store. Plenty of swatch plugins load jQuery and extra libraries on every page. A small script hooked into WooCommerce’s variation events does the same job without the weight.
• It is accessible. Swatches that are unlabelled clickable boxes lock out keyboard and screen-reader users. Proper radiogroup semantics, arrow-key navigation and visible focus keep the control usable for everyone.

How Swatch Does It

Swatch for WooCommerce is a free, open-source plugin that replaces variation dropdowns with visual swatches on the product page, grounded in the three points above.

• Two swatch types. Colour dots and button or label pills, chosen independently for each attribute on the global attribute screen.
• Colour and label per term. Set a colour on each term, stored via sanitize_hex_color, or a custom label stored as term meta, on the Products, Attributes screen.
• Native variations form. The swatches feed WooCommerce’s own form, so price, stock and the add-to-cart button update just as they do with dropdowns.
• Keyboard operable. Radiogroup semantics and arrow-key navigation, with screen-reader labels.
• Accessible visuals. Focus-visible rings, sufficient contrast, reduced-motion friendly, and no layout shift when swatches render.
• Graceful fallback. An attribute with no swatch data keeps the standard dropdown, so nothing ever breaks.
• Plain JavaScript. The front end hooks WooCommerce’s variation events with no jQuery dependency.
• Settings page. Enable or disable swatches and pick the default swatch type from the WooCommerce menu.

The free edition covers colour and button or label swatches in full. Image swatches per term, per-variation gallery images, swatches on shop and category loops, hover tooltips and custom sizes and shapes are part of Swatch PRO.

Swatch Versus Default WooCommerce

WooCommerce shows every variation attribute as a dropdown out of the box. Here is the difference for the variation choice specifically:

Capability	Default WooCommerce	Swatch
Colour attribute display	Dropdown of names	Colour dots
Size and other attributes	Dropdown of names	Button or label pills
Swatch type per attribute	n/a	Chosen independently per attribute
Price, stock, add-to-cart	Native form	Drives the same native form
Keyboard and screen-reader	Native select	Radiogroup, arrow keys, labels
jQuery dependency	n/a	None, plain JavaScript
Unconfigured attribute	Dropdown	Falls back to the dropdown
Cost	Free (core)	Free; PRO adds image swatches, galleries, archive previews

The Short Version

Variation swatches make a WooCommerce product page easier to read by turning colour and size dropdowns into visible, clickable controls. The ones worth using still drive WooCommerce’s native variations form, avoid jQuery, and stay keyboard and screen-reader accessible. Swatch does that for free with colour and label swatches, falls back to the dropdown when an attribute has no swatch data, and leaves image swatches and gallery previews to PRO.