Replace WooCommerce's plain "Choose an option" dropdowns with clickable colour circles or labelled buttons. Visual options reduce friction and lift conversions — shoppers see the choices instead of clicking a list.
Part of the WooCommerce Conversion Suite. Requires WooCommerce + the WooCommerce Conversion module.
How it works
On any variable product, Tiger Elements automatically turns the variation dropdown into swatches:
- If an attribute's options have a colour assigned → shoppers see colour circles.
- Otherwise → shoppers see neat labelled buttons (using the option names).
Picking a swatch updates the price, image and availability exactly like the normal dropdown — because it's still powered by WooCommerce underneath.
There's nothing to switch on per product — once the module is active, swatches appear automatically on variable products. To get colour circles, just give your colour options a colour (below).
Setting colours for a "Colour" attribute
- Go to Products → Attributes.
- Next to your colour attribute (e.g. Colour), click Configure terms.
- For each term (e.g. *Red*, *Blue*, *Green*):
- Click the term to edit it (or use Add new for a new one).
- In the Swatch Colour field, pick the colour with the colour picker.
- Save.
That's it — those options now show as colour circles on the product page.
Leave the Swatch Colour empty for any option you'd rather show as a text button (for example *Small / Medium / Large* on a Size attribute).
What shoppers see
- Colour swatches — round colour chips; the selected one gets a clear ring.
- Button swatches — pill‑shaped buttons; the selected one is highlighted.
- Selecting a swatch instantly updates the price, product image, and stock status.
- The standard WooCommerce "Clear" link still works to reset the choice.
Swatches are keyboard‑accessible and work great on touch screens.
Tips
- Use global attributes (Products → Attributes), not custom per‑product attributes, so your colours are set once and reused everywhere.
- Pick colours that match the real product as closely as possible — shoppers trust what they see.
- For patterns or textures that aren't a single colour, a labelled button (no colour set) often reads more clearly than an approximate colour chip.
Troubleshooting
My dropdown didn't turn into swatches. Swatches only apply to variable products that use global attributes (the ones under Products → Attributes). Make sure the attribute is set to be used for variations on the product.
Options show as buttons, not colour circles. Colour circles appear only when an option has a Swatch Colour set. Edit the attribute's terms (Products → Attributes → Configure terms) and assign a colour.
The colour picker isn't showing on the term page. The Swatch Colour field appears on attribute term screens (Products → Attributes → Configure terms → add/edit a term), not on regular product categories or tags.
Selecting a swatch doesn't change the price. Each variation needs its own price and stock in the product's Variations tab. If a combination isn't set up in WooCommerce, the swatch can't resolve a price.