# Product Attribute Colours

**Dotjuice → WooCommerce Hacks → Attribute Colours** (only visible with WooCommerce active)

Assign a hex colour to each term of any product attribute, so colour-based options can render as swatches rather than text.

![The Attribute Colours table with colour pickers per term](./assets/img/product-attribute-colours.png)
*Screenshot: the Attribute Colours tab with an attribute selected, showing the term table — each row with its colour picker, hex field, Shared indicator and Clear button.*

## What this does

This is a **configuration page only**. It stores a colour against each attribute term (Colour, Material, or any custom attribute you've created). It doesn't display anything on the front end by itself — see [Where these colours appear](#where-these-colours-actually-appear) below.

Storing them centrally means every widget that draws a swatch reads from one list, so a colour change here updates everywhere at once.

## Setting a colour

1. Pick the attribute to configure from the dropdown at the top — for example "Colour".
2. Every term for that attribute is listed, each with a colour picker and a hex field. The two stay in sync, so use whichever you prefer.
3. Set a colour for each term you want swatched. **Clear** on a row removes its colour.
4. Save.

Terms left without a colour simply render as normal text buttons wherever swatches are shown.

## Sharing one colour across several terms

When several terms should display as the same swatch — "Ash", "Carbon Grey" and "Slate" all showing as one grey — give them an identical hex value.

The table shows a **Shared** indicator beside any term whose colour matches another, so you can see the groupings at a glance. Widgets that render swatches merge terms sharing a colour into a single clickable swatch, which is usually what you want: shoppers see one grey, not three near-identical ones.

## Sorting the list

The **Sort by** control (Name or Hex Value) reorders the table while you work. Sorting by hex groups identical colours together, which makes it easy to verify your shared-colour groupings are what you intended before saving.

## Where these colours actually appear

:::caution Swatch display is a Pro feature
This page stores the assignments; it doesn't render them. To show them as clickable swatches you need the **Show Colour Swatches** option on [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md), or the swatch option on the Pro product filter — both part of [Dotjuice Tools for Elementor Pro](../dotjuice-elementor-tools-pro/getting-started.md).

In the free version you can configure everything here ready for an upgrade, but product options display as plain text buttons until Pro is active.
:::

## Good to know

- **Colours are stored per term, not per product.** Set "Navy" once and every product using that term gets the same swatch.
- **Adding a new attribute term later leaves it uncoloured.** Come back to this page and set its colour, or it renders as a text button while its neighbours show swatches.
- The hex field accepts values with or without the leading `#`.