Initial commit: Docusaurus docker stack and docs

docs/dotjuice-elementor-tools-pro/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Elementor Tools Pro",
+  "position": 3,
+  "link": { "type": "doc", "id": "dotjuice-elementor-tools-pro/getting-started" }
+}

docs/dotjuice-elementor-tools-pro/espocrm-integration.md

@@ -0,0 +1,54 @@
+# EspoCRM Lead Capture
+
+**Requires Elementor Pro** — this adds a submit action to Elementor Pro's Forms widget, so it only appears if Elementor Pro's Forms module is active.
+
+## Where to find it
+
+Edit any Elementor Form widget, go to **Content → Actions After Submit**, and add **EspoCRM Webhook** to the list of actions. A new "EspoCRM Webhook" settings section appears further down the panel once it's added.
+
+## Setting it up
+
+1. In EspoCRM, create (or open) a **Lead Capture** entry point and copy its webhook URL.
+2. Paste that URL into **Webhook URL** on the form action.
+3. Tell it which fields to send — see **Field mapping** below.
+4. Save and test with a real submission, checking that the lead appears correctly in EspoCRM.
+
+## Settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Webhook URL** | Empty | Your EspoCRM Lead Capture endpoint. Required — the form shows an error to the visitor if this is empty when they submit. |
+| **EspoCRM Payload Example** | Empty | Paste an example payload copied from EspoCRM's Lead Capture setup here — see below. |
+| **Or Enter Field IDs Manually** | Empty | A comma-separated list of field IDs to send, as an alternative to pasting a payload. |
+| **Format Phone Numbers** | On | Automatically reformats UK phone numbers to `+44 #### ######` before sending. |
+| **Enable Debug Logging** | Off | Logs each submission's request and response to your site's debug log — see the warning below before using this on a live site. |
+
+## Field mapping
+
+This integration works by matching each Elementor form field's **ID** directly against the field name EspoCRM expects — there's no visual field-mapping screen, so the IDs need to line up.
+
+**The easiest way:** copy an example payload from your EspoCRM Lead Capture setup (it looks like `{"firstName": "...", "lastName": "...", "emailAddress": "..."}`) and paste it into **EspoCRM Payload Example**. The field names are extracted automatically — you don't need to type them out separately.
+
+**Alternative:** if you don't have an example payload handy, list the field IDs you want sent, comma-separated, in **Or Enter Field IDs Manually** (e.g. `firstName, lastName, emailAddress`).
+
+**If both are left empty**, every field on the form is sent (except Elementor's own internal fields — acceptance checkboxes, terms, reCAPTCHA, honeypot, which are always excluded automatically).
+
+Either way, each Elementor form field's **ID** must match the corresponding EspoCRM field name exactly. To check or change a field's ID: select the field in the form editor → **Advanced** tab → **ID**.
+
+## Phone number formatting
+
+When **Format Phone Numbers** is on, any field whose ID contains "phone" is reformatted to `+44 #### ######` before sending — handling common UK input styles (a leading `0`, `+44`, or `0044`) automatically. If a number doesn't look like a valid 10-digit UK number after cleanup, it's sent as originally entered rather than a mangled result. This formatting is UK-specific; international numbers are passed through unchanged.
+
+## ⚠ Before enabling debug logging
+
+Debug logging writes each submission's field values — potentially including names, emails, and phone numbers — to your site's debug log file. Only enable this temporarily while troubleshooting a specific issue, and turn it off again afterward. Debug logs aren't intended to store personal data long-term, and depending on your hosting, the log file may be more widely accessible than your database.
+
+## What visitors see if something goes wrong
+
+If the webhook URL is missing, unreachable, or EspoCRM returns an error, the visitor sees a generic error message on the form rather than technical details — enable debug logging temporarily to see exactly what EspoCRM returned.
+
+## Good to know
+
+- **Checkbox/toggle-style fields** are converted to `0`/`1` automatically, matching EspoCRM's expected boolean format.
+- **Multi-select or checkbox-group fields** are sent as a single comma-separated string.
+- **Empty fields are omitted** from the payload entirely rather than sent as blank values.

docs/dotjuice-elementor-tools-pro/getting-started.md

@@ -0,0 +1,46 @@
+# Getting Started
+
+## Requirements
+
+Dotjuice Elementor Tools Pro requires:
+
+- **The free [Dotjuice Elementor Tools](../../../dotjuice-elementor-tools/documentation/marketing/overview.md) plugin**, installed and active — Pro is an add-on, not a standalone plugin.
+- **Elementor** (required by the free plugin).
+- **WooCommerce**, for every WooCommerce-related widget (all of them except ACF Frontend Form).
+- **Advanced Custom Fields (ACF)**, only for the ACF Frontend Form widget.
+- **Elementor Pro**, only for Woo Quick View's popup and the [EspoCRM Lead Capture](espocrm-integration.md) integration (Forms is an Elementor Pro feature).
+
+## Activating your license
+
+Before any Pro feature works, you need to activate your license key. Go to **Dotjuice → Pro Licence** in your WordPress admin and enter the key from your purchase email. See [Activating Your License](license-activation.md) for the full walkthrough, including what each status message means and what to do if activation fails.
+
+**Until your license is active, Pro widgets won't appear in the Elementor panel and watermarks stay on Screenshot Capture** — this is expected, and resolves as soon as your key is activated.
+
+## Finding your widgets
+
+Once your license is active, open the Elementor editor and look in the **Dotjuice** category — your Pro widgets appear alongside the free plugin's widgets there, each carrying a small Pro badge in the panel.
+
+If a specific widget is missing:
+
+- **All WooCommerce widgets** need WooCommerce active.
+- **ACF Frontend Form** needs Advanced Custom Fields active.
+- **Woo Quick View** needs **Elementor Pro** for its popup functionality — without Elementor Pro, its button falls back to a plain link to the product page instead of opening a popup.
+
+## Widget guides
+
+- [Woo Product Filter](widgets/woo-product-filter.md)
+- [Woo Cart](widgets/woo-cart.md)
+- [Woo Quick View](widgets/woo-quick-view.md)
+- [Woo Custom Product Tabs](widgets/woo-custom-product-tabs.md)
+- [Woo Add Product Tab](widgets/woo-add-product-tab.md)
+- [ACF Frontend Form](widgets/acf-frontend-form.md)
+
+## Integrations
+
+- [EspoCRM Lead Capture](espocrm-integration.md) — send Elementor Pro Form submissions straight into EspoCRM.
+
+## Recommended first steps
+
+1. Activate your license (above).
+2. If you're setting up product filtering, read [Woo Product Filter](widgets/woo-product-filter.md) in full before building your first filter group — it has several settings that interact with each other.
+3. If you're setting up Quick View, read [Woo Quick View](widgets/woo-quick-view.md) — it's a two-widget system and needs a specific setup order.

docs/dotjuice-elementor-tools-pro/license-activation.md

@@ -0,0 +1,43 @@
+# Activating Your License
+
+**Dotjuice → Pro Licence**
+
+## Activating for the first time
+
+1. Find your license key in your purchase confirmation email — it looks like `DJ-XXXX-XXXX-XXXX-XXXX`.
+2. Go to **Dotjuice → Pro Licence** in your WordPress admin.
+3. Paste your key into the License Key field and click **Activate Licence**.
+4. Once active, the field becomes read-only and the page shows your license status, how many sites you're using out of your plan's limit, and confirms Pro features are unlocked.
+
+## What each status means
+
+| Status shown | What it means |
+|---|---|
+| **Active — lifetime licence** | Fully valid, never expires. |
+| **Active — renews [date]** | Fully valid, on a subscription that renews on the date shown. |
+| **Active** | Fully valid. |
+| **Expired — Pro features are disabled until you renew** | Your license has lapsed. A "Renew your licence" button takes you to your account on the Dotjuice shop. |
+| **Revoked — please contact support** | Your license has been cancelled or pulled. Contact support to resolve this. |
+| **Key valid but not activated for this site** | Your key is real, but hasn't been activated for this specific site yet — click Activate. |
+| **Site limit reached — deactivate another site or upgrade** | You've used up every site activation your plan allows. Deactivate the license on a site you no longer need it on (from your account on the Dotjuice shop, or from that site's own Pro Licence page), or upgrade to a plan with a higher site limit. |
+| **Invalid licence key** | The key doesn't match any license on file — check for typos, or that you're using the key for this specific product. |
+| **Not activated** | No key has been entered yet. |
+
+## Other actions on this page
+
+- **Re-check Status** — forces an immediate recheck against the license server, useful right after renewing or resolving a site-limit issue elsewhere.
+- **Deactivate** — removes the license from this specific site, freeing up that site slot for use elsewhere (for example, if you're moving the plugin from a staging site to production). Pro features switch off on this site immediately.
+
+## What happens while your license isn't active
+
+Pro widgets don't appear in the Elementor editor's widget panel, and any Pro widgets already placed on a page before your license lapsed won't render on the live site. The free plugin's Screenshot Capture widget keeps its watermark. Everything reactivates automatically the moment your license is valid again — nothing needs to be rebuilt or re-placed.
+
+## If activation keeps failing
+
+- Double-check the key was copied correctly, with no extra spaces (copying directly from your purchase email is safest).
+- Confirm you're activating the correct product — a key issued for a different Dotjuice product won't activate here.
+- If you're confident the key is correct and still see "Invalid licence key" or a persistent connection error, contact support with your order number.
+
+## Moving to a new site
+
+If you're relaunching a site on a new domain (for example, moving from a staging URL to your live domain), your existing activation may need to be freed up first. Deactivate the license on the old domain (or from your account on the Dotjuice shop if the old site is no longer reachable), then activate it on the new one.

docs/dotjuice-elementor-tools-pro/widgets/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Widgets",
+  "position": 2
+}

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

