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
2
.env
@@ -3,7 +3,7 @@
|
||||
CONTAINER_NAME=docusaurus-docs
|
||||
|
||||
# Port Docusaurus serves on inside the container.
|
||||
PORT=3000
|
||||
PORT=3080
|
||||
|
||||
# Production URL of the docs site. Update this once you've picked the
|
||||
# subdomain, then run `docker compose up -d --build` to rebuild with it —
|
||||
|
||||
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires
|
||||
|
||||

|
||||
*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:
|
||||
|
||||
@@ -4,12 +4,14 @@ Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommer
|
||||
|
||||

|
||||
*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.
|
||||
|
||||

|
||||
*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 |
|
||||
|
||||
@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Req
|
||||
|
||||

|
||||
*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.
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@ Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires
|
||||
|
||||

|
||||
*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.
|
||||
|
||||
@@ -6,12 +6,14 @@ Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requir
|
||||
|
||||

|
||||
*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.
|
||||
|
||||

|
||||
*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 |
|
||||
|
||||
@@ -6,6 +6,7 @@ Requires WooCommerce. **Requires Elementor Pro** for the popup to actually open
|
||||
|
||||

|
||||
*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.
|
||||
|
||||
@@ -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:
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 69 B After Width: | Height: | Size: 6.2 KiB |
@@ -1,5 +1,3 @@
|
||||
# Dotjuice Elementor Tools
|
||||
|
||||
Free, practical Elementor widgets built for real WordPress and WooCommerce sites — screenshot capture, dark mode, WooCommerce styling fixes, and small utilities that solve problems the native widgets don't.
|
||||
|
||||
## Why these widgets exist
|
||||
@@ -26,4 +24,4 @@ Every widget in this plugin is designed to sit alongside your existing theme, El
|
||||
|
||||
## Free forever, with a Pro upgrade path
|
||||
|
||||
Every widget listed here is free, permanently. [Dotjuice Elementor Tools Pro](../dotjuice-elementor-tools-pro/overview.md) adds advanced WooCommerce widgets (AJAX product filtering, a full cart widget, quick view, custom product tabs), ACF frontend forms, and watermark-free screenshots for stores and sites that need to go further.
|
||||
Every widget listed here is free, permanently. [Dotjuice Elementor Tools Pro](../dotjuice-elementor-tools-pro/overview.md) adds advanced WooCommerce widgets (AJAX product filtering, a full cart widget, quick view, custom product tabs), ACF frontend forms, and watermark-free screenshots for stores and sites that need to go further.
|
||||
@@ -1 +0,0 @@
|
||||
This folder is overlaid by the bind-mounted ../../docs/ directory at runtime — see docker-compose.yaml.
|
||||