Swatch
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
See it in action
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 and default swatch type 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
What PRO adds, and why it matters
Image swatches
Upload an image per attribute term rendered as a thumbnail swatch on the product page.
Per-variation gallery
Extra gallery images per variation with a thumbnail strip below the main gallery.
Archive swatches
Show swatches on shop, category, tag and search listings with links to the product and selected option.
Rich tooltips
Preview the colour chip, label or swatch image on hover and keyboard focus on product and archive pages.
Custom sizes and shapes
Small/large swatches and circle, square, rounded or pill shapes per global attribute.
What you get: FREE vs PRO
PRO keeps everything in the free plugin and adds the modules below.
Swatch vs Variation Swatches vs YITH Color & Label Variations
How Swatch compares to the popular WooCommerce variation swatches plugins.
| Swatch | Variation Swatches | YITH Color & Label | |
|---|---|---|---|
| Free version | Yes | Yes | Yes |
| Color + button/label swatches | Yes | Yes | Yes |
| Swatch type per attribute | Yes | Yes | — |
| Color or label per term | Yes | Yes | Yes |
| Uses the native variation form (no rebuild) | Yes | — | — |
| Keyboard + screen-reader accessible | Yes | — | — |
| No jQuery (lightweight) | Yes | — | — |
| Open source (GPLv2) | Yes | Core GPL | Core GPL |
| Paid plan price | from €29/yr | $49/yr | Free + premium |
Competitor data and pricing as of June 2026; check the vendors' sites for current pricing.
Need more? Swatch PRO
FREE covers colour and button/label swatches. Swatch PRO adds image swatches and per-variation gallery strips.
- ✓ Image swatches per term (shipped)
- ✓ Per-variation gallery images (shipped)
- ✓ Archive swatches on shop loops (shipped in PRO)
- ✓ Rich tooltips on hover and focus (shipped in PRO)
- ✓ Custom sizes and shapes per attribute (shipped in PRO)
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.
How does Swatch compare to Variation Swatches and YITH Color & Label Variations?
All three turn variation dropdowns into colour and label swatches. Swatch uses the native variation form, is keyboard accessible and jQuery-free, free and open source with PRO from €29/yr, versus Variation Swatches Pro at $49/yr. Pricing as of June 2026.
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, per-variation galleries and archive-loop previews.