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

Add image placeholder screenshots to pro widget docs and pagespeed docs

Browse Source
This commit is contained in:
Johan Koke
2026-08-03 11:48:02 +00:00
parent e51c8ea1f2
commit 9f2720125b
17 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,10 +2,14 @@
Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires Advanced Custom Fields (ACF). Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires Advanced Custom Fields (ACF).
![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 ## 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: 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:
![An ACF frontend form rendered on a live page](../assets/img/acf-frontend-form-frontend.png)
*Screenshot: a front-end ACF form on a published page, showing field groups rendered with tabs and a Submit button.*
- **Update current post** — edits **whichever post is being viewed**. Place it on a single-post/product/page template in the Elementor Theme Builder. - **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). - **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).

4
docs/dotjuice-elementor-tools-pro/widgets/woo-cart.md
View File

@@ -2,10 +2,14 @@
Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommerce (does not require Elementor Pro). Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommerce (does not require Elementor Pro).
![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 ## 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. 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 ## Layout settings
| Setting | Default | What it does | | Setting | Default | What it does |

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

@@ -2,10 +2,14 @@
Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Requires WooCommerce. Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Requires WooCommerce.
![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 ## 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. 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.
![Custom product tabs on a live product page](../assets/img/woo-custom-product-tabs-frontend.png)
*Screenshot: a product page showing styled tabs with a custom content tab active alongside the default Description and Reviews tabs.*
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. 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 ## Content settings — Tabs

4
docs/dotjuice-elementor-tools-pro/widgets/woo-product-filter.md
View File

@@ -2,10 +2,14 @@
Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires WooCommerce. Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires WooCommerce.
![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 ## 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. 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.
![The Woo Product Filter widget on the front end](../assets/img/woo-product-filter-frontend.png)
*Screenshot: a shop page with active filter groups showing checkboxes and buttons, with the product grid filtered to show matching results.*
As shoppers filter, the *available options in the other filters* update to reflect what's actually in stock for the current selection (see [How the options narrow](#how-the-options-narrow) below). Options that can't produce any results are hidden, so the filters never offer a dead end. As shoppers filter, the *available options in the other filters* update to reflect what's actually in stock for the current selection (see [How the options narrow](#how-the-options-narrow) below). Options that can't produce any results are hidden, so the filters never offer a dead end.
## Building your filter groups ## Building your filter groups

4
docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view-popup.md
View File

@@ -4,10 +4,14 @@ This widget renders the **content shown inside** a Quick View popup. It only wor
Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requires WooCommerce. Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requires WooCommerce.
![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 ## 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. 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 ## Content settings
| Setting | Default | What it does | | Setting | Default | What it does |

5
docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view.md
View File

@@ -4,12 +4,17 @@ Two widgets work together to build Quick View: **Woo Quick View** (this one —
Requires WooCommerce. **Requires Elementor Pro** for the popup to actually open — without Elementor Pro, the quick-view button gracefully falls back to a normal link straight to the product page instead, so nothing is ever broken, it simply won't show a popup. Requires WooCommerce. **Requires Elementor Pro** for the popup to actually open — without Elementor Pro, the quick-view button gracefully falls back to a normal link straight to the product page instead, so nothing is ever broken, it simply won't show a popup.
![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 ## How it works, end to end
1. You build a popup (an Elementor Pro popup content type) containing the **Woo Quick View Popup** widget. 1. You build a popup (an Elementor Pro popup content type) containing the **Woo Quick View Popup** widget.
2. You place the **Woo Quick View** widget anywhere you like, and point it at that popup. 2. You place the **Woo Quick View** widget anywhere you like, and point it at that popup.
3. The Quick View widget then automatically injects a quick-view button onto every product in your product loops (grids, carousels) sitewide — you don't need to manually add a button to each product card. 3. The Quick View widget then automatically injects a quick-view button onto every product in your product loops (grids, carousels) sitewide — you don't need to manually add a button to each product card.
![A Quick View popup open on a product](../assets/img/woo-quick-view-frontend.png)
*Screenshot: a shop grid with a Quick View popup open, showing the product image, price, variations, and add-to-cart button inside the overlay.*
## Setting it up ## Setting it up
1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library). 1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).

3
docs/dotjuice-pagespeed/advanced.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → Advanced** **Dotjuice → Page speed → Advanced**
![The Advanced settings tab](../assets/img/pagespeed-advanced.png)
*Screenshot: the Advanced tab showing the Heartbeat API, XML-RPC, and WooCommerce script controls.*
## What this tab controls ## What this tab controls
WordPress's Heartbeat API, XML-RPC, and WooCommerce script loading on non-shop pages. WordPress's Heartbeat API, XML-RPC, and WooCommerce script loading on non-shop pages.

3
docs/dotjuice-pagespeed/caching.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → Caching** **Dotjuice → Page speed → Caching**
![The Caching settings tab](../assets/img/pagespeed-caching.png)
*Screenshot: the Caching tab showing the Enable Page Caching, Separate Cache for Mobile Devices, and Cache Expiry settings.*
## What this tab controls ## What this tab controls
Full-page HTML caching: whether pages are cached at all, whether mobile and desktop get separate cached copies, whether logged-in visitors are included, and how long a cached page stays valid before it's rebuilt. Full-page HTML caching: whether pages are cached at all, whether mobile and desktop get separate cached copies, whether logged-in visitors are included, and how long a cached page stays valid before it's rebuilt.

3
docs/dotjuice-pagespeed/cdn.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → CDN** **Dotjuice → Page speed → CDN**
![The CDN settings tab](../assets/img/pagespeed-cdn.png)
*Screenshot: the CDN tab showing the CDN URL input and the Enable CDN Rewrite toggle.*
## What this tab controls ## What this tab controls
Rewriting your site's stylesheet and script URLs to point at a CDN hostname instead of your own server. Rewriting your site's stylesheet and script URLs to point at a CDN hostname instead of your own server.

3
docs/dotjuice-pagespeed/css-optimisation.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → CSS** **Dotjuice → Page speed → CSS**
![The CSS optimisation settings tab](../assets/img/pagespeed-css.png)
*Screenshot: the CSS tab showing the Minify CSS, Combine CSS Files, and Load Combined CSS Asynchronously toggles.*
## What this tab controls ## What this tab controls
Minification and combining of your site's local stylesheets, optional asynchronous loading of the combined file, and manual exclusions for stylesheets that shouldn't be touched. Minification and combining of your site's local stylesheets, optional asynchronous loading of the combined file, and manual exclusions for stylesheets that shouldn't be touched.

3
docs/dotjuice-pagespeed/database.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → Database** **Dotjuice → Page speed → Database**
![The Database optimisation settings tab](../assets/img/pagespeed-database.png)
*Screenshot: the Database tab showing the manual cleanup options and the scheduled cleanup settings.*
## What this tab controls ## What this tab controls
One-click and scheduled cleanup of database bloat: old post revisions, abandoned drafts, spam comments, expired cache entries, orphaned metadata, and full table optimisation. One-click and scheduled cleanup of database bloat: old post revisions, abandoned drafts, spam comments, expired cache entries, orphaned metadata, and full table optimisation.

5
docs/dotjuice-pagespeed/getting-started.md
View File

@@ -2,7 +2,10 @@
## Where to find the settings ## Where to find the settings
After activating the plugin, go to **Dotjuice → Page speed** in your WordPress admin menu. Settings are organised into nine tabs: Caching, CSS, JavaScript, HTML, Images, Preload, CDN, Database, and Advanced. **Dotjuice → Page speed** in your WordPress admin menu.
![The Dotjuice Page Speed admin dashboard](../assets/img/pagespeed-dashboard.png)
*Screenshot: the main Page Speed admin page showing the tabbed settings interface with the Caching tab active and the Save Settings button in the toolbar.*
Every toggle saves through a single **Save Settings** button in the top toolbar — changes aren't applied until you click it. A **Clear Cache** button sits next to it for whenever you want to force a fresh rebuild of every cached page. Every toggle saves through a single **Save Settings** button in the top toolbar — changes aren't applied until you click it. A **Clear Cache** button sits next to it for whenever you want to force a fresh rebuild of every cached page.

3
docs/dotjuice-pagespeed/html-optimisation.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → HTML** **Dotjuice → Page speed → HTML**
![The HTML optimisation settings tab](../assets/img/pagespeed-html.png)
*Screenshot: the HTML tab showing the Minify HTML Output, Remove Version Query Strings, and Disable Emoji Scripts toggles.*
## What this tab controls ## What this tab controls
HTML minification, removal of unnecessary version query strings and default WordPress scripts, Google Fonts display behaviour, and DNS prefetch hints. HTML minification, removal of unnecessary version query strings and default WordPress scripts, Google Fonts display behaviour, and DNS prefetch hints.

3
docs/dotjuice-pagespeed/images.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → Images** **Dotjuice → Page speed → Images**
![The Images settings tab](../assets/img/pagespeed-images.png)
*Screenshot: the Images tab showing the Lazy Load Images, Lazy Load Iframes, and Add Missing Width/Height toggles.*
## What this tab controls ## What this tab controls
Lazy loading of images and iframes, and automatic width/height attributes to prevent layout shift. Lazy loading of images and iframes, and automatic width/height attributes to prevent layout shift.

3
docs/dotjuice-pagespeed/javascript-optimisation.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → JavaScript** **Dotjuice → Page speed → JavaScript**
![The JavaScript optimisation settings tab](../assets/img/pagespeed-javascript.png)
*Screenshot: the JavaScript tab showing the Minify JavaScript, Combine JavaScript Files, Defer Loading, and Delay JavaScript Until Interaction toggles.*
## What this tab controls ## What this tab controls
Minification and combining of local scripts, deferred loading, delayed loading until user interaction, and manual exclusions. Minification and combining of local scripts, deferred loading, delayed loading until user interaction, and manual exclusions.

3
docs/dotjuice-pagespeed/preload.md
View File

@@ -2,6 +2,9 @@
**Dotjuice → Page speed → Preload** **Dotjuice → Page speed → Preload**
![The Preload settings tab](../assets/img/pagespeed-preload.png)
*Screenshot: the Preload tab showing the Priority Image, Cache Preload After Publishing, and Font Preloading settings.*
## What this tab controls ## What this tab controls
Priority loading for your most important image, automatic cache warming after publishing, font preloading, and DNS/connection hints for third-party services. Priority loading for your most important image, automatic cache warming after publishing, font preloading, and DNS/connection hints for third-party services.

3
docs/dotjuice-pagespeed/troubleshooting.md
View File

@@ -1,5 +1,8 @@
# Troubleshooting # Troubleshooting
![The troubleshooting guide and tools](../assets/img/pagespeed-troubleshooting.png)
*Screenshot: the troubleshooting page showing the system status, cache log, and common fixes.*
## A page looks broken after enabling a setting ## A page looks broken after enabling a setting
1. Click **Clear Cache** and reload the page — a stale cached copy from before your change is the most common cause. 1. Click **Clear Cache** and reload the page — a stale cached copy from before your change is the most common cause.