@@ -0,0 +1,32 @@
+# ACF Frontend Form
+
+Found in the Elementor panel under **Dotjuice → ACF Frontend form**. Requires Advanced Custom Fields (ACF).
+
+## How it works
+
+Place this widget on a template that renders a single post or page — it displays an editable form for **whichever post is currently being viewed**, using ACF's own native form rendering. This widget only works on singular posts/pages (a single product, a single post, a single custom post type entry); it doesn't render anything on archive pages, the homepage, or similar listing pages.
+
+## Content settings
+
+| Setting | What it does |
+|---|---|
+| **ACF Field Groups** | Choose which of your site's ACF field groups should be editable in this form. Nothing renders until at least one is selected. |
+| **Enable Title** | Includes the post title as an editable field. |
+| **Enable Content** | Includes the main content editor as an editable field. |
+| **Submit Button Label** | The text on the form's submit button (default "Update"). |
+
+## Setting it up
+
+1. Place the widget on a Single Post, Single Product, or other singular template in your Elementor Theme Builder.
+2. Select the ACF field group(s) you want editable.
+3. Decide whether the post title and/or content should be editable too.
+4. Publish and test by viewing an actual individual post/page that uses this template.
+
+## ⚠ Important: this widget has no built-in access restriction
+
+Anyone who can view the page this widget is placed on can submit changes through the form — there's no automatic login requirement or capability check. If you only want logged-in users, specific roles, or the post's author to be able to edit, you'll need to add that restriction yourself: placing the widget inside a members-only page, using a membership/restriction plugin, or a conditional visibility rule in Elementor Pro. Don't place this widget on a fully public page unless open editing is genuinely what you want.
+
+## Good to know
+
+- This widget only renders a form when viewing an actual singular post or page — on archives, the homepage, or search results, it won't display anything.
+- The uploader for image/file fields uses a simple file picker rather than the full WordPress media library browser.

