---
title: How to Set Up Color, Image and Label Attributes in WooCommerce
description: "Turn a WooCommerce attribute into color, image or label swatches: create the attribute and choose one of the new swatch types."
url: "https://wpfactory.com/docs/set-attribute-admin-options/"
updated: "2026-09-27"
category: How to
tags:
  - Variation Swatches for WooCommerce
---

# How to Set Up Color, Image and Label Attributes in WooCommerce

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

1. In your WordPress dashboard, go to **Products > Attributes**.

### Add a new attribute

1. Enter a clear **Name** for the attribute your customers will see, for example `Color` or `Size`.
2. Set a **Slug**, a short internal reference such as `color`. Keep it under 28 characters.
3. 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](https://wpfactory.com/docs/)
- [Adding image swatches to your products](https://wpfactory.com/docs/)
- [Adding label swatches to your products](https://wpfactory.com/docs/)

### 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](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/) Pro adds only-valid-combination filtering, attribute images in the product gallery, and Select2 dropdowns for large variation sets. [See what Pro unlocks](https://wpfactory.com/item/color-or-image-variation-swatches-for-woocommerce/).

Related articles

- [How to Add Variation Attribute Images to the WooCommerce Product Gallery](https://wpfactory.com/docs/variation-attribute-images-in-product-gallery/)
- [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 Color Swatches to WooCommerce Products](https://wpfactory.com/docs/add-color-swatches/)
- [How to Change the Size and Shape of WooCommerce Variation Swatches](https://wpfactory.com/docs/style-and-resize-variation-swatches-css/)

 

[![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/)