jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs pass: add widget screenshots and expand the user guides

Browse Source 
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>
This commit is contained in:
Johan
2026-07-31 06:13:57 +00:00
parent 1d9b26b108
commit f4838865c9
43 changed files with 672 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/dotjuice-elementor-tools/product-attribute-colours.md
View File

@@ -2,25 +2,46 @@
**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
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.
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. 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.
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
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.
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
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.
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
## 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](../dotjuice-elementor-tools-pro/getting-started.md) 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.
:::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 `#`.