Initial commit: Docusaurus docker stack and docs

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.