Setting colours for colour swatches

Updated 30 October 2026

A colour swatch needs a colour value, but WooCommerce attributes only store names. The plugin fills that gap in two ways: it recognises standard colour names on its own, and it gives you a screen to set the exact colour for every other name.

Standard colour names work straight away

If your colour attribute is called Color (internal name pa_color) and an option’s slug matches a standard web colour name, the dot is coloured automatically. That covers about 140 names, including:

• black, white, grey and gray, silver
• red, crimson, maroon, pink, hotpink
• navy, blue, royalblue, skyblue, teal
• green, olive, forestgreen, lime
• yellow, gold, orange, coral, brown, tan, beige
• purple, violet, lavender, indigo

The match uses the option’s slug, the URL-friendly name you see at Products › Attributes › Configure terms. “Navy” with slug navy works. “Navy Blue” with slug navy-blue doesn’t, because there’s no standard colour of that name. For those, set the colour yourself as below.

Setting your own colours

Most shops use names like “Sage”, “Oat” or “Midnight”. You can set each one to an exact colour. This needs the free C4D Plugin Manager plugin, which provides the settings screen.

1. Go to Products › Attributes and open the screen once. The plugin reads your colour options from here, so do this again after adding new colours.
2. Go to C4D Manager › Variation Swatches › Color Defined.
3. You’ll see a colour picker for each option of your colour attribute. Pick the colour, or paste a hex code such as #9caf88.
4. Click Save Changes.

The colour you set here wins over the standard name, so you can also correct a standard colour. If your “Red” is really a brick red, set it to the shade that matches the product.

If your colour attribute isn’t called “color”

The Color Defined screen lists the options of one attribute. By default that’s the attribute named color. If yours is called something else, such as colour or shade:

1. Go to C4D Manager › Variation Swatches › Color Defined.
2. Enter the attribute’s name in Color Field Name, without the pa_ prefix, and save.
3. Open Products › Attributes once so the list refreshes.
4. Come back to Color Defined. The colour pickers now list that attribute’s options.

Getting colours right

A few habits make colour swatches more useful:

• Take the colour from the product photo, not the supplier’s name. Open a product photo in any image editor and use its colour picker on a well-lit area of the fabric or surface.
• Avoid pure white dots on a white page. Pick a very light grey such as #f2f2f2, or set a border under C4D Manager › Variation Swatches › Single Page › Color/Image Button › Border.
• Use an image swatch for mixed colours. A “black/white stripe” is clearer as a photo than any single colour.
• Keep names readable. The tooltip shows the option name when a customer hovers over a dot, so “Sage” is better than “SG-04”.