Merge branch 'master' of https://git.koke.estate/jandieman/dotjuice-plugin-docs

docker-compose.yaml

@@ -10,17 +10,19 @@ services:
     restart: always
     environment:
       SITE_URL: ${SITE_URL}
-      NODE_ENV: production
+      NODE_ENV: development
     volumes:
-      # The markdown source content — edit files here, then
-      # `docker compose up -d --build` (or just `restart`) to rebuild and
-      # pick up the changes. Organised as one folder per plugin.
+      # The markdown source content — edit files in here and the running dev
+      # server picks them up automatically: no rebuild, no restart. Organised
+      # as one folder per plugin.
       - ./docs:/app/docs
-    # Rebuilds the static site fresh on every container start (picking up
-    # whatever is currently in ./docs and the current SITE_URL), then serves
-    # the result. A few seconds slower to start than pre-built static files,
-    # but means editing docs never requires touching the image.
-    command: sh -c "npm run build && npm run serve -- --host 0.0.0.0 --port ${PORT}"
+    # Runs the Docusaurus dev server, which watches ./docs and recompiles on
+    # every change, so editing a doc updates the live site with no container
+    # restart or rebuild. `--poll` makes file-change detection reliable across
+    # the bind mount. For a truly live browser refresh (HMR) enable
+    # "Websockets Support" on this host in Nginx Proxy Manager; without it an
+    # already-open tab still updates on the next manual refresh.
+    command: sh -c "npm run start -- --host 0.0.0.0 --port ${PORT} --no-open --poll 1000"
     networks:
       - proxy
     # No host port published — Nginx Proxy Manager reaches this container

docs/dotjuice-elementor-tools-pro/getting-started.md

@@ -32,7 +32,6 @@ If a specific widget is missing:
 - [Woo Cart](widgets/woo-cart.md)
 - [Woo Quick View](widgets/woo-quick-view.md)
 - [Woo Custom Product Tabs](widgets/woo-custom-product-tabs.md)
-- [Woo Add Product Tab](widgets/woo-add-product-tab.md)
 - [ACF Frontend Form](widgets/acf-frontend-form.md)
 
 ## Integrations

docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form.md

@@ -4,29 +4,67 @@ Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires
 
 ## How it works
 
-Place this widget on a template that renders a single post or page — it displays an editable form for **whichever post is currently being viewed**, using ACF's own native form rendering. This widget only works on singular posts/pages (a single product, a single post, a single custom post type entry); it doesn't render anything on archive pages, the homepage, or similar listing pages.
+This widget renders an editable form using ACF's own native form rendering (so tabs, repeaters, and every field type look and behave exactly as they do in the WordPress dashboard). It can work in one of two modes:
+
+- **Update current post** — edits **whichever post is being viewed**. Place it on a single-post/product/page template in the Elementor Theme Builder.
+- **Create new post** — creates a **brand-new post** of a type you choose. Place it on a normal page (e.g. a "Submit a Case Study" page).
+
+You pick the mode explicitly in the widget settings — see below.
 
 ## Content settings
 
 | Setting | What it does |
 |---|---|
+| **Form Mode** | **Update current post** edits the post/page being viewed (use in a single-post template). **Create new post** makes a new post of the type below (use on a normal page). |
+| **New Post Type** | *(Create mode only)* The post type the new entry is created as — any public post type on your site. |
+| **New Post Status** | *(Create mode only)* The status the new post is saved with: Draft, Pending Review, Published, or Private. Draft or Pending is recommended for public submission forms so you can review before it goes live. |
+| **Redirect After Submit** | Optional. Where to send the visitor after a successful submit — leave blank to stay on the page. You can use the tokens `%post_url%` (the created/edited post) and `%post_id%`. |
 | **ACF Field Groups** | Choose which of your site's ACF field groups should be editable in this form. Nothing renders until at least one is selected. |
 | **Enable Title** | Includes the post title as an editable field. |
 | **Enable Content** | Includes the main content editor as an editable field. |
-| **Submit Button Label** | The text on the form's submit button (default "Update"). |
+| **Submit Button Label** | The text on the form's submit button. |
+
+## Which mode should I use?
+
+Note that a normal WordPress **Page** counts as a "single" item, so the widget can't reliably guess your intent — that's why the mode is an explicit choice rather than automatic.
+
+- Building an **edit form** inside a Single Post / Single Product / Single CPT template? → **Update current post**.
+- Building a **submission form** on a standalone page (front-end post creation)? → **Create new post**, and set the post type + a Draft/Pending status.
+
+## Styling
+
+The style tab targets ACF's real markup, and the tabs render live in the Elementor editor so you can see your changes as you make them (see "Live editing" below).
+
+**ACF Tabs** — typography, tab padding, gap between tabs, tab border radius, a border around each tab button (handy for removing the white borders ACF outputs by default), an underline colour/width for the tab bar, and Normal / Hover / Active colour states (text + background) for the tab buttons.
+
+**Fields & Labels**
+- *Labels* — colour and typography.
+- *Field Separator* — colour and width of the top border ACF draws between stacked fields.
+- *Inputs* — border, radius and padding, plus **Normal** and **Active / Focus** states, each with their own text colour and background. The Focus state adds a border colour and an optional glow/outline ring so the active field stands out.
+
+**Submit Button** — typography, padding, radius, border, and Normal / Hover colours.
+
+Several of ACF's default structural borders and fills (the tab-bar border and background, the divider between side-by-side fields, and the box around taxonomy checkbox lists) are removed automatically to give a clean starting point.
+
+## Live editing
+
+The ACF tab bar is normally built by ACF's own JavaScript, which doesn't run inside the Elementor editor. This widget loads ACF's scripts into the editor preview and re-initialises the form when Elementor renders it, so the tabs appear as real tabs and your tab/field styling updates live. On first open there may be a brief flash of a plain list before it becomes tabs — that's normal and only happens in the editor.
 
 ## Setting it up
 
-1. Place the widget on a Single Post, Single Product, or other singular template in your Elementor Theme Builder.
-2. Select the ACF field group(s) you want editable.
-3. Decide whether the post title and/or content should be editable too.
-4. Publish and test by viewing an actual individual post/page that uses this template.
+1. Add the widget to the appropriate template or page.
+2. Set **Form Mode** — Update for an edit form in a single template, or Create for a submission form on a page (then choose the new post type and status).
+3. Select the ACF field group(s) you want in the form.
+4. Decide whether the post title and/or content should be editable too.
+5. Optionally set a redirect for after submit.
+6. Publish and test with a real submission.
 
 ## ⚠ Important: this widget has no built-in access restriction
 
-Anyone who can view the page this widget is placed on can submit changes through the form — there's no automatic login requirement or capability check. If you only want logged-in users, specific roles, or the post's author to be able to edit, you'll need to add that restriction yourself: placing the widget inside a members-only page, using a membership/restriction plugin, or a conditional visibility rule in Elementor Pro. Don't place this widget on a fully public page unless open editing is genuinely what you want.
+Anyone who can view the page this widget is placed on can submit the form — there's no automatic login requirement or capability check. This matters for **both** modes: on an Update form it means anyone could edit the post; on a Create form it means anyone could create posts. If you only want logged-in users, specific roles, or the post's author to use it, add that restriction yourself — a members-only page, a membership/restriction plugin, or an Elementor Pro conditional-visibility rule. Don't place this widget on a fully public page unless open editing/submission is genuinely what you want.
 
 ## Good to know
 
-- This widget only renders a form when viewing an actual singular post or page — on archives, the homepage, or search results, it won't display anything.
-- The uploader for image/file fields uses a simple file picker rather than the full WordPress media library browser.
+- Submissions are processed early (before the page renders), so saving and the after-submit redirect work reliably — including when the widget lives in a Theme Builder template.
+- In **Update** mode the widget only renders on an actual singular post/page; on archives, the homepage, or search results it won't display. **Create** mode works on any page.
+- Remotely fetched images/files use ACF's basic uploader (a simple file picker) rather than the full WordPress media library browser.

docs/dotjuice-elementor-tools-pro/widgets/woo-add-product-tab.md

@@ -1,27 +0,0 @@
-# Woo Add Product Tab
-
-Found in the Elementor panel under **Dotjuice → Woo Add Product Tab**. Requires WooCommerce.
-
-## How it works
-
-Place this widget on your Single Product template — it adds one additional tab to WooCommerce's existing native tabs (Description, Additional Information, Reviews), styled to match them automatically since it uses WooCommerce's own tab system.
-
-## Content settings
-
-| Setting | Default | What it does |
-|---|---|---|
-| **Tab Title** | "Additional Info" | The tab's label. |
-| **Tab Content** | — | Rich-text content shown inside the tab. |
-| **Tab Order** | 50 | Controls where this tab sits relative to WooCommerce's defaults (Description = 10, Additional Information = 20, Reviews = 30). The default of 50 places it after Reviews — lower numbers move it earlier in the tab order. |
-
-## Setting it up
-
-1. Add the widget to your Single Product Elementor Theme Builder template.
-2. Set your tab title and content.
-3. Adjust Tab Order if you want it positioned somewhere other than last.
-
-## Good to know
-
-- **If this widget is placed on a shared Single Product template** (which is the normal way to use Elementor Theme Builder — one template applying to every product), every product using that template shows the **identical** tab title and content. This widget doesn't support per-product dynamic content — if you need different tab content on different products, you'll need [ACF Frontend Form](acf-frontend-form.md) with a custom field, or a separate template per product.
-- Only one tab per widget instance — add a second instance of this widget if you need two extra tabs.
-- You won't see this tab live in the Elementor editor canvas — a placeholder note explains this; preview it by viewing an actual product page on the front end.

docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs.md

@@ -6,7 +6,7 @@ Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Req
 
 Place this widget on your Single Product template — it replaces WooCommerce's entire tabs area with a fully rebuilt, restyled version, including desktop tabs that automatically convert to an accordion on smaller screens.
 
-**Only need to add one extra tab to WooCommerce's existing tabs, without a full rebuild?** See the lighter-weight [Woo Add Product Tab](woo-add-product-tab.md) instead.
+It covers everything from bolting on a single extra tab to a complete rebuild: keep or hide any of the default WooCommerce tabs, add as many custom tabs as you like, and control which products each custom tab appears on by taxonomy.
 
 ## Content settings — Tabs
 
@@ -14,9 +14,31 @@ Place this widget on your Single Product template — it replaces WooCommerce's
 |---|---|---|
 | **Hide Tab Headings** | Off | Hides the heading text at the top of each tab panel (including WooCommerce's own "Reviews" heading). |
 | **Hide Description / Hide Additional Information / Hide Reviews** | Off each | Fully removes that specific default WooCommerce tab — not just visually, it won't render at all. |
-| **Custom Tabs** | Empty | A repeater — add as many extra tabs as you need, each with: **Title**, **Content Type** (Text Editor or Elementor Template), **Content** (rich text, for Text Editor), and **Template ID** (for Elementor Template — see below). |
+| **Custom Tabs** | Empty | A repeater — add as many extra tabs as you need, each with: **Title**, **Content Type** (Text Editor or Elementor Template), **Content** (rich text, for Text Editor), **Template ID** (for Elementor Template — see below), and a **Show On** rule to limit the tab to certain products (see [Showing a tab only on certain products](#showing-a-tab-only-on-certain-products)). |
 | **Accordion Below (px)** | 768 | The screen width below which tabs switch to an accordion layout. 768 suits tablet-portrait and below, 480 suits mobile-only, and 0 disables the accordion entirely (always shows tabs). |
 
+## Showing a tab only on certain products
+
+Each custom tab has a **Show On** setting that controls which products it appears on, based on the product's taxonomy terms — categories, tags, brands, or attribute values. This means one Custom Product Tabs widget on your shared Single Product template can serve every product, while individual tabs appear only where they're relevant.
+
+**Show On** offers three modes:
+
+| Mode | What it does |
+|---|---|
+| **All products** *(default)* | The tab shows on every product — the normal behaviour. |
+| **Only products with selected terms** | The tab shows *only* on products that have at least one of the terms you pick. |
+| **All except products with selected terms** | The tab shows on every product *except* those with one of the terms you pick. |
+
+When you choose either of the restricted modes, a **Terms** field appears listing every term across your product taxonomies, each labelled by its taxonomy (for example "Category: Hoodies" or "Color: Maroon") so same-named terms stay distinguishable. Pick one or more; a product matches when it has **any** of the selected terms.
+
+**Example:** a "Made on Demand" tab that should only appear on your print-on-demand products — set **Show On** to *Only products with selected terms* and choose your print-on-demand category (or several categories at once). Every other product simply won't show that tab.
+
+A couple of things worth knowing:
+
+- This applies to **custom tabs only**. The default WooCommerce tabs (Description, Additional Information, Reviews) are controlled by their Hide toggles, not by taxonomy.
+- The rule is respected in the Elementor editor preview too — so if the product being previewed doesn't match a tab's rule, that tab genuinely disappears from the preview. Set the rule last, or preview with a product that matches.
+- If a tab's Terms list is left empty, the tab shows everywhere (an empty rule does nothing).
+
 ## Adding an Elementor Template as a custom tab
 
 For a custom tab, choosing **Elementor Template** as the Content Type requires entering that template's numeric ID directly (rather than picking it from a list). To find it:
@@ -37,10 +59,11 @@ For a custom tab, choosing **Elementor Template** as the Content Type requires e
 
 1. Add the widget to your Single Product Elementor Theme Builder template.
 2. Decide which default tabs to keep, and add any custom tabs you need.
-3. Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
-4. Style the Tab Navigation and Panel sections to match your design, then move on to the Reviews section if you display product reviews.
+3. For any custom tab that shouldn't appear on every product, set its **Show On** rule and pick the relevant terms.
+4. Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
+5. Style the Tab Navigation and Panel sections to match your design, then move on to the Reviews section if you display product reviews.
 
 ## Good to know
 
-- **If every tab ends up hidden**, nothing renders at all on the live product page — double check at least one tab (default or custom) is visible before publishing.
+- **If every tab ends up hidden** (whether by the Hide toggles or by taxonomy rules) nothing renders at all on that product page — make sure at least one tab is visible for the products you're viewing.
 - Custom tab content using the Elementor Template option needs that template to already be built and published — this widget only embeds it, it doesn't create it.

docs/dotjuice-elementor-tools/getting-started.md

@@ -11,7 +11,6 @@ Open any page in the Elementor editor and look for the **Dotjuice** category in
 If a widget you expect to see is missing:
 
 - **All WooCommerce-related widgets** (anything with "Woo" in the name, plus **Woo Taxonomy List**) only appear once **WooCommerce** is installed and active — even Woo Taxonomy List, which can be used for non-shop content like blog categories, only shows up with WooCommerce present. If you want a general-purpose taxonomy list widget on a site without WooCommerce, install WooCommerce or get in touch with support.
-- The **Image Carousel Transform** widget only has a visible effect on pages that also use Elementor Pro's native Image Carousel widget elsewhere.
 
 ## Where the plugin's settings live
 
@@ -33,10 +32,9 @@ In your WordPress admin menu, under **Dotjuice**:
 - [Dark Mode Toggle](widgets/dark-mode-toggle.md)
 - [Keyword Linker](widgets/keyword-linker.md)
 - [Markdown Widget](widgets/markdown-widget.md)
-- [Image Carousel Transform](widgets/image-carousel-transform.md)
+- [Woo Products Transform](widgets/woo-products-transform.md)
 - [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md)
 - [Woo Categories Transform](widgets/woo-categories-transform.md)
-- [Extended Product Loop](widgets/extended-product-loop.md)
 - [Woo My Account Transform](widgets/woo-my-account-transform.md)
 - [Woo Page Numbers](widgets/woo-page-numbers.md)
 - [Woo Taxonomy List](widgets/woo-taxonomy-list.md)

docs/dotjuice-elementor-tools/widgets/dark-mode-toggle.md

@@ -4,9 +4,16 @@ Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
 
 ## How it works
 
-This widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps Elementor's four Global Color variables (Primary, Secondary, Text, Accent) to the dark-mode values you configure on the widget. It remembers the visitor's choice, so it stays applied on their next visit.
+This widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours to the dark-mode values you configure on the widget. It remembers the visitor's choice, so it stays applied on their next visit.
 
-**Important:** this widget only changes colors for elements styled using Elementor's Global Colors. If part of your design uses a hardcoded color instead of a Global Color, that part won't respond to dark mode.
+It works with **both** of Elementor's global-colour systems:
+
+- **Legacy 3.x global colours** — the four classic Global Colors (Primary, Secondary, Text, Accent) used by traditional Elementor widgets.
+- **Elementor 4.x global variables** — the named colour variables (e.g. `red`, `sea-green`) introduced with the newer atomic/v4 widgets, defined under **Site Settings → Global Variables**.
+
+Because modern pages often mix older widgets (which read the legacy colours) with newer atomic widgets (which read 4.x variables), the widget can override both at once from a single toggle.
+
+**Important:** this widget only changes colours for elements styled using a global colour or global variable. Anything using a hardcoded colour won't respond to dark mode — the more consistently your design uses global colours/variables, the more complete the effect.
 
 ## Content settings
 
@@ -19,16 +26,30 @@ This widget renders a small clickable icon. Clicking it adds a dark-mode class t
 
 ## Dark Mode Colors (Style tab)
 
-Four color fields — **Primary**, **Secondary**, **Text**, and **Accent** — define what your site looks like once dark mode is switched on. Set each to the dark equivalent of the matching Elementor Global Color. If you leave any of these blank, a sensible built-in dark default is used instead.
+At the top, **Global Colour System** decides which colour systems dark mode overrides:
+
+| Choice | What it does |
+|---|---|
+| **Both** *(default)* | Applies the legacy four colours **and** your chosen 4.x variable overrides together — best for pages that mix old and new widgets. |
+| **Legacy only** | Overrides just the four classic Global Colors. |
+| **Variables only** | Overrides just the 4.x global variables, leaving the legacy four untouched. |
+
+**Legacy 3.x global colors** — four colour fields (**Primary**, **Secondary**, **Text**, **Accent**) define the dark equivalent of each classic Global Color. Leave any blank to use a sensible built-in dark default.
+
+**Elementor 4.x global variables** — add a row for each variable you want to change in dark mode: pick the variable from the list of your site's global variables, then set its dark-mode colour. The dark value can be a plain colour, or a reference to one of your palette colours. Add as many rows as you need.
+
+> New variables you create *after* opening the editor won't appear in the list until you reload the editor, because Elementor builds the widget's options once when the editor loads.
 
 ## Setting it up
 
 1. Add the widget somewhere visible and consistent — a header or footer works well, so it's reachable from every page.
-2. Under the Style tab, set your four Dark Mode Colors to a palette that works well as a dark theme.
-3. Save and test: click the toggle on the live site and check that the elements using your Global Colors switch correctly.
+2. Under the Style tab, choose your **Global Colour System** (leave on **Both** if your site mixes widget types).
+3. Set your Legacy dark colours and/or add variable rows for a palette that works well as a dark theme.
+4. Save and test: click the toggle on the live site and confirm the elements using your global colours/variables switch correctly.
 
 ## Good to know
 
-- **Whichever toggle instance was clicked most recently determines the colors used site-wide.** If you place more than one Dark Mode Toggle widget with different color settings, the last one clicked "wins" for the whole site until another is clicked. For a single consistent dark mode, use the same color settings on every instance, or better, only place the widget in one shared location like your header.
+- **Whichever toggle instance was clicked most recently determines the colours used site-wide.** If you place more than one Dark Mode Toggle with different settings, the last one clicked "wins" for the whole site until another is clicked. For a single consistent dark mode, use the same settings on every instance, or place the widget in one shared location like your header.
+- If you change the widget's colour settings after already switching dark mode on, toggle it off and back on once (or clear the browser's site data) so it re-reads the new values — the last-used colours are cached in the browser for speed.
 - You can deep-link directly into dark mode by adding `?dark=0` to any URL (or `?dark=1`, `?dark=2`, etc. if there's more than one toggle instance on that specific page) — useful for sharing a dark-mode preview link.
 - The dark mode choice is remembered per browser (not per WordPress account), so it persists across visits on the same device but doesn't follow a visitor between devices.

docs/dotjuice-elementor-tools/widgets/extended-product-loop.md

@@ -1,31 +0,0 @@
-# Extended Product Loop
-
-Found in the Elementor panel under **Dotjuice → Extended Product Loop**. Requires WooCommerce.
-
-## How it works
-
-This widget renders its own product grid — separate from Elementor's or WooCommerce's native product loop widgets. It shows all your regular published products, plus an extra tile for every individual product variation that has a value set for the attribute you choose. Each tile shows that variation's own image, name, and price, linking through to the parent product page.
-
-## Content settings
-
-| Setting | Default | What it does |
-|---|---|---|
-| **Attribute Name** | `pa_color` | The attribute taxonomy to pull variations from, using its technical slug (WooCommerce attributes are typically prefixed `pa_`, e.g. `pa_color`, `pa_size`). |
-
-There's no Style tab on this widget — the grid uses WooCommerce's standard product-grid CSS classes, so it inherits your theme's existing product grid styling.
-
-## What to expect in the grid
-
-If a product has three variations matching your chosen attribute (say, three colours), it can appear as **up to four tiles**: the parent product once, plus one tile per matching variation. This is intentional — it's what makes a "shop by colour" browsing experience possible — but it's worth knowing in advance so it doesn't look like a duplication bug when you first set it up.
-
-**This widget's tiles show image, name, and price only** — no Add to Cart button, sale badges, or star ratings, since the grid is built independently of WooCommerce's standard loop template. Link the tile through to the product page for the full buying experience.
-
-## Setting it up
-
-1. Decide which attribute you want to browse by (commonly colour or size) and find its technical slug — check **Products → Attributes** in your WordPress admin, or look at the attribute's edit URL.
-2. Enter that slug into **Attribute Name**.
-3. Place the widget on a page and confirm the variation tiles appear as expected.
-
-## Good to know
-
-- If the attribute slug you enter doesn't exist on your store, the widget quietly falls back to showing only your regular product list — no error is shown, so double-check your spelling if variation tiles aren't appearing.

docs/dotjuice-elementor-tools/widgets/woo-products-transform.md

@@ -0,0 +1,90 @@
+# Woo Products Transform
+
+Found in the Elementor panel under **Dotjuice → Woo Products Transform**. Requires WooCommerce and Elementor Pro's Products widget.
+
+## How it works
+
+Drop this widget onto the same page or template as an Elementor Pro **Products** widget — your Shop archive, a product-category template, or any page showing a product loop. It restructures each product in that loop into styleable wrapper sections (an image wrapper and a content wrapper) and applies the effects you configure to **every product in the loop**: image hover effects, colour swatches, title/price tweaks, an optional image rollover, and overflow control.
+
+It doesn't render a product grid of its own — it *transforms* the grid rendered by Elementor Pro's Products widget. So you always use the two together: the Products widget for the grid, this widget for the styling and behaviour.
+
+There's no Content tab — every setting lives under **Style**, grouped into the four sections below. Most settings preview live in the Elementor editor; hover-based effects (transforms, rollover, swatch image swaps) are best confirmed on the live front end.
+
+## Image transform
+
+Controls the product image and its hover behaviour.
+
+| Setting | What it does |
+|---|---|
+| **Disable Default Add to Cart** | Removes WooCommerce's default loop "Add to cart" button (useful if you add your own, or want a cleaner grid). |
+| **Overflow** | `overflow` for the image wrapper — set to **Hidden** to clip a scaled/zoomed image to its frame. |
+| **Border** (Style / Colour / Width / Radius) | A border around the product image, with rounded-corner control. |
+
+Below those, **Normal** and **Hover** tabs each expose the same image effects, so you can animate between a resting state and a hover state:
+
+- **Transform** — a popover with **Rotate**, **Scale**, and **Offset X/Y**. Set a subtle scale/offset on Hover for a zoom-on-hover effect.
+- **Opacity** — fade the image (e.g. dim on hover, or fade in).
+- **CSS Filters** — blur, brightness, contrast, saturation, hue.
+- **Box Shadow** — a shadow on the image.
+
+At the very top of this section is the **Enable Image Rollover** toggle (Pro) — see [Image Rollover](#image-rollover-pro) below. When rollover is on, the transform/opacity/filter/shadow controls above are hidden and disabled, because rollover and those hover effects are mutually exclusive.
+
+## Image Rollover (Pro)
+
+Instead of transforming the product image on hover, show a **second image** — ideal for the same garment on a different model, or a front/back view.
+
+Turn on **Enable Image Rollover** (top of the Image transform section) to switch the widget into rollover mode. The featured image crossfades out as the second image crossfades in.
+
+**Where the second image comes from**, per product, in priority order:
+
+1. A dedicated **Rollover Image** — set it on the product edit screen (Product → **Rollover Image (Hover)** box in the sidebar).
+2. Otherwise the product's **first gallery image**, used automatically as a fallback.
+
+You can tick **Disable rollover for this product** on any product to opt it out entirely.
+
+**Rollover controls** (shown once rollover is on):
+
+| Setting | What it does |
+|---|---|
+| **Effect** | How the second image enters: Fade, Zoom In/Out, or Slide Up/Down/Left/Right. |
+| **Duration (ms)** | How long the crossfade/slide takes. |
+| **Easing** | The transition curve — Ease, Linear, the Ins/Outs, plus Smooth and Back / Overshoot. |
+| **Disable Gallery Fallback** | Only roll over products that have an explicit Rollover Image. Products relying on the gallery fallback keep their featured image untouched. |
+
+Second images use native lazy loading, and on touch devices (no hover) products simply show their featured image.
+
+## Variation swatches (Pro)
+
+For **variable** products, show clickable colour swatches under each product in the loop. Clicking a swatch swaps the product image to that variation's image — shoppers preview colours without opening the product. These controls only appear when Dotjuice Elementor Tools **Pro** is active.
+
+- **Show colour swatches** — the master toggle (off by default).
+- **Swatch taxonomy** — which product attribute drives the swatches (e.g. `Colour` / `pa_color`). Swatch colours come from the attribute term's colour (see the WooCommerce Hacks attribute colour manager).
+- **Swatch Gap** and **Alignment** — spacing and horizontal alignment of the swatch row.
+- **Normal / Hover / Active** tabs — **Swatch Size**, **Border**, and **Border Radius** for each state (Active = the currently selected swatch).
+
+## Content transform
+
+Styles the block holding the product title and price, and offers a few content tweaks.
+
+- **Change title tag** — output the product title as **H2–H6** instead of the default (a second dropdown, **Title heading tag**, appears when this is on).
+- **Hide Star Ratings** / **Hide Prices** — remove those elements from the loop.
+- **Content wrapper styling** — **Background Colour**, **Blur** (a backdrop-blur behind the content, e.g. for an overlay over the image), **Padding**, **Border** (Style / Colour / Width / Radius), and **Box Shadow**.
+
+## Box Transform
+
+- **Show Overlay** — the `overflow` of each product tile (`li.product`). Set to **Hidden** to clip child content (like a scaled image or an absolutely-positioned content overlay) to the tile.
+
+## Setting it up
+
+1. Add the widget to the same template/page as your Elementor Pro Products widget.
+2. Decide between hover **image transforms** and **Image Rollover** (Pro) — you can only use one at a time.
+3. If using transforms, set a resting state on the **Normal** tab and the effect on **Hover**.
+4. If using rollover, set a **Rollover Image** on the products that need one (or rely on the gallery fallback), then pick an Effect, Duration and Easing.
+5. For variable products, enable **Show colour swatches** and pick the driving attribute.
+6. Use **Content transform** for the title tag and to hide price/rating, and **Box Transform** to clip overflow.
+
+## Good to know
+
+- Rollover, swatches and the transform effects all keep working on products loaded by the Dotjuice AJAX product filter.
+- The **Image Rollover** and **Variation swatches** controls only appear when Dotjuice Elementor Tools **Pro** is active — deactivating Pro removes those features (and shows a short "available in Pro" note); the rest of the widget keeps working.
+- Because the widget restyles Elementor Pro's Products loop, it only has a visible effect on pages that actually render that loop.

marketing/dotjuice-elementor-tools-pro/documentation/marketing/overview.md

@@ -12,9 +12,8 @@ The free Dotjuice Elementor Tools plugin covers the everyday styling gaps in Woo
 
 **Woo Quick View** — lets shoppers preview a product in a popup without leaving your shop grid, triggered by a button that appears automatically across your product loops, complete with hover-preloading so the popup feels instant.
 
-**Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component, with the ability to add unlimited custom tabs and deep styling control down into your reviews and rating form.
+**Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component: add unlimited custom tabs, show or hide any custom tab per product by category, tag, brand or attribute, and style deep into your reviews and rating form.
 
-**Woo Add Product Tab** — the lightweight option when you just need to bolt one extra tab onto the existing WooCommerce tabs, no rebuild required.
 
 **ACF Frontend Form** — let visitors edit Advanced Custom Fields content directly from the front end, using ACF's own native form interface, no admin access required.
 

marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-add-product-tab.md

@@ -1,17 +0,0 @@
-# Woo Add Product Tab
-
-Add one extra tab to your product page's existing tabs — no template rebuild required.
-
-## The problem it solves
-
-Sometimes you just need one more tab next to WooCommerce's Description, Additional Information, and Reviews — a sizing guide, a shipping note, a care instructions panel — without rebuilding the entire tabs section.
-
-## How it helps
-
-Woo Add Product Tab appends a single, fully-editable tab to WooCommerce's native tabs, with a title, rich-text content, and control over where it sits in the tab order — all visually, in a few clicks.
-
-## The result
-
-One extra tab exactly where you want it, without touching the rest of your product tabs setup.
-
-*Need to rebuild and restyle the whole tabs area, with multiple custom tabs and accordion support on mobile? See [Woo Custom Product Tabs](woo-custom-product-tabs.md).*

marketing/dotjuice-elementor-tools/documentation/marketing/overview.md

@@ -16,9 +16,7 @@ Elementor's own widget library, and even Elementor Pro's, leaves gaps — especi
 
 **Markdown Widget** — embed a live Markdown file (a README, changelog, or documentation page) directly into a page.
 
-**Image Carousel Transform** — add hover effects, filters, and a cleaner lightbox trigger to Elementor Pro's native Image Carousel.
-
-**WooCommerce widgets** — a set of five widgets addressing the most common WooCommerce styling and layout gaps: clickable variation buttons instead of dropdowns, styled category tiles, an attribute-driven extended product grid, consistent My Account styling, and styleable pagination.
+**WooCommerce widgets** — a set of four widgets addressing the most common WooCommerce styling and layout gaps: clickable variation buttons instead of dropdowns, styled category tiles, consistent My Account styling, and styleable pagination.
 
 **WooCommerce Hacks** — an admin toolkit for the everyday WooCommerce account-page tweaks every store eventually needs (hiding tabs, redirect rules, category exclusions) plus a proper attribute colour-swatch manager.
 

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md

@@ -1,6 +1,6 @@
 # Dark Mode Toggle
 
-A one-click, site-wide dark mode switch — using the color palette you've already built in Elementor.
+A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
 
 ## The problem it solves
 
@@ -8,10 +8,17 @@ Dark mode is one of the most-requested features on modern websites, but building
 
 ## How it helps
 
-Dark Mode Toggle works directly with Elementor's own Global Colors — the primary, secondary, text, and accent colors you've already set up as part of your site's design. Add the toggle anywhere on your site, choose a dark palette for each of those four global colors, and clicking it switches your entire site into dark mode instantly, remembered for that visitor on their next visit too.
+Dark Mode Toggle works directly with Elementor's own global colours — no separate stylesheet, no custom code. Add the toggle anywhere on your site, choose a dark palette, and one click flips your entire site into dark mode instantly, remembered for that visitor on their next visit too.
+
+Crucially, it speaks **both** of Elementor's colour systems:
+
+- The **classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use.
+- The **newer Elementor 4.x global variables** used by the latest atomic widgets.
+
+Real sites are increasingly a mix of the two, so the toggle can remap both at once — meaning your dark mode stays complete as you build with newer Elementor widgets, not just the old ones.
 
 ## The result
 
-A genuine site-wide dark mode, built entirely from colors you already control through Elementor — no separate stylesheet to maintain.
+A genuine site-wide dark mode, built entirely from colours you already control through Elementor — future-proofed for the newer widget system, with nothing extra to maintain.
 
-*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's Global Colors throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
+*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's global colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/extended-product-loop.md

@@ -1,15 +0,0 @@
-# Extended Product Loop
-
-Show every colour, size, or style variant of a product as its own tile — a "shop by option" grid, not just a shop by product.
-
-## The problem it solves
-
-A standard product grid shows one tile per product, no matter how many colours or variants it comes in — a shopper browsing "red items" has to click into a t-shirt product just to discover it comes in red at all.
-
-## How it helps
-
-Extended Product Loop builds a grid that includes each individual product variant matching a chosen attribute as its own tile, alongside your regular products — so a t-shirt with three colour options can show as three separate, individually-imaged tiles in a "shop by colour" style layout.
-
-## The result
-
-A browsing experience built around the attribute your customers actually shop by, not just the parent product list.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/image-carousel-transform.md

@@ -1,17 +0,0 @@
-# Image Carousel Transform
-
-Give Elementor Pro's native Image Carousel the hover effects and polish it doesn't have out of the box.
-
-## The problem it solves
-
-Elementor Pro's Image Carousel widget is functional but visually plain — no built-in hover transforms, no filter effects, and a lightbox trigger that takes over the whole slide rather than offering a dedicated zoom button.
-
-## How it helps
-
-Image Carousel Transform adds a layer of styling on top of the native carousel: hover and normal-state transforms (scale, offset), box-shadow and CSS filter effects, a forced consistent slide height, and the option to move the lightbox trigger into its own small zoom button rather than making the entire slide clickable.
-
-## The result
-
-A carousel that looks like it came from a premium page-builder theme, styled entirely through Elementor controls — no custom CSS required.
-
-*Note: this widget styles Elementor Pro's Image Carousel widget elsewhere on the page — it doesn't render a carousel of its own.*