How to Add Color Swatches to WooCommerce Products

To add color swatches with Variation Swatches for WooCommerce – Color & Image Swatches, go to Products > Attributes, add an attribute such as Color, and set its Type to Color. Then click Configure terms and pick each term’s color with the Color picker, and add the attribute to a variable product with Used for variations ticked.

Before you start #

• WooCommerce, active.
• Variation Swatches installed and enabled.
• A variable product to attach the attribute to (or one you will create). Swatches replace the variation dropdown, which only exists on variable products.

Step 1: create a Color attribute #

1. Go to Products > Attributes.
2. Click Add new attribute, enter a Name such as Color, and set a Slug such as color.
3. In the Type dropdown, choose Color.
4. Click Add attribute.

Step 2: add colors as terms #

1. Next to your new Color attribute, click Configure terms.
2. Enter a Name for the value, for example Red.
3. Use the Color picker to choose the swatch color. This field is added by Variation Swatches and is stored in the term meta key alg_wc_civs_term_color_color.
4. Click Add new Color (the button is named after your attribute).
5. Repeat for every color you sell.

Note: the color you pick here is the exact fill of the on-page square. There is no separate “Type” field on the term page: the color picker appears because you set the attribute Type to Color in Step 1.

Step 3: use the attribute on a variable product #

1. Edit a product and set Product data to Variable product.
2. On the Attributes tab, add your Color attribute and select the values you want, then tick Used for variations and save.
3. On the Variations tab, create the variations.
4. Open the product on the storefront: the color swatches replace the variation dropdown.

Troubleshooting #

• Squares show but have no color: the term has no color set. Edit the term under Configure terms and pick a color.
• Swatches do not appear on the product page: confirm the attribute Type is Color, that the attribute is set to Used for variations, and that Enable Plugin is ticked at WooCommerce > Settings > Variation swatches.
• Swatches missing on shop or category pages: by default the plugin loads its scripts on single product pages only. Turn off Scripts Only on Product Page in the settings to load them everywhere.

Add image and label swatches too #

The same steps work for the other types. See Adding image swatches and Adding label swatches.

Do more with your swatches #

Color swatches are free. Variation Swatches for WooCommerce – Color & Image Swatches Pro can hide variation combinations that are not available, so customers only click colors they can actually buy. See what Pro unlocks.