f4838865c9
Add 21 screenshots across the Elementor Tools docs and rework the pages around them: clearer opening lines, settings tables that state defaults, and callouts for the parts people trip over. Also refreshes the Pro getting-started, Custom Product Tabs and Product Filter pages, plus the matching marketing copy. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
48 lines
3.1 KiB
Markdown
Executable File
48 lines
3.1 KiB
Markdown
Executable File
# 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.
|
|
|
|
|
|
*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 `#`.
|