Skip to main content

Product Attribute Colours

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

What this does​

Lets you assign a hex colour to each term of any product attribute on your store (Colour, Material, or any custom attribute you've created). This is a configuration page — see the note below about where these colours are actually displayed.

Setting a colour​

  1. Choose the attribute you want to configure from the dropdown at the top (e.g. "Colour").
  2. Every term for that attribute is listed in a table, each with a colour picker and a matching hex code field — you can use either; they stay in sync.
  3. Enter or pick a colour for each term you want to configure. A "Clear" button next to each row removes its colour.
  4. Save.

Sharing one colour across several terms​

If several terms should display as the same swatch colour (for example, "Ash", "Carbon Grey", and "Slate" all rendering as the same grey), just give them the identical hex value. The table shows a "Shared" indicator next to terms that currently share a colour with others, so you can see at a glance which terms are grouped together.

Sorting the list​

Use the Sort by control (Name or Hex Value) to reorder the table while you work — sorting by hex value groups terms with the same colour together visually, useful for checking your "shared colour" groupings are set up the way you intended.

⚠ Where these colours actually appear​

This page only stores the colour assignments — it doesn't display them anywhere on its own. To show them as clickable colour swatches on your product pages, you need the Woo Add to Cart Transform widget's "Show Colour Swatches" option, which is a Dotjuice Elementor Tools Pro feature. In the free version, you can fully configure your colours here ready for when you upgrade, but your product options will display as plain buttons rather than colour swatches until Pro is active.