To set up swatch attributes with Variation Swatches for WooCommerce – Color & Image Swatches, go to Products > Attributes, add a new attribute with a Name and Slug, and choose Color, Image, or Label in the Type dropdown. Then click Configure terms next to the attribute to set a color, image, or text for each term.
Before you start #
- WooCommerce, active.
- Variation Swatches installed and enabled. Without it, the Type dropdown only offers the standard Select option.
Open the Attributes screen #
- In your WordPress dashboard, go to Products > Attributes.
Add a new attribute #
- Enter a clear Name for the attribute your customers will see, for example
ColororSize. - Set a Slug, a short internal reference such as
color. Keep it under 28 characters. - Optionally tick Enable archives if you want dedicated archive pages for each attribute value.
Choose the attribute type #
The Type dropdown is where Variation Swatches does its work. It adds three types to the standard Select option:
| Type | What each term shows | Internal type key |
|---|---|---|
| Select | The standard WooCommerce dropdown (no swatch) | select |
| Color | A color square, filled with the color you pick per term | alg_wc_civs_color |
| Image | A thumbnail, from the image you set per term | alg_wc_civs_image |
| Label | A short text button, from the label you set per term | alg_wc_civs_label |
Pick Color, Image, or Label, then click Add attribute.
Set the values for each term #
After the attribute is saved, click Configure terms next to it and add your values (for example Red, Green, Blue). Each term now shows an extra field that matches the type you chose: a color picker for Color, an image uploader for Image, or a text field for Label.
Step-by-step instructions for each type:
- Adding color swatches to your products
- Adding image swatches to your products
- Adding label swatches to your products
Troubleshooting #
- Only “Select” appears in the Type dropdown: Variation Swatches is not active. Install and enable it, then reload the Attributes screen.
- The color, image, or label field is missing on the term page: the attribute type is still set to Select. Edit the attribute, change Type to Color, Image, or Label, and save.
Get more from your attributes #
Color, image, and label attributes are free. Variation Swatches for WooCommerce – Color & Image Swatches Pro adds only-valid-combination filtering, attribute images in the product gallery, and Select2 dropdowns for large variation sets. See what Pro unlocks.
