---
title: How to Add Color Swatches to WooCommerce Products
description: "Add color swatches to WooCommerce products: create a Color attribute, add colors as terms, then use it on your variable products."
url: "https://wpfactory.com/docs/add-color-swatches/"
updated: "2026-09-27"
category: How to
tags:
  - Variation Swatches for WooCommerce
---

# 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**.

![Color swatches shown on a WooCommerce product page](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-tshirt-color-swatch.png)

### 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](https://wpfactory.com/docs/) and [Adding label swatches](https://wpfactory.com/docs/).

### Do more with your swatches

Color swatches are free. [Variation Swatches for WooCommerce - Color & Image Swatches](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) Pro can hide variation combinations that are not available, so customers only click colors they can actually buy. [See what Pro unlocks](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/).

Related articles

- [How to Add Label (Text) Swatches to WooCommerce Products](https://wpfactory.com/docs/add-label-swatches/)
- [How to Add Image Swatches to WooCommerce Products](https://wpfactory.com/docs/add-image-swatches/)
- [How to Add Variation Attribute Images to the WooCommerce Product Gallery](https://wpfactory.com/docs/variation-attribute-images-in-product-gallery/)
- [How to Change the Size and Shape of WooCommerce Variation Swatches](https://wpfactory.com/docs/style-and-resize-variation-swatches-css/)
- [How to Set Up Color, Image and Label Attributes in WooCommerce](https://wpfactory.com/docs/set-attribute-admin-options/)

 

[![Variation Swatches for WooCommerce – Color & Image Swatches](https://wpfactory.com/wp-content/uploads/Variation-Swatches-for-WooCommerce-–-Color-Image-Swatches.webp)](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/)