Variation Swatches for WooCommerce – Color & Image Swatches replaces the variation dropdowns on your product pages with clickable color, image or label swatches. You set the swatch type on each attribute in Products > Attributes, and the plugin options are at WooCommerce > Settings > Variation swatches. This walkthrough takes you from install to a finished variable product.
What Variation Swatches does #
Variation Swatches adds three attribute types to WooCommerce: Color, Image and Label. When a variable product uses an attribute of one of these types, the standard variation dropdown is replaced with swatches that shoppers click to pick a variation. There are no appearance settings: swatch size and shape are changed with CSS.
Install and activate #
- Free: in Plugins > Add New, search for Variation Swatches for WooCommerce – Color & Image Swatches, then click Install Now and Activate.
- Pro: download the Pro zip from your WPFactory account, upload it under Plugins > Add New > Upload Plugin and activate it. Pro includes everything in the free version and deactivates the free plugin when you activate it.
WooCommerce must be active. For more detail, see How to Install Variation Swatches for WooCommerce.
First setup: your first swatches #
- Go to WooCommerce > Settings > Variation swatches.
- Make sure Enable Plugin is ticked. It is on by default, so swatches work right after activation. Leave Scripts Only on Product Page ticked (the default) unless your theme shows variation forms outside single product pages.
- Go to Products > Attributes and add an attribute (for example, Color). In the Type dropdown, choose Color, Image or Label, then click Add attribute.
- Click Configure terms and add a term for each option. Each term shows one extra field that matches the attribute type: a Color picker, an Image upload, or a Label text box. Fill it in for every term.
- Edit a product, set Product data to Variable product, add your attribute on the Attributes tab, tick Used for variations, then create the variations on the Variations tab and update the product.
- View the product. The swatches replace the variation dropdown.
Main features #
Color, image and label swatches (free) #
Each type has its own step-by-step guide: How to Add Color Swatches, How to Add Image Swatches and How to Add Label (Text) Swatches. For attribute setup in general, see How to Set Up Color, Image and Label Attributes in WooCommerce.
Swatch size and shape with CSS (free) #
Variation Swatches has no size, shape or hover settings. You restyle swatches with a few lines of CSS. See How to Change the Size and Shape of WooCommerce Variation Swatches.
Only valid combinations (Pro) #
After a shopper picks one swatch, swatches that would lead to a variation you do not sell are greyed out. See How to Show Only Valid Variation Combinations in WooCommerce.
Add images on Gallery (Pro) #
Adds the term images of a variable product’s Image attributes to that product’s gallery. See How to Add Variation Attribute Images to the WooCommerce Product Gallery.
Select2 dropdowns (Pro) #
Turns the attribute selectors on variable product pages into searchable Select2 menus that show each swatch next to its name, which helps with large variation sets. See How to Use Select2 Dropdowns for WooCommerce Variations.
Every option is listed in the Variation Swatches Settings Reference, and developers can find the filter, meta keys and CSS classes in the Variation Swatches Developer Reference.
Free vs Pro #
| Feature | Option ID | Default | Free/Pro |
|---|---|---|---|
| Color, Image and Label attribute types | n/a | n/a | Free |
| Enable Plugin | alg_wc_civs_enable |
Yes | Free |
| Scripts Only on Product Page | alg_wc_civs_scripts_on_product_page |
Yes | Free |
| Only valid combinations | alg_wc_civs_possible_combinations |
Yes | Pro |
| Add images on Gallery | alg_wc_civs_add_images_on_gal |
Yes | Pro |
| Use Select2 | alg_wc_civs_use_select_2 |
No | Pro |
| Load Select2 | alg_wc_civs_enqueue_select_2 |
Yes | Pro |
FAQ #
Why do I still see a dropdown instead of swatches? #
The attribute’s Type is probably still Select, or its terms have no color, image or label value. Edit the attribute in Products > Attributes, set the type to Color, Image or Label, and fill in the field on each term. Also check that Enable Plugin is ticked. More fixes: Troubleshooting Variation Swatches for WooCommerce.
Do swatches work with custom product attributes? #
No. The swatch type is set on global attributes created in Products > Attributes. Custom attributes typed directly into a single product have no type setting, so they keep the standard dropdown.
Why are swatches missing in my theme’s quick view or on shop pages? #
Scripts Only on Product Page is ticked by default, so the swatch scripts and styles load on single product pages only. Untick it if your theme shows variation forms elsewhere.
Can I change the swatch size or make them round? #
Yes, with CSS. There are no appearance settings in either version. See How to Change the Size and Shape of WooCommerce Variation Swatches.
What changes when I upgrade to Pro? #
Only valid combinations and Add images on Gallery are on by default, so they take effect as soon as Pro is active. Use Select2 is off until you tick it.
Do more with your swatches #
Color, image and label swatches are free. Variation Swatches for WooCommerce – Color & Image Swatches Pro greys out unavailable combinations, adds attribute images to the product gallery and switches large variation sets to searchable Select2 dropdowns. See what Pro unlocks.
Need a hand? Our team answers every ticket on the Variation Swatches support forum.
