To add color, image and label swatches in WooCommerce, install a variation swatches plugin, set each product attribute to a swatch type, then assign the attribute to your variable products. WooCommerce shows variations as plain drop-downs by default, and a swatches plugin replaces them with clickable colors, pictures or buttons. This guide covers how swatches work, a step-by-step setup, and eight plugins worth comparing.
What are color, image and label swatches?
A swatch is a small clickable option that stands in for a drop-down choice on a variable product. There are three common types.
- Color swatches show a filled circle or square, for example red, navy or sand.
- Image swatches show a thumbnail, such as a fabric pattern, a wood finish or a pattern print.
- Label swatches (also called button swatches) show text such as S, M, L or 128 GB.
Some plugins also offer radio buttons and a mix of types on the same product. A t-shirt can use color swatches for the color and label swatches for the size.
Why use variation swatches in WooCommerce?
Drop-downs hide choices. A shopper has to click, scroll and read before seeing what you sell. Swatches put every option on the page at once, which makes the choice faster and clearer on a phone, where small drop-downs are awkward to use.
- Shoppers see options at a glance. They do not need to open a menu to learn that a shirt comes in six colors.
- Visual products sell better visually. A color name like “Dusty Rose” means little. A swatch shows it.
- Taps are easier than menus. Large swatches are simpler to hit on a touch screen.
- Fewer wrong orders. When the choice is obvious, fewer customers pick the wrong size or finish.
Before you start: set up your attributes
Swatches depend on how you built your variable products. Check these three things first.
- Use global attributes. Most swatch plugins work on attributes you create under Products, then Attributes, not on custom attributes typed into a single product. If your product uses a custom attribute, recreate it as a global one.
- Add terms for every option. Each color or size is a term inside the attribute, such as Red or Large.
- Create variations. The product must be a variable product with variations generated from the attributes.
Step-by-step: add swatches to WooCommerce
These steps use Variation Swatches for WooCommerce as the example, because it is widely used and has a free version. Other plugins follow the same pattern with different screen names.
Step 1: Install and activate the plugin
Go to Plugins, then Add New, search for the plugin, install it and activate it. WooCommerce must already be active. Take a backup or work on a staging site first if the store is live.
Step 2: Review the global settings
Open the plugin’s settings screen. Here you choose swatch shape (round or square), size, how a selected swatch looks, and what happens with options that are out of stock. Turn on the tooltip option if you want the term name to appear when a shopper hovers.
Step 3: Set the attribute type
Go to Products, then Attributes. Edit the attribute you want to change, for example Color. The plugin adds a type field with options such as Select, Color, Image and Button. Choose the one that fits, then save.
Step 4: Configure each term
Open the attribute’s terms. For a color attribute, each term now has a color picker. For an image attribute, each term has an image upload. Fill them in for every term, so no swatch shows up blank.
Step 5: Apply the attribute to your products
Edit a variable product, open the Attributes tab, and add the attribute with the terms that apply. Tick “Used for variations”, save, then generate or update the variations in the Variations tab.
Step 6: Adjust the swatch style
Preview the product page and compare it with your theme. Check swatch size, spacing and the selected state. Make sure there is enough contrast between a selected swatch and the others, so the choice is obvious without color alone.
Step 7: Test the full path
Open the product on a phone and a desktop. Pick each option, confirm the price and image change, add to cart and go through checkout. Also test an out-of-stock combination and check what the shopper sees.
Eight variation swatches plugins compared
All of these are on wordpress.org with a free version. Several also sell a pro version with extra features, so read each listing for what is free.
Variation Swatches for WooCommerce (Emran Ahmed)
This plugin replaces the default drop-downs with color, image and button swatches. It is one of the most widely installed options, which means plenty of tutorials and community answers.
Variation Swatches for WooCommerce (Brainstorm Force)
This plugin comes from the team behind Astra and CartFlows. It turns product drop-downs into clickable color, image and size swatches and fits naturally if you already use their other products.
WCBoost Variation Swatches
WCBoost replaces the default drop-downs with swatches so shoppers can see colors, sizes and styles quickly. It has a live demo you can try before installing.
Variation Swatches for WooCommerce (Woosuite)
This plugin lets you pick a color, image or label style for each attribute. It adds options on top of WooCommerce and leaves the default drop-down behaviour alone, which some store owners prefer for safety.
Variation Swatches for WooCommerce (RadiusTheme)
This plugin converts variation selects into radio buttons, images, colors and labels. It is responsive and has a pro version for more options.
Swatchly
Swatchly shows variations as colors, images or labels in place of drop-downs. It is a newer name and worth a look if you want a lighter interface.
WPC Variation Swatches
WPC Variation Swatches offers predefined styles, lets you mix different selector types on one product page and positions tooltips. It works with other WPC plugins, which helps if you already use them for bundles or quick view.
Choosly
Choosly from VillaTheme shows variation options as colors, buttons, images, variation images or radio buttons. It is a good fit when you want radio-style choices as well as swatches.
Benefits of swatches over drop-downs
The gains are practical rather than magical. Swatches shorten the path from landing on a product to adding it to the cart. They also let shoppers compare options without opening anything, which is useful on a catalog of clothing, home goods, accessories or paint.
| Question | Drop-down | Swatches |
|---|---|---|
| Are all options visible? | No, hidden in a menu | Yes, shown on the page |
| Can shoppers see the real color or pattern? | No, only a name | Yes |
| Easy to use on a phone? | Often fiddly | Larger tap targets |
| Space on the page | Compact | Needs more room |
Drop-downs still win in one case: an attribute with dozens of options, such as 40 shoe sizes by region. For long lists, keep a drop-down or group the options.
Extra features worth checking
- Shop page swatches. Some plugins show swatches on category pages, so shoppers can pick a color before opening the product.
- Variation image switching. The main product image should change when a color is chosen.
- Out-of-stock handling. Look for options to hide, fade or cross out unavailable choices.
- Tooltips and labels. A hover tooltip helps with color names and accessibility.
- Page builder and theme support. Confirm the plugin works with your theme and any product template you built.
Practical tips for better swatches
- Use real photos for image swatches of fabric, wood or leather. A flat color tile cannot show texture.
- Keep color names consistent. “Navy” and “Dark Blue” as separate terms confuse shoppers.
- Make the selected state obvious with a border or check mark, not just a slight shade change.
- Use label swatches for sizes, with a size guide link nearby. Our guide to size chart plugins covers that.
- Set a sensible default selection if most customers pick the same option.
Common mistakes to avoid
- Using custom product attributes. Swatches usually need global attributes. This is the top reason a swatch type does not appear.
- Leaving terms blank. A color term with no color set shows an empty box.
- Relying on color alone. Add a tooltip or label so color-blind shoppers can tell options apart.
- Skipping mobile tests. Swatches that look fine on desktop can wrap awkwardly on a narrow screen.
- Installing two swatch plugins. They fight over the same product form. Use one.
How to choose a swatches plugin
The eight plugins above do the core job, so the choice comes down to details. Test two of them on a staging copy of your store with one real product before you commit.
- Theme fit. Check that swatches look right inside your theme’s product layout and that the selected state is easy to see.
- Archive support. If you want swatches on category pages, confirm it is included in the version you will use, not only the paid one.
- Update history. Look at the “last updated” date and the support forum on wordpress.org. A plugin that is updated often keeps pace with WooCommerce.
- Attribute support. If you rely on custom attributes, check whether the plugin handles them or only global ones.
- Keyboard and screen reader use. Tab through the swatches on the product page. Each one should be reachable and have a readable name.
Frequently asked questions
Does WooCommerce have built-in swatches?
No, the standard WooCommerce product page shows variations as drop-downs. You need a plugin to display colors, images or labels instead.
Are variation swatch plugins free?
Yes, all eight plugins listed here have a free version on wordpress.org. Several offer a paid version with extras, such as shop page swatches or more styling options.
Why are my swatches not showing?
The most likely cause is a custom attribute. Create a global attribute under Products, then Attributes, set its type to color, image or button, and assign it to the product. Also check for theme or cache conflicts.
Can I use image swatches for patterns and textures?
Yes. Set the attribute type to Image and upload a photo for each term. Use close-up photos so shoppers can see the material.
Do swatches work on the shop and category pages?
Some plugins support this and some only on the product page. Check the plugin description for archive page support before you choose.
Will swatches slow down my store?
A good swatch plugin adds a small script and stylesheet, which is light. Test with and without it, and avoid running two swatch plugins at once.
Can I mix swatch types on one product?
Yes. Each attribute has its own type, so you can use color swatches for color and button swatches for size on the same product.
Where to go next
Swatches are one part of a better product page. See our guides to product tables, price history and reservation and rental plugins for more ways to improve how shoppers choose.