Add image placeholder screenshots to pro widget docs and pagespeed docs
This commit is contained in:
@@ -2,10 +2,14 @@
|
||||
|
||||
Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires Advanced Custom Fields (ACF).
|
||||
|
||||
|
||||
*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:
|
||||
|
||||
|
||||
*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.
|
||||
- **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).
|
||||
|
||||
|
||||
@@ -2,10 +2,14 @@
|
||||
|
||||
Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommerce (does not require Elementor Pro).
|
||||
|
||||
|
||||
*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 |
|
||||
|
||||
@@ -2,10 +2,14 @@
|
||||
|
||||
Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Requires WooCommerce.
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
## Content settings — Tabs
|
||||
|
||||
@@ -2,10 +2,14 @@
|
||||
|
||||
Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires WooCommerce.
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
## Building your filter groups
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
*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 |
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
*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.
|
||||
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.
|
||||
|
||||
|
||||
*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
|
||||
|
||||
1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → Advanced**
|
||||
|
||||
|
||||
*Screenshot: the Advanced tab showing the Heartbeat API, XML-RPC, and WooCommerce script controls.*
|
||||
|
||||
## What this tab controls
|
||||
|
||||
WordPress's Heartbeat API, XML-RPC, and WooCommerce script loading on non-shop pages.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → Caching**
|
||||
|
||||
|
||||
*Screenshot: the Caching tab showing the Enable Page Caching, Separate Cache for Mobile Devices, and Cache Expiry settings.*
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → CDN**
|
||||
|
||||
|
||||
*Screenshot: the CDN tab showing the CDN URL input and the Enable CDN Rewrite toggle.*
|
||||
|
||||
## What this tab controls
|
||||
|
||||
Rewriting your site's stylesheet and script URLs to point at a CDN hostname instead of your own server.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → CSS**
|
||||
|
||||
|
||||
*Screenshot: the CSS tab showing the Minify CSS, Combine CSS Files, and Load Combined CSS Asynchronously toggles.*
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → Database**
|
||||
|
||||
|
||||
*Screenshot: the Database tab showing the manual cleanup options and the scheduled cleanup settings.*
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -2,7 +2,10 @@
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
*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.
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → HTML**
|
||||
|
||||
|
||||
*Screenshot: the HTML tab showing the Minify HTML Output, Remove Version Query Strings, and Disable Emoji Scripts toggles.*
|
||||
|
||||
## What this tab controls
|
||||
|
||||
HTML minification, removal of unnecessary version query strings and default WordPress scripts, Google Fonts display behaviour, and DNS prefetch hints.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → Images**
|
||||
|
||||
|
||||
*Screenshot: the Images tab showing the Lazy Load Images, Lazy Load Iframes, and Add Missing Width/Height toggles.*
|
||||
|
||||
## What this tab controls
|
||||
|
||||
Lazy loading of images and iframes, and automatic width/height attributes to prevent layout shift.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → JavaScript**
|
||||
|
||||
|
||||
*Screenshot: the JavaScript tab showing the Minify JavaScript, Combine JavaScript Files, Defer Loading, and Delay JavaScript Until Interaction toggles.*
|
||||
|
||||
## What this tab controls
|
||||
|
||||
Minification and combining of local scripts, deferred loading, delayed loading until user interaction, and manual exclusions.
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
|
||||
**Dotjuice → Page speed → Preload**
|
||||
|
||||
|
||||
*Screenshot: the Preload tab showing the Priority Image, Cache Preload After Publishing, and Font Preloading settings.*
|
||||
|
||||
## 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.
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
# Troubleshooting
|
||||
|
||||
|
||||
*Screenshot: the troubleshooting page showing the system status, cache log, and common fixes.*
|
||||
|
||||
## 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.
|
||||
|
||||
Reference in New Issue
Block a user