Variation swatches instead of dropdowns
Swatch replaces WooCommerce's default variation dropdowns with visual, accessible swatches on the product page. Pick a swatch type per attribute — colour dots or button/label pills — and assign a colour or label per term. The swatches drive the native variations form, so price, stock and add-to-cart update as usual.
Works with
Variation dropdowns are hard to read
A shopper picking a colour or size from a dropdown cannot see what the variation looks like. That slows the decision and makes the store look less polished than competitors that use swatches.
- ✗ Colours and sizes hidden inside a dropdown
- ✗ Shoppers cannot see the variation before choosing
- ✗ Swatch plugins often pull in jQuery and slow the store
- ✗ Swatches with no keyboard or screen-reader support
Swatch shows variations as accessible swatches
- ✓ Colour and button/label swatches instead of dropdowns
- ✓ Swatch type chosen independently per attribute
- ✓ Native variations form — price, stock and cart as usual
- ✓ Plain-JavaScript rendering with no jQuery
What you get in the free version
Everything you need to show variations as swatches.
Colour and button swatches
Two swatch types — colour dots and button/label pills, chosen per attribute.
Type per attribute
Choose the swatch type on the global attribute screen, independently for each attribute.
Colour and label per term
Colour stored via sanitize_hex_color, and a custom label stored as term meta.
Native variations form
Swatches drive the WooCommerce form — price, stock and the add-to-cart button update like the 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.
Graceful fallback
An attribute with no swatch data keeps the standard dropdown — nothing ever breaks.
Settings page
Enable/disable, default type, size, shape and tooltip in the WooCommerce menu.
Up and running in three steps
Enable swatches and show the first variation on the product page.
Install
Activate Swatch alongside WooCommerce.
Set the types
In WooCommerce → Swatch pick the default type, then set a type per attribute on the global attribute screen.
Assign colours
In Products → Attributes set a colour or label on each term, then open a variable product page.
Who it is for
When products have colour and size variations — a clear choice without a heavy plugin.
Fashion and apparel
Colours and sizes visible at a glance, no guessing from a dropdown.
- ✓ Colour swatches
- ✓ Size labels
- ✓ No jQuery
Stores with many variations
Swatch type per attribute — colour as a dot, size as a label.
- ✓ Type per attribute
- ✓ Term meta
- ✓ Native form
jQuery-free storefronts
A small script hooked into variation events instead of a library on every page.
- ✓ Vanilla JS
- ✓ ARIA radiogroup
- ✓ Zero CLS
Need more? Swatch PRO
FREE covers colour and button/label swatches. Swatch PRO will add image swatches, per-variation images and rich tooltips.
- ✓ Image swatches per term (planned)
- ✓ Per-variation gallery images (planned)
- ✓ Preview tooltips and archive swatches (planned)
Support and resources
Every plugin has its own documentation with setup walkthroughs. Bugs and questions go to the public GitHub repository for that plugin — we answer in the open.
Frequently asked questions
Does it require WooCommerce?
Yes. Swatch extends WooCommerce variable products and does nothing without it.
What happens to attributes I have not configured?
They keep WooCommerce's standard dropdown. Colour swatches with no colours set fall back to the dropdown automatically, so nothing ever breaks.
Does Swatch use jQuery?
No. The front end is plain JavaScript that hooks WooCommerce's own variation events.
Are the swatches keyboard accessible?
Yes. Swatches use radiogroup semantics, work with arrow keys and are labelled for screen readers.
Where do I set the colour and label?
On Products → Attributes, on each term of a global attribute. Colour is stored via sanitize_hex_color and the label as term meta.
Do swatches change the price and stock?
Yes. Swatches drive WooCommerce's native variations form, so price, stock and the add-to-cart button update just as they do with dropdowns.
Which swatch types are available?
Colour dots and button/label pills, chosen independently for each attribute.
Does Swatch pair with Sizer and Shortlist?
Yes. Sizer adds a size guide on the product page and Shortlist a wishlist. Swatch complements the variation choice with clear swatches.
Show variations as swatches
Colour and label swatches instead of dropdowns, accessible and jQuery-free. The full FREE edition under GPL.
Read the docsFREE is complete colour and label swatches — PRO adds image swatches and per-variation images (planned).