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>
3.1 KiB
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 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
- Pick the attribute to configure from the dropdown at the top — for example "Colour".
- 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.
- Set a colour for each term you want swatched. Clear on a row removes its colour.
- 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, or the swatch option on the Pro product filter — both part of Dotjuice Tools for Elementor Pro.
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
#.