docs/dotjuice-elementor-tools-pro/widgets/woo-add-product-tab.md

@@ -0,0 +1,27 @@
+# Woo Add Product Tab
+
+Found in the Elementor panel under **Dotjuice → Woo Add Product Tab**. Requires WooCommerce.
+
+## How it works
+
+Place this widget on your Single Product template — it adds one additional tab to WooCommerce's existing native tabs (Description, Additional Information, Reviews), styled to match them automatically since it uses WooCommerce's own tab system.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Tab Title** | "Additional Info" | The tab's label. |
+| **Tab Content** | — | Rich-text content shown inside the tab. |
+| **Tab Order** | 50 | Controls where this tab sits relative to WooCommerce's defaults (Description = 10, Additional Information = 20, Reviews = 30). The default of 50 places it after Reviews — lower numbers move it earlier in the tab order. |
+
+## Setting it up
+
+1. Add the widget to your Single Product Elementor Theme Builder template.
+2. Set your tab title and content.
+3. Adjust Tab Order if you want it positioned somewhere other than last.
+
+## Good to know
+
+- **If this widget is placed on a shared Single Product template** (which is the normal way to use Elementor Theme Builder — one template applying to every product), every product using that template shows the **identical** tab title and content. This widget doesn't support per-product dynamic content — if you need different tab content on different products, you'll need [ACF Frontend Form](acf-frontend-form.md) with a custom field, or a separate template per product.
+- Only one tab per widget instance — add a second instance of this widget if you need two extra tabs.
+- You won't see this tab live in the Elementor editor canvas — a placeholder note explains this; preview it by viewing an actual product page on the front end.

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

@@ -0,0 +1,44 @@
+# Woo Cart
+
+Found in the Elementor panel under **Dotjuice → Woo Cart**. Requires WooCommerce (does not require Elementor Pro).
+
+## 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.
+
+## Layout settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Desktop Layout** | 2 columns | Two columns (cart items beside the totals panel) or one column (stacked). |
+| **Totals Column Width** | 340px | Two-column layout only — the width of the totals sidebar. |
+| **Gap Between Columns** | 32px | Spacing between the two columns. |
+| **Show Coupon Field** | On | Displays the coupon code box. Only actually appears if your store's own WooCommerce settings have coupons enabled — if you've disabled coupons store-wide, this setting has no effect. |
+| **Show Update Cart Button** | On | See below — this controls how quantity changes are handled. |
+
+## Instant AJAX updates vs. the Update Cart button
+
+This is the most important setting on this widget, so it's worth understanding both modes:
+
+**With "Show Update Cart Button" on (default):** shoppers change a quantity, then click a visible **Update Cart** button (which stays disabled until something has actually changed) to apply it — a standard, familiar cart flow with a normal page action.
+
+**With "Show Update Cart Button" off:** there's no button at all. Instead, changing any quantity automatically updates that row's subtotal and the whole totals panel via AJAX, a fraction of a second after the shopper stops adjusting it — no page reload, no button click needed. This is the more modern, "instant" feeling option.
+
+Choose whichever fits your store's style — both are fully functional, it's a matter of preferred shopping experience.
+
+## Setting it up
+
+1. Add the widget to your Cart page Elementor Theme Builder template.
+2. Choose your column layout and decide on AJAX vs. button-based quantity updates.
+3. Work through the style sections below to match your store's design.
+4. Test by adding a product to your cart and viewing the page as a real shopper would.
+
+## Styling
+
+Extensive styling is available: **Cart Item** rows, **Thumbnail**, **Product Name** (including variation details), **Price/Quantity/Subtotal** (including the quantity stepper's plus/minus buttons), **Remove Button**, **Buttons** (a shared style applying to the coupon Apply button, the Update Cart button, and the Checkout button together), **Form Fields** (the coupon input and quantity field), **Products Box** (the card containing your item rows), **Coupon Box**, and **Totals Box**. If you use the Printful shipping plugin, an additional style section for its shipping calculator appears automatically.
+
+## Good to know
+
+- **The "Checkout Button Text" field only affects the editor preview** — on the live cart page with real items, the checkout button's text comes from WooCommerce's own settings rather than this field. The button's *styling* (colour, padding, etc. from the shared Buttons section) does apply live — it's specifically the text on this one field that's preview-only. If you need to change the actual live checkout button text, that's done through WooCommerce's own settings rather than this widget.
+- While your own cart is empty, the Elementor editor shows a sample two-item cart purely so you have something to style against — this never appears to real shoppers, who see a genuine "Your cart is empty" message with a link back to your shop.
+- Removing an item is instant (AJAX) regardless of the Update Cart Button setting.

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

@@ -0,0 +1,46 @@
+# Woo Custom Product Tabs
+
+Found in the Elementor panel under **Dotjuice → Woo Custom Product Tabs**. Requires WooCommerce.
+
+## 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.
+
+**Only need to add one extra tab to WooCommerce's existing tabs, without a full rebuild?** See the lighter-weight [Woo Add Product Tab](woo-add-product-tab.md) instead.
+
+## Content settings — Tabs
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Hide Tab Headings** | Off | Hides the heading text at the top of each tab panel (including WooCommerce's own "Reviews" heading). |
+| **Hide Description / Hide Additional Information / Hide Reviews** | Off each | Fully removes that specific default WooCommerce tab — not just visually, it won't render at all. |
+| **Custom Tabs** | Empty | A repeater — add as many extra tabs as you need, each with: **Title**, **Content Type** (Text Editor or Elementor Template), **Content** (rich text, for Text Editor), and **Template ID** (for Elementor Template — see below). |
+| **Accordion Below (px)** | 768 | The screen width below which tabs switch to an accordion layout. 768 suits tablet-portrait and below, 480 suits mobile-only, and 0 disables the accordion entirely (always shows tabs). |
+
+## Adding an Elementor Template as a custom tab
+
+For a custom tab, choosing **Elementor Template** as the Content Type requires entering that template's numeric ID directly (rather than picking it from a list). To find it:
+
+1. Go to **Templates → Saved Templates** in your WordPress admin (or wherever your Elementor template library lives).
+2. Open the template you want to embed, or hover over it in the list.
+3. The number in the edit URL (`post=1234`) or shown in your browser's address bar is the Template ID — enter that number into the field.
+
+## Styling
+
+**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.
+
+**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.
+
+## Setting it up
+
+1. Add the widget to your Single Product Elementor Theme Builder template.
+2. Decide which default tabs to keep, and add any custom tabs you need.
+3. Set your Accordion breakpoint based on how your theme handles tablets — 768px is a safe default for most sites.
+4. Style the Tab Navigation and Panel sections to match your design, then move on to the Reviews section if you display product reviews.
+
+## Good to know
+
+- **If every tab ends up hidden**, nothing renders at all on the live product page — double check at least one tab (default or custom) is visible before publishing.
+- Custom tab content using the Elementor Template option needs that template to already be built and published — this widget only embeds it, it doesn't create it.

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

@@ -0,0 +1,55 @@
+# Woo Product Filter
+
+Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires WooCommerce.
+
+## 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.
+
+## Building your filter groups
+
+Each filter group is one item in the **Filters** repeater. Add as many as you need — one per category/attribute you want shoppers to filter by.
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Filter Title** | Empty | An optional heading above this group. |
+| **Filter By** | Category | Category, Tag, Brand, or Attribute. |
+| **Taxonomy Slug** | — | Only for Attribute — the technical slug of the attribute (e.g. `pa_color`). |
+| **Display Type** | List | List (simple clickable list) or Buttons (clickable button/swatch style). |
+| **Match Logic** | Match Any | Whether selecting multiple terms in this group should show products matching *any* of them, or *all* of them. |
+| **Show products without this attribute** | Yes | Attribute filters only. When a term is selected, decides whether products that don't have this attribute set at all stay visible (Yes) or are hidden (No). |
+| **Enable Colour Swatches** | Off | Buttons display only. Shows each term's assigned colour as a clickable swatch instead of a text button — colours come from the [Product Attribute Colours](../../../../dotjuice-elementor-tools/documentation/user-guide/product-attribute-colours.md) settings page in the free plugin. Terms sharing the same colour are merged into a single clickable swatch. |
+| **Show this filter** | Always | Always, only when any other filter is selected, or only when a specific other filter type has a selection — see "Dependent filters" below. |
+| **Hide unavailable terms** | Off | When on, terms with zero matching products (given the current selection) are removed entirely rather than just visually faded. |
+
+## Dependent filters
+
+To build a filter group that only appears once another one is used — for example, showing a "Size" filter only after a category is chosen — set **Show this filter** to "When a specific filter is selected" and choose which filter type triggers it. If the triggering selection is cleared, the dependent group's own selections are cleared too.
+
+## AJAX & URL settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Update products with AJAX** | On | Filters refresh the grid in place. Turning this off makes every filter selection a normal page navigation with the filter reflected in the URL instead. |
+| **Live update** | Off | AJAX mode only. When on, the grid refreshes automatically the moment a filter is clicked. When off, shoppers make their selections and click an "Apply Filters" button to refresh. |
+| **Update browser URL** | On | AJAX mode only. Keeps the URL in sync with the current filter selection as shoppers filter, so the page can be bookmarked, shared, or reloaded and show the same results. |
+| **Products container selector** | Empty (auto-detect) | Advanced: the CSS selector of your product grid, if the widget doesn't auto-detect it correctly. Leave empty unless you're troubleshooting a grid that isn't updating. |
+| **Contextual filtering** | Off | When placed on a category archive page, scopes filter options and counts to that category's products only, rather than your whole catalogue. |
+
+## Styling
+
+Filter Group headings, Buttons (Normal/Hover/Active states), Swatches (Normal/Selected states), and Faded terms (opacity, greyscale, scale for unavailable options, plus a toggle for whether faded/unavailable terms can still be clicked).
+
+## Setting it up
+
+1. Add the widget to your Shop page or category archive template, near your product grid.
+2. Add a filter group for each way you want shoppers to filter — start with Category, then add Attribute groups for things like colour or size.
+3. For colour attributes, set up your colours first on the [Product Attribute Colours](../../../../dotjuice-elementor-tools/documentation/user-guide/product-attribute-colours.md) page, then enable **Enable Colour Swatches** on that filter group.
+4. Leave AJAX and URL settings at their defaults for most stores — instant, bookmarkable filtering.
+5. Test: apply a filter, copy the URL, and open it in a new tab (or with JavaScript disabled) to confirm it reproduces the same filtered results.
+
+## Good to know
+
+- **Filtered URLs work even without JavaScript** — if a shopper shares a filtered link, or your page is cached, the filter still applies correctly on a plain page load, not just via AJAX. This is deliberate and doesn't need any extra setup.
+- Colour swatches only work for **Attribute** filter groups (not category/tag/brand), and require colours to already be configured on the Product Attribute Colours page — a term with no colour assigned won't show a meaningful swatch.
+- If your product grid doesn't refresh correctly after filtering, check the **Products container selector** field — leaving it empty works for most themes' standard WooCommerce/Elementor product grids, but an unusual custom grid layout may need this set explicitly.

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

@@ -0,0 +1,34 @@
+# Woo Quick View Popup
+
+This widget renders the **content shown inside** a Quick View popup. It only works as part of the full Quick View setup — see [Woo Quick View](woo-quick-view.md) for the complete walkthrough if you haven't set this up yet.
+
+Found in the Elementor panel under **Dotjuice → Woo Quick View Popup**. Requires WooCommerce.
+
+## 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.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Content Source** | Dedicated quick view page (recommended) | **Dedicated**: shows a clean, minimal view of the product — no theme header/footer — using either a template you choose below or a bare WooCommerce product layout. **Legacy**: shows your actual full product page inside the popup, with the option to hide the header/footer via the settings below. |
+| **Quick View Template** | Empty (bare WooCommerce layout) | Dedicated mode only. Choose a specific Elementor template to control exactly how the product appears inside the popup, or leave empty to use a plain WooCommerce product layout. |
+| **Hide Header** / **Hide Footer** | Off / Off | Legacy mode only. Hides your theme's header and/or footer from within the popup. |
+
+There's no Style tab — the popup content always fills the popup completely; size it using the popup's own Width/Height settings in Elementor.
+
+## Hiding specific elements inside the popup
+
+Add the CSS class `hide-in-qv` to any element in your product template (or your real product page, in Legacy mode) that you don't want shown inside the popup — useful for hiding things like breadcrumbs or a related-products section that don't make sense in a compact popup view.
+
+## Which mode should you use?
+
+**Dedicated** (the default and recommended option) is faster and cleaner — it loads a minimal, purpose-built view rather than your entire themed page. Pair it with a purpose-built Elementor template under **Quick View Template** for full control over exactly what shoppers see.
+
+**Legacy** is useful if you want the popup to look identical to your real product page without building a separate template — but it loads more (the full page, then hides parts of it), so it's a little slower to open.
+
+## Good to know
+
+- **This widget must be placed inside an actual Elementor popup**, and that popup must then be selected in the separate Woo Quick View button widget's settings — on its own, on a normal page, it does nothing.
+- If you're using a custom **Quick View Template**, note that it replaces WooCommerce's own single-product layout entirely inside the popup — any customisations on your real product page template aren't automatically inherited, since it's a genuinely separate template.

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

@@ -0,0 +1,40 @@
+# Woo Quick View
+
+Two widgets work together to build Quick View: **Woo Quick View** (this one — the trigger button) and **Woo Quick View Popup** (the content shown inside the popup). Both are needed; this guide covers the full setup.
+
+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.
+
+## 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.
+
+## Setting it up
+
+1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).
+2. **Add the Woo Quick View Popup widget** inside it — see [Woo Quick View Popup](woo-quick-view-popup.md) for its settings. Size the popup itself using Elementor's own popup Width/Height settings.
+3. **Publish the popup.**
+4. **Add the Woo Quick View widget** anywhere on your site (a header, a single instance on any page — it doesn't need to be near your product grid, since it works by injecting buttons into loops sitewide once enabled).
+5. Turn on **Enable Quick View**, and select your popup under **Quick View Popup**.
+6. Save and check a shop or category page — quick-view buttons should now appear on your product cards.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Enable Quick View** | Off | The master switch — turns on automatic button injection into every product loop on your site. Nothing happens until this is on. |
+| **Quick View on Looped Add to Cart** | Off | For variable products shown in a grid with a "Select options" link (common with Elementor Pro's Loop Grid), replaces that link with a quick-view button too — so shoppers can pick variations without leaving the grid. |
+| **Hide on Mobile** | Off | Hides the quick-view button on smaller screens. |
+| **Quick View Icon** | Eye icon | The icon used for the button. |
+| **Quick View Popup** | — | Which popup contains your Woo Quick View Popup widget — this is the link between the two widgets. **Make sure to select an actual popup you've built with the Quick View Popup widget inside it** — this dropdown lists all your Elementor templates, not only popups, so double check you've selected the right one. |
+
+## Styling
+
+Button alignment, and Normal/Hover icon colour and size.
+
+## Good to know
+
+- **The button widget and the popup widget must both be set up for anything to happen** — placing just one without the other has no visible effect.
+- Hovering over a quick-view button preloads the popup content in the background, so the popup opens close to instantly on click — this preloading only happens when your popup widget is set to its recommended "Dedicated" content mode (see [Woo Quick View Popup](woo-quick-view-popup.md)).
+- Buttons keep appearing correctly even after a [Woo Product Filter](woo-product-filter.md) AJAX refresh swaps in new products — no extra setup needed if both widgets are on the same page.