By default, WooCommerce shows colors and sizes in dropdown menus. They work, but they hide the most important information: which colors exist, and which ones are available. Customers have to open a menu, read a list of words, and sometimes discover at the end that their combination is out of stock.
What is wrong with dropdowns
- Colors are words: “Sage” or “Terracotta” mean little until you see them.
- Two taps instead of one: open the menu, then choose. On a phone, the native picker covers the page.
- Bad surprises: you choose Navy, then XL, and only then learn it is unavailable.
- Nothing in the shop: the product grid does not show that a shirt exists in four colors.
What swatches change
- Every color is visible at once, as a real color or a picture of the fabric.
- Sizes become buttons: one tap, and the selected size is obvious.
- Combinations out of stock are crossed out before the customer clicks.
- The product picture follows the chosen color.
- Small color dots under each product in the shop show the range.
Which type for which attribute
| Attribute | Best swatch |
|---|---|
| Plain colors | Color swatch |
| Patterns, fabrics, wood, finishes | Image swatch |
| Sizes, capacities, lengths | Buttons |
| Long names (“Gift box with ribbon”) | Buttons, or keep the dropdown |
How to set it up
- Install Swatchly.
- In Products › Attributes, edit Color and choose “Color swatch”.
- Click “Configure terms” and pick the color of each value (two colors for two-tone products).
- Sizes and other attributes show as buttons automatically.
Your variations, prices, stock and images do not change: only the way the options are shown. Try it on the live demo: choose Navy and see size XL crossed out.
Tips
- Give each variation its own picture: swatches are much more convincing when the image follows.
- Use real color codes from your product photos, not pure web colors.
- Keep size labels short (S, M, L) and add a size guide next to them.
More product page ideas in our product page checklist.
Frequently asked questions
Do swatches work with existing variable products?
Yes, they replace how the options are displayed; products and variations stay the same.
Can I use pictures instead of colors?
Yes, with image swatches: ideal for fabrics, patterns and finishes.
What happens to out of stock combinations?
They are crossed out, so customers see them before choosing.