Sync docs with recent plugin changes; formatting and placeholder cleanup

- Document the new Panel Text Color control on Woo Custom Product Tabs
  (dotjuice-elementor-tools-pro 20260817.1)
- Document Dark Mode Toggle now persisting site-wide (pages without the
  toggle) and applying before first paint (dotjuice-elementor-tools
  c33084e)
- Add blank line before headings following image captions across pro
  widget docs, so they render correctly
- Regenerate placeholder screenshots for pro widget and pagespeed docs
- Remove stray H1 from the free plugin marketing overview (post title
  already serves as H1, matching the other marketing files)
- Bump local dev port to 3080, drop unused site/docs/.gitkeep

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SZsdkGdZYtCS6hZaX92NQ6
This commit is contained in:
2026-08-30 19:01:26 +01:00
parent 15b935b036
commit fa1f9ce757
33 changed files with 12 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

View File

@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires
![The ACF Frontend Form widget controls in the Elementor panel](../assets/img/acf-frontend-form-controls.png)
*Screenshot: the widget selected in the editor with the Form Settings section open, showing the Form Mode, New Post Type, and New Post Status controls.*
## How it works
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:

View File

@@ -4,12 +4,14 @@ Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommer
![The Woo Cart widget layout settings in the Elementor panel](../assets/img/woo-cart-controls.png)
*Screenshot: the widget selected in the editor with the Layout section open, showing Desktop Layout, Totals Column Width, and the Show Coupon toggle.*
## How it works
Place this widget on your Cart page template. It renders your shopper's current cart — items, coupon box, and totals — built independently of WooCommerce's default cart template, so it's fully restyled from the ground up.
![The Woo Cart widget on the front end](../assets/img/woo-cart-frontend.png)
*Screenshot: a live cart page showing the two-column layout with cart items on the left, quantity steppers, and the totals panel on the right.*
## Layout settings
| Setting | Default | What it does |

View File

@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Req
![The Woo Custom Product Tabs widget controls in the Elementor panel](../assets/img/woo-custom-product-tabs-controls.png)
*Screenshot: the widget selected in the editor with the Tabs content section open, showing the Hide Tab Headings toggle and the Custom Tabs repeater.*
## How it works
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.
@@ -67,7 +68,7 @@ Add a URL field to your products, drop that single line into a "Changelog" tab,
**Tab Navigation** — background, spacing, alignment, divider styling, and Normal/Hover/Active states for each tab button (including a separate colour control for the active tab's bottom border, useful for either blending it into the panel or removing the divider line entirely).
**Panel** — background, typography, padding, border, and shadow for the content area beneath the tabs.
**Panel** — background, text colour, typography, padding, border, and shadow for the content area beneath the tabs. The text colour also applies to the panel's own tab heading (e.g. the "Reviews" heading), unless overridden by the more specific Reviews section colours below.
**Reviews** (hidden if you've turned off the Reviews tab) — review count heading, review card styling, avatar (with an option to hide it, size, and rounding), star rating colours, author/date text, review body text, an optional decorative quote mark, and full styling for the review submission form — its star picker, labels, input fields, and submit button.

View File

@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires
![The Woo Product Filter widget controls in the Elementor panel](../assets/img/woo-product-filter-controls.png)
*Screenshot: the widget selected in the editor with the Filters repeater open, showing Filter Title, Filter By, and Display Type options.*
## How it works
This widget renders one or more filter groups (category, tag, brand, or attribute) and, by default, refreshes your product grid via AJAX whenever a shopper makes a selection — no full page reload needed. It's designed to sit on your Shop page or a category archive, alongside your product grid.

View File

@@ -6,12 +6,14 @@ Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requir
![The Woo Quick View Popup widget content settings](../assets/img/woo-quick-view-popup-controls.png)
*Screenshot: the widget selected in the editor with the Content Source dropdown and Quick View Template selector visible.*
## How it works
Place this widget inside an Elementor popup (nothing else needs to go in that popup — this widget fills it entirely). It renders as an iframe showing whichever product a shopper clicked a Quick View button for.
![The Quick View popup content on the front end](../assets/img/woo-quick-view-popup-frontend.png)
*Screenshot: the inside of a Quick View popup showing the product image gallery, title, price, and add-to-cart options rendered by the popup widget.*
## Content settings
| Setting | Default | What it does |

View File

@@ -6,6 +6,7 @@ Requires WooCommerce. **Requires Elementor Pro** for the popup to actually open
![The Woo Quick View widget settings in the Elementor panel](../assets/img/woo-quick-view-controls.png)
*Screenshot: the widget selected in the editor with the Quick View settings open, showing the Enable Quick View toggle and the popup selector.*
## How it works, end to end
1. You build a popup (an Elementor Pro popup content type) containing the **Woo Quick View Popup** widget.

View File

@@ -9,7 +9,7 @@ Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
## How it works
The widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours for the dark-mode values you configure on the widget. The choice is stored in the visitor's browser, so it survives navigation and returns on their next visit.
The widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours for the dark-mode values you configure on the widget. The choice is stored in the visitor's browser, so it survives navigation and returns on their next visit — including on pages and templates that don't have the toggle on them at all, as long as the toggle exists somewhere on the site. Dark mode is applied before the page paints, so there's no flash of light-mode colours first.
It works with **both** of Elementor's global-colour systems:

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 B

After

Width:  |  Height:  |  Size: 6.2 KiB