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).
|
||||
|
||||
Reference in New Issue
Block a user