How to Set Up Variation Swatches in WooCommerce

Shock’s variation swatches for WooCommerce replace the default variation dropdowns with clickable color, image, or label buttons. Instead of picking “Red” from a list, shoppers tap a red circle — a clearer, faster and more attractive way to choose a variation, which helps conversions.

Setting them up has two parts: creating the product attribute (and its swatch terms), then linking that attribute to a variable product.

Part 1 — Create and configure an attribute

Add the attribute

1. From the WordPress dashboard, go to Products » Attributes.

2. On the left, fill in the attribute name (for example, Color or Size) and choose its Type:

   • Label — a simple text label for each variation.
   • Color — a color swatch for each variation.
   • Image — an image swatch for each variation.

3. Click Add Attribute. It appears in the table on the right, where you can Edit or Delete it later.

Configure the terms

Terms are the individual options within an attribute (the specific colors, sizes or images).

1. In the attributes table, hover over your attribute and click Configure terms.

2. Add: fill in the fields, set the term’s color or image, and click Add New.

3. Edit: hover over a term, click Edit, adjust its swatch, and click Update.

Tip

For Color swatches, pick colors that clearly represent the real product. For Image swatches, use small, square, consistent images (a cropped fabric or product close-up works well) so the row of swatches stays tidy.

Part 2 — Apply the attribute to a product

1. From the WordPress dashboard, go to Products and edit (or create) a variable product.

2. In Product data, open the Attributes tab and add the attributes you want to offer as variations. Tick Used for variations.

3. Open the Variations tab and generate or add the variations, setting price, stock and image for each.

4. Open the Swatches tab and choose how the swatches display. For each attribute you can set the Attribute Type:

   • Default — inherit the global settings from Products » Attributes.
   • Custom (your attribute) — override the swatch style just for this product.

5. Update the product.

Reference image — replace before publishing16:9

The WooCommerce variable product editor with the Swatches tab open under Product data, showing the Attribute Type option (Default / Custom) for an attribute.

Note

Swatches only appear on variable products that have attributes marked Used for variations. On a simple product, there are no variations to swatch.

Caution

Make sure every generated variation has a price. WooCommerce hides variations without a price, which can make some swatches appear unselectable or missing on the live product page.

Next Set up your store pages: Cart, Checkout & Account.