Document the new Pro PDF Viewer widget

Adds the docs-site page and the website marketing copy for the PDF
Viewer widget shipped in Pro 20260908.1.

- docs: full widget guide (source, zoom, toolbar, styling, gotchas),
  listed in the Pro getting-started widget index, with the usual two
  placeholder screenshots to be replaced with real captures.
- getting-started: PDF Viewer noted as having no WooCommerce or ACF
  dependency.
- marketing: widget page plus a "What's included" entry and an updated
  strapline on the Pro overview.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.env

@@ -3,7 +3,7 @@
 CONTAINER_NAME=docusaurus-docs
 
 # Port Docusaurus serves on inside the container.
-PORT=3000
+PORT=3080
 
 # Production URL of the docs site. Update this once you've picked the
 # subdomain, then run `docker compose up -d --build` to rebuild with it —

README.md

@@ -70,4 +70,4 @@ Edit `SITE_URL` in `.env`, then `docker compose up -d --build`. Docusaurus bakes
 
 A handful of "See Pro" / "See free plugin" cross-links inside the docs were written for the original plugin repo structure and were adjusted during setup — all internal links were checked and resolve correctly as of this build. If you reorganise the `docs/` folder structure later, re-check cross-plugin links (the free and pro plugin folders link to each other in a few places, e.g. product-attribute-colours ↔ the Pro widget that displays swatches).
 
-The marketing/"what it does" copy (as opposed to this how-to content) is intended for regular Elementor pages on dotjuice.co.uk, not this docs site — see each plugin's `documentation/marketing/` folder in its own repo.
+The marketing/"what it does" copy (as opposed to this how-to content) is intended for regular Elementor pages on dotjuice.co.uk, not this docs site — it lives in this repo under `marketing/<plugin>/`. The copies in each plugin repo's own `documentation/` folder are abandoned. Those pages pull the markdown straight from this repo's raw URLs via the free plugin's Markdown widget / `[dj_markdown]` shortcode, so a commit here updates the website copy.

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

@@ -6,7 +6,7 @@ Dotjuice Elementor Tools Pro requires:
 
 - **The free [Dotjuice Elementor Tools](../dotjuice-elementor-tools/getting-started.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).
+- **WooCommerce**, for every WooCommerce-related widget (all of them except ACF Frontend Form and PDF Viewer).
 - **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).
 
@@ -24,6 +24,7 @@ If a specific widget is missing:
 
 - **All WooCommerce widgets** need WooCommerce active.
 - **ACF Frontend Form** needs Advanced Custom Fields active.
+- **PDF Viewer** has no plugin dependencies at all beyond your Pro licence.
 - **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
@@ -33,6 +34,7 @@ If a specific widget is missing:
 - [Woo Quick View](widgets/woo-quick-view.md)
 - [Woo Custom Product Tabs](widgets/woo-custom-product-tabs.md)
 - [ACF Frontend Form](widgets/acf-frontend-form.md)
+- [PDF Viewer](widgets/pdf-viewer.md)
 
 ## Integrations
 

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

@@ -2,10 +2,15 @@
 
 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
 
 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.
 - **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).
 

docs/dotjuice-elementor-tools-pro/widgets/pdf-viewer.md

@@ -0,0 +1,77 @@
+# PDF Viewer
+
+Found in the Elementor panel under **Dotjuice → PDF Viewer**. No WooCommerce or ACF dependency — it only needs an active Pro licence.
+
+Displays a PDF — from your media library or an external URL — as a self-contained viewer built into your page: one page at a time on a styleable canvas, with a toolbar for navigation, zoom, fullscreen, download and print.
+
+![The PDF Viewer widget settings in the Elementor panel](../assets/img/pdf-viewer-controls.png)
+*Screenshot: the widget selected in the editor with the PDF File section open, showing the Media Library / External URL source toggle and the Lazy Load switch.*
+
+## How it works
+
+The widget draws each page itself using PDF.js (a copy of which ships inside the plugin — nothing is loaded from a third-party CDN), rather than handing the file to the browser's built-in PDF plugin in an iframe. That matters because the native viewer looks completely different from browser to browser, can't be styled, and on some mobile browsers refuses to display inline at all. Here, every visitor sees the same viewer, and it inherits the colours, borders and spacing you set in Elementor.
+
+Only the page being viewed is fetched and decoded, so opening a 200-page brochure doesn't mean downloading and rendering all 200 pages up front. Pages are rendered at the visitor's device pixel ratio, so text stays sharp on retina and high-DPI screens.
+
+![The PDF Viewer on the front end](../assets/img/pdf-viewer-frontend.png)
+*Screenshot: a PDF displayed on a page, with the toolbar showing page navigation, zoom buttons, fullscreen, download and print.*
+
+## Content settings
+
+### PDF File
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Source** | Media Library | Media Library (pick or upload a PDF) or External URL (a PDF hosted elsewhere). |
+| **Upload PDF** / **PDF URL** | — | The file itself, depending on Source. |
+| **Download Filename** | Source filename | Suggested filename for the Download button. Browsers only honour this for files on your own domain — for a PDF on another domain the browser names the file itself. |
+| **Initial Page** | 1 | The page shown when the viewer first loads. A number past the end of the document is clamped to the last page. |
+| **Lazy Load** | On | Don't fetch or render the PDF until the widget scrolls into view (loading starts about 200px before it reaches the viewport). Turn it off for a viewer above the fold that you want ready immediately. Lazy loading is always disabled inside the Elementor editor, so the widget previews straight away while you're designing. |
+
+### Zoom
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Default Zoom** | Fit Width | **Fit Width** scales the page to the width of the viewing area, **Fit Page** scales it so the whole page fits within the area's height as well, and **Custom Percentage** uses a fixed zoom. |
+| **Zoom Level (%)** | 100 | The fixed zoom, used only when Default Zoom is Custom. |
+| **Minimum (%)** | 25 | Lower limit for the toolbar's zoom-out button. |
+| **Maximum (%)** | 400 | Upper limit for the toolbar's zoom-in button. |
+
+The Minimum and Maximum also cap the Fit modes, so a page that would need to shrink below your minimum to fit is drawn at the minimum instead and scrolls inside the viewing area.
+
+### Toolbar
+
+Turn the toolbar on or off, place it at the **Top** or **Bottom** of the viewer, and show or hide each of its parts independently:
+
+| Part | What it gives the visitor |
+|---|---|
+| **Page Navigation** | Previous/Next buttons plus a page-number box showing `3 / 24`. The arrows disable themselves on the first and last page, and the number box can be typed into to jump straight to a page. |
+| **Zoom Buttons** | Zoom in and out in 25% steps, between your Minimum and Maximum. |
+| **Fullscreen Button** | Expands the viewing area to fill the screen, on a dark background, and returns with Escape. |
+| **Download Button** | Downloads the original PDF file. |
+| **Print Button** | Prints the original PDF, not a picture of the page on screen — so print output is full quality rather than a screen-resolution raster. |
+
+## Setting it up
+
+1. Add the widget and choose your PDF. Media Library is simplest — it also gives the Download button a sensible filename automatically.
+2. Set the viewing area's **Height** under Style → Viewing Area. This is the fixed height the viewer occupies in your layout; if the page is taller than that at the current zoom, it scrolls within the area.
+3. Pick a **Default Zoom** to suit the document. Fit Width suits text documents such as manuals and price lists; Fit Page suits single-page, poster-style PDFs where the whole thing should be visible at once.
+4. Hide any toolbar buttons you don't want — for example, dropping Download and Print on a document you'd rather people read on the page.
+5. Style the toolbar, buttons, page indicator and the page's own border and shadow to match your site.
+
+## Styling
+
+**Toolbar** — background, padding, and border; button icon size with separate Normal and Hover icon colours; page indicator colour and typography.
+
+**Viewing Area** — height (responsive, in px or vh), background colour, padding, and a border and box shadow applied to the page itself, which is what gives the "sheet of paper on a desk" look.
+
+**Loading / Error Text** — the colour of the loading message, a separate colour for error messages, and typography for both.
+
+## Good to know
+
+- The viewer shows **one page at a time** with Previous/Next controls rather than a continuous scroll. That keeps the widget's height predictable inside an Elementor layout instead of growing with the length of the document.
+- **Once a visitor presses a zoom button, the viewer stays at that zoom.** The Fit modes re-fit the page when the browser is resized or a phone is rotated, but zooming manually is treated as taking control, so it won't be undone by a later resize. Reloading the page returns to your Default Zoom.
+- **External PDFs need to allow cross-origin access.** Because the widget fetches and renders the file itself rather than embedding it, a PDF on another domain will only load if that server sends an `Access-Control-Allow-Origin` header permitting your site. Most file hosts and CDNs do; some do not, and a Dropbox or Google Drive share link generally won't. If an external PDF shows "Sorry, this PDF could not be loaded", this is almost always why — the fix is to upload the file to your own media library instead. PDFs from your own site are never affected.
+- **Print on an external PDF may open a new tab instead of a print dialog.** Printing works by loading the original file invisibly and printing it; browsers block that for files on another domain, so the widget falls back to opening the PDF in a new tab for the visitor to print from there.
+- The status area shows **"Loading PDF…"** while the file downloads and **"Sorry, this PDF could not be loaded"** if it fails — the second one styled in its own error colour. In the editor, a widget with no file selected shows a dashed placeholder box rather than an empty space.
+- Very large PDFs still take a moment to open, because PDF.js reads the document's structure before it can draw page one. Lazy Load keeps that cost off your initial page load.

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

@@ -2,10 +2,16 @@
 
 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
 
 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
 
 | Setting | Default | What it does |

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

@@ -2,10 +2,15 @@
 
 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
 
 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.
 
 ## Content settings — Tabs
@@ -63,7 +68,7 @@ Add a URL field to your products, drop that single line into a "Changelog" tab,
 
 **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.
+**Panel** — background, text colour, typography, padding, border, and shadow for the content area beneath the tabs. The text colour also applies to the panel's own tab heading (e.g. the "Reviews" heading), unless overridden by the more specific Reviews section colours below.
 
 **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.
 

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

@@ -2,10 +2,15 @@
 
 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
 
 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.
 
 ## Building your filter groups

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

@@ -4,10 +4,16 @@ 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.
 
+![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
 
 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
 
 | Setting | Default | What it does |

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

@@ -4,12 +4,18 @@ 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.
 
+![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
 
 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.
 
+![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
 
 1. **Create the popup**: in Elementor, create a new Popup (Templates → Popups → Add New in your Elementor library).

docs/dotjuice-elementor-tools/widgets/dark-mode-toggle.md

@@ -9,7 +9,7 @@ Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
 
 ## How it works
 
-The widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours for the dark-mode values you configure on the widget. The choice is stored in the visitor's browser, so it survives navigation and returns on their next visit.
+The widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours for the dark-mode values you configure on the widget. The choice is stored in the visitor's browser, so it survives navigation and returns on their next visit — including on pages and templates that don't have the toggle on them at all, as long as the toggle exists somewhere on the site. Dark mode is applied before the page paints, so there's no flash of light-mode colours first.
 
 It works with **both** of Elementor's global-colour systems:
 

docs/dotjuice-pagespeed/advanced.md

@@ -2,6 +2,9 @@
 
 **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
 
 WordPress's Heartbeat API, XML-RPC, and WooCommerce script loading on non-shop pages.

docs/dotjuice-pagespeed/caching.md

@@ -2,6 +2,9 @@
 
 **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
 
 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.

docs/dotjuice-pagespeed/cdn.md

@@ -2,6 +2,9 @@
 
 **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
 
 Rewriting your site's stylesheet and script URLs to point at a CDN hostname instead of your own server.

docs/dotjuice-pagespeed/css-optimisation.md

@@ -2,6 +2,9 @@
 
 **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
 
 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.

docs/dotjuice-pagespeed/database.md

@@ -2,6 +2,9 @@
 
 **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
 
 One-click and scheduled cleanup of database bloat: old post revisions, abandoned drafts, spam comments, expired cache entries, orphaned metadata, and full table optimisation.

docs/dotjuice-pagespeed/getting-started.md

@@ -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.
+
+![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.
 

docs/dotjuice-pagespeed/html-optimisation.md

@@ -2,6 +2,9 @@
 
 **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
 
 HTML minification, removal of unnecessary version query strings and default WordPress scripts, Google Fonts display behaviour, and DNS prefetch hints.

docs/dotjuice-pagespeed/images.md

@@ -2,6 +2,9 @@
 
 **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
 
 Lazy loading of images and iframes, and automatic width/height attributes to prevent layout shift.

docs/dotjuice-pagespeed/javascript-optimisation.md

@@ -2,6 +2,9 @@
 
 **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
 
 Minification and combining of local scripts, deferred loading, delayed loading until user interaction, and manual exclusions.

docs/dotjuice-pagespeed/preload.md

@@ -2,6 +2,9 @@
 
 **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
 
 Priority loading for your most important image, automatic cache warming after publishing, font preloading, and DNS/connection hints for third-party services.

docs/dotjuice-pagespeed/troubleshooting.md

@@ -1,5 +1,8 @@
 # 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
 
 1. Click **Clear Cache** and reload the page — a stale cached copy from before your change is the most common cause.

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

@@ -1,15 +0,0 @@
-# ACF Frontend Form
-
-Let visitors edit Advanced Custom Fields content from the front end — no admin access, no wp-admin, just a form on your page.
-
-## The problem it solves
-
-Advanced Custom Fields is one of the most powerful tools in WordPress for structured content, but editing it has always meant going into wp-admin. For membership sites, directories, community-submitted content, or client self-service portals, that's a real barrier.
-
-## How it helps
-
-ACF Frontend Form renders ACF's own native form interface — the same tabs, repeaters, and field layouts you're used to from the admin edit screen — directly on any front-end page, for the post or page currently being viewed. Choose exactly which field groups are editable, and whether the post title and content are included too.
-
-## The result
-
-Genuine front-end content editing, using ACF's real, familiar form fields — not a simplified imitation.

marketing/dotjuice-elementor-tools-pro/documentation/marketing/widgets/woo-cart.md

@@ -1,15 +0,0 @@
-# Woo Cart
-
-A complete, from-scratch cart widget — with instant AJAX quantity updates and deep styling control, no Elementor Pro required.
-
-## The problem it solves
-
-A store's cart page is one of the last steps before checkout, and default cart styling rarely matches the rest of a carefully designed store. Elementor Pro has its own cart widget, but if you're not on Elementor Pro, or you want more granular styling control than it offers, there's a gap.
-
-## How it helps
-
-Woo Cart is a ground-up cart widget: item rows with thumbnail, name, variation details, a quantity stepper, and pricing; a coupon box; and a totals panel with checkout button — all restyled through more than a dozen dedicated style sections. Switch on AJAX quantity updates and shoppers can adjust amounts without a page reload at all, with the totals panel updating live, including coupon and discount rows.
-
-## The result
-
-A cart experience that feels instant and looks exactly like the rest of your store, without needing Elementor Pro.

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

@@ -1,17 +0,0 @@
-# Woo Custom Product Tabs
-
-A complete rebuild of your product tabs — styleable down to the reviews and rating form, with a built-in mobile accordion.
-
-## The problem it solves
-
-WooCommerce's default product tabs (Description, Additional Information, Reviews) are functional but offer minimal styling control, and turn into an awkward stacked layout on mobile with no accordion behaviour built in.
-
-## How it helps
-
-Woo Custom Product Tabs replaces the entire tabs area with a fully restyled desktop-tabs / mobile-accordion component. Hide any of the default tabs you don't need, add as many custom tabs as you like — rich text, a shortcode, or an entire embedded Elementor template — and reach deep into the reviews section itself: avatar styling, star ratings, review cards, and the review submission form all get their own dedicated controls.
-
-Because tab content runs shortcodes, a single tab definition can show different content on every product. Pair it with the free plugin's Markdown shortcode and a URL field on each product, and every item in your catalogue gets its own live Changelog or Specification tab — built once, never maintained by hand.
-
-## The result
-
-A product tabs section that looks genuinely custom-built, with reviews that finally match the rest of your store's design — and a proper accordion on mobile, not just a cramped stack.

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

@@ -1,17 +0,0 @@
-# Woo Product Filter
-
-Genuine faceted product filtering — category, attribute, brand, or tag — with instant AJAX results and clean, shareable URLs.
-
-## The problem it solves
-
-Shoppers expect to filter by colour, size, brand, or category and see results update instantly, with a URL they can bookmark or share. Building that properly — with correct product counts, dependent filters, and URLs that still work when shared or reloaded — is normally a serious development project.
-
-## How it helps
-
-Woo Product Filter gives you as many filter groups as you need, each pulling from a category, tag, brand, or any custom attribute, displayed as a list or as clickable buttons — including real colour swatches for attributes like colour. Results refresh instantly via AJAX (or update the page URL directly, your choice), term counts update live so shoppers always see what's actually available, and every filtered view has a clean, bookmarkable URL that reproduces the exact same results when shared or reloaded — even with JavaScript disabled.
-
-You can even set up dependent filters — a "Size" group that only appears once a category is chosen, for example — for a genuinely guided filtering experience.
-
-## The result
-
-The kind of faceted filtering shoppers expect from major ecommerce sites, built entirely through Elementor controls.

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

@@ -1,15 +0,0 @@
-# Woo Quick View
-
-Let shoppers preview a product without ever leaving your shop grid.
-
-## The problem it solves
-
-Every click away from a product grid is a chance for a shopper to lose momentum — and browsing a busy category means a lot of back-and-forth between the grid and individual product pages just to check details, sizes, or images.
-
-## How it helps
-
-Woo Quick View adds a button to every product in your grid that opens the full product view in a popup — sizes, images, description, add to cart — without navigating away. The button appears automatically across your product loops once switched on, including on variable products where it can replace the "Select options" link entirely. Hovering a button quietly preloads the popup content in the background, so by the time a shopper actually clicks, it feels instant.
-
-## The result
-
-A faster, more fluid browsing experience that keeps shoppers on your grid, discovering more products instead of clicking in and out of individual pages.

marketing/dotjuice-elementor-tools-pro/overview.md

@@ -1,4 +1,4 @@
-The premium widget set for serious WooCommerce stores — AJAX product filtering, a fully custom cart, quick view, custom product tabs, frontend ACF forms, and watermark-free screenshots.
+The premium widget set for serious WooCommerce stores — AJAX product filtering, a fully custom cart, quick view, custom product tabs, frontend ACF forms, an on-brand PDF viewer, and watermark-free screenshots.
 
 ### Built for stores that have outgrown the basics
 
@@ -14,6 +14,7 @@ The free Dotjuice Elementor Tools plugin covers the everyday styling gaps in Woo
 
 **Woo Custom Product Tabs** — a full rebuild of the WooCommerce product tabs area as a styleable desktop-tabs/mobile-accordion component: add unlimited custom tabs, show or hide any custom tab per product by category, tag, brand or attribute, and style deep into your reviews and rating form.
 
+**PDF Viewer** — display brochures, manuals, price lists and menus directly on your pages in a fully styleable viewer with page navigation, zoom, fullscreen, download and print, instead of a download link or the browser's own unstyleable PDF plugin.
 
 **ACF Frontend Form** — let visitors edit Advanced Custom Fields content directly from the front end, using ACF's own native form interface, no admin access required.
 

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

@@ -0,0 +1,15 @@
+Let visitors edit Advanced Custom Fields content from the front end — no admin access, no wp-admin, just a form on your page.
+
+#### The problem it solves
+
+Advanced Custom Fields is one of the most powerful tools in WordPress for structured content, but editing it has always meant going into wp-admin. For membership sites, directories, community-submitted content, or client self-service portals, that's a real barrier. Either your users need WordPress accounts with admin access, or you're manually updating their content for them.
+
+#### How it helps
+
+The widget renders ACF's native frontend form directly on your page — including repeaters, flexible content, tabs, and every other ACF field type. It can either update the current post (perfect for single-post templates where users edit their own content) or create a new post of a chosen type (ideal for front-end submissions). All the layout and field behaviour matches the WordPress dashboard, so there's no learning curve for editors.
+
+#### The result
+
+A fully functional front-end editing experience that lets contributors manage their content without ever seeing the WordPress admin. Membership sites, directories, and client portals become self-service, and you stop being the middleman for every content update.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/acf-frontend-form" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools-pro/widgets/pdf-viewer.md

@@ -0,0 +1,15 @@
+Show PDFs properly on your pages — brochures, manuals, price lists and menus, in a viewer that matches your site instead of the browser's.
+
+#### The problem it solves
+
+Putting a PDF on a WordPress page usually means one of two things: a plain download link that sends visitors away from your site into a file manager, or an iframe that hands the document to whatever PDF viewer their browser happens to have. That viewer looks different in Chrome, Safari, Firefox and Edge, carries its own grey toolbar that clashes with every design, can't be styled at all, and on several mobile browsers refuses to display inline — leaving some visitors with a blank box or a forced download.
+
+#### How it helps
+
+The PDF Viewer widget renders the document itself, page by page, as part of your page. The toolbar, buttons, page indicator, background and the page's own border and shadow are all controlled from the Elementor panel, so the viewer looks like it belongs to your site rather than the browser. Visitors get page navigation, zoom, fullscreen, download and print — and you decide which of those they get, hiding any button you'd rather not offer. Only the page being viewed is loaded, so a long brochure opens quickly, and lazy loading keeps a viewer further down the page from slowing the first paint. Files come from your media library or any external URL, and everything renders identically for every visitor.
+
+#### The result
+
+Documents that are genuinely part of your site — read in place, on brand, on every browser and device, with no download step and no jarring hand-off to a viewer you don't control.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/pdf-viewer" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

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

@@ -0,0 +1,15 @@
+A complete, from-scratch cart widget — with instant AJAX quantity updates and deep styling control, no Elementor Pro required.
+
+#### The problem it solves
+
+WooCommerce's default cart page works, but it's hard to style and even harder to embed into a custom page layout. Elementor Pro's Cart widget exists, but it's locked behind a subscription. If you want a cart that matches the rest of your design without paying for a whole builder upgrade, you're stuck hacking templates or using shortcodes.
+
+#### How it helps
+
+The widget is a fully custom cart implementation built directly on WooCommerce data. It renders its own item rows with thumbnails, product names, variation details, quantity steppers, and line totals — all updating via AJAX without a page refresh. The coupon field is built in, the totals panel shows accurate real-time calculations, and every element is individually styleable from the Elementor panel. Express checkout buttons (Google Pay, Apple Pay, etc.) are fully supported through WooCommerce's standard hooks.
+
+#### The result
+
+A cart page that looks exactly the way you want, works the way your customers expect, and costs nothing extra. No Elementor Pro subscription required, no template overrides, no compromise.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-cart" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

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

@@ -0,0 +1,15 @@
+A complete rebuild of your product tabs — styleable down to the reviews and rating form, with a built-in mobile accordion.
+
+#### The problem it solves
+
+WooCommerce's default product tabs (Description, Additional Information, Reviews) are rigid and difficult to style consistently. On mobile, they become a narrow row of links that's hard to tap, and the content panels have no responsive adaptation. Adding custom tabs with Elementor template content requires overriding the theme or writing custom code.
+
+#### How it helps
+
+The widget replaces the entire product tab system with a fully styleable component. The tab navigation sits above a styled panel box, and every element — tab labels, active states, panel backgrounds, borders, shadows — is controllable from the Elementor panel. You can hide any default WooCommerce tab and add unlimited custom tabs with WYSIWYG content or entire Elementor templates. On mobile, the tab row collapses into an accessible accordion that's easy to navigate by touch.
+
+#### The result
+
+Product tabs that actually match your design. Custom content is easy to add, mobile works naturally, and the whole component feels like a first-class part of your site rather than a WooCommerce default you're stuck with.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-custom-product-tabs" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

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

@@ -0,0 +1,15 @@
+Genuine faceted product filtering — category, attribute, brand, or tag — with instant AJAX results and clean, shareable URLs.
+
+#### The problem it solves
+
+WooCommerce's built-in product filtering is limited. You can filter by category or attribute, but combining multiple filters, preserving URL parameters, and updating the product grid without a full page reload all require custom development. Shoppers expect to narrow down products by colour, size, brand, and price — all at once — without the page flashing.
+
+#### How it helps
+
+The widget builds a complete faceted filter interface that works with any combination of taxonomies. Choose which taxonomies to include (category, tags, attributes, brands), how they display (checkboxes, dropdowns, buttons), and how they interact. When a shopper selects a filter, the product grid updates instantly via AJAX — no page reload, no scroll reset. The URL updates with clean query parameters, so filtered results are bookmarkable and shareable.
+
+#### The result
+
+A professional, fast product filtering experience that helps shoppers find exactly what they're looking for in seconds. Your conversion rate goes up because the path from "browsing" to "buying" gets shorter and smoother.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-product-filter" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

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

@@ -0,0 +1,15 @@
+The content panel that powers your Quick View popup — renders the full product detail inside an Elementor Popup.
+
+#### The problem it solves
+
+A Quick View button is only half the solution. You need a popup that shows the product details — image, price, variations, add-to-cart — in a clean, responsive overlay. Building that popup manually means duplicating product page templates, handling AJAX requests, and styling everything to match.
+
+#### How it helps
+
+This widget is designed to sit inside an Elementor Popup. Drop it into the popup canvas, and it handles everything — fetching the product data, rendering the image gallery, variations, price, and add-to-cart button, and displaying it all in a layout that matches your site. No template duplication, no custom AJAX, no styling conflicts.
+
+#### The result
+
+A complete Quick View experience in minutes. Pair it with the Woo Quick View button widget, drop this into an Elementor Popup, and your shop has a professional Quick View flow without custom development.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view-popup" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

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

@@ -0,0 +1,15 @@
+Let shoppers preview a product without ever leaving your shop grid.
+
+#### The problem it solves
+
+On a typical product catalogue page, every click is a gamble. Shoppers tap a product, wait for the product page to load, realise it's not what they want, hit the back button, and start again. This back-and-forth is slow, frustrating, and kills the browsing flow that drives impulse purchases.
+
+#### How it helps
+
+The widget adds a Quick View button to your product grid. When clicked, it opens a clean, responsive overlay showing the product's image, title, price, short description, and add-to-cart options — all without navigating away from the catalogue page. The overlay is fast, styleable, and works on every device.
+
+#### The result
+
+A browsing experience that keeps shoppers on the catalogue page, comparing products quickly and adding to cart without interruption. More products seen, fewer page loads, and a measurably smoother path to purchase.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools-pro/widgets/woo-quick-view" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md

@@ -1,24 +0,0 @@
-# Dark Mode Toggle
-
-A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
-
-## The problem it solves
-
-Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template.
-
-## How it helps
-
-Dark Mode Toggle works directly with Elementor's own global colours — no separate stylesheet, no custom code. Add the toggle anywhere on your site, choose a dark palette, and one click flips your entire site into dark mode instantly, remembered for that visitor on their next visit too.
-
-Crucially, it speaks **both** of Elementor's colour systems:
-
-- The **classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use.
-- The **newer Elementor 4.x global variables** used by the latest atomic widgets.
-
-Real sites are increasingly a mix of the two, so the toggle can remap both at once — meaning your dark mode stays complete as you build with newer Elementor widgets, not just the old ones.
-
-## The result
-
-A genuine site-wide dark mode, built entirely from colours you already control through Elementor — future-proofed for the newer widget system, with nothing extra to maintain.
-
-*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's global colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/keyword-linker.md

@@ -1,15 +0,0 @@
-# Keyword Linker
-
-Turn chosen keywords into links automatically, across every post and page — without editing content by hand.
-
-## The problem it solves
-
-Internal linking (and the occasional important external link) is one of those SEO and UX basics that's simple in theory but tedious in practice: every time you mention a term you want linked, you have to remember to add the link manually, in every post, every time.
-
-## How it helps
-
-Define a keyword once, tell it where to link, and Keyword Linker automatically turns every matching mention of that word across your site's content into a link — with control over how many times per page it should link, whether to bold the result, and whether the link opens in a new tab or carries a "nofollow" attribute.
-
-## The result
-
-Consistent internal (or external) linking across your whole site, maintained from one central list instead of hunting through old posts by hand.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/markdown-widget.md

@@ -1,29 +0,0 @@
-# Markdown Widget
-
-Embed a live Markdown file directly into your page — always showing the current version, with no copy-pasting.
-
-## The problem it solves
-
-Documentation, changelogs, and README files usually live in Markdown format in a repository, separate from your WordPress site. Keeping a WordPress page in sync with them means manually copying the content across every time it changes.
-
-## How it helps
-
-Point the Markdown Widget at any Markdown file URL — a GitHub README, a changelog, a docs page — and it fetches the file on your server and renders it as proper HTML headings, lists, code blocks, and links. Because the fetch happens server-side, it works with private and self-hosted repositories too, not just sources that permit cross-origin requests.
-
-## The result
-
-A documentation or changelog page on your WordPress site that's always current, sourced directly from wherever the Markdown file actually lives.
-
-## One document per product, without one page per product
-
-The widget also comes with a `[dj_markdown]` shortcode, which works anywhere a widget can't go — inside a WooCommerce product tab, a text editor, or a template.
-
-Instead of a fixed URL, the shortcode can read the URL from a custom field on whatever is being displayed:
-
-```
-[dj_markdown acf_field="changelog_url"]
-```
-
-Add a URL field to your products, place that single shortcode once, and every product shows its own document. A software shop can give each plugin a live Changelog tab that updates itself from the repository — no per-product page building, and nothing to maintain by hand as versions ship.
-
-It reads ACF fields where ACF is installed and falls back to standard custom fields where it isn't, so it fits whichever setup a site already uses.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/screenshot-capture.md

@@ -1,17 +0,0 @@
-# Screenshot Capture
-
-A live, always-current screenshot of any website — dropped onto your page like a normal image, with full styling control.
-
-## The problem it solves
-
-Showcasing another website — a client's project, a partner site, a "before" example — usually means manually taking a screenshot, uploading it, and remembering to update it whenever the target page changes. It's tedious, and the image goes stale the moment the source page is updated.
-
-## How it helps
-
-Screenshot Capture fetches a real screenshot of any URL you give it, on desktop, tablet, or phone dimensions, full-page or single-viewport, and displays it exactly like an image widget — with the same transform, hover, box-shadow, and filter controls you'd expect from a premium Elementor widget. Screenshots are cached automatically, so your page stays fast, and a one-click refresh in the editor lets you pull a fresh capture whenever you need one.
-
-## The result
-
-A portfolio, case study, or partner showcase page that always shows a real, current view of the site it's linking to — without a manual screenshot workflow.
-
-*Free version screenshots include a small watermark. [Dotjuice Elementor Tools Pro](../../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) removes it.*

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-add-to-cart-transform.md

@@ -1,17 +0,0 @@
-# Woo Add to Cart Transform
-
-Turn WooCommerce's plain variation dropdowns into clickable buttons — the way a modern product page should look.
-
-## The problem it solves
-
-WooCommerce's default variable-product selector is a set of `<select>` dropdowns — functional, but visually dated compared to the button and swatch-based selectors shoppers expect from modern ecommerce sites.
-
-## How it helps
-
-Woo Add to Cart Transform converts those native dropdowns into a clean row of clickable buttons, fully restyled through Elementor controls — normal, hover, and selected states, spacing, borders, and typography all included. It also cleans up a few default WooCommerce quirks along the way: a clearer "reset selection" link, and per-variation pricing that always shows so shoppers always know exactly what they're about to pay.
-
-## The result
-
-A product options selector that looks and feels current, without touching a line of custom CSS or template code.
-
-*Colour swatches for attributes like colour options are a [Pro](../../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) feature — the free version gives you styled buttons.*

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-categories-transform.md

@@ -1,15 +0,0 @@
-# Woo Categories Transform
-
-Turn WooCommerce's plain category tiles into a genuinely styleable grid.
-
-## The problem it solves
-
-When WooCommerce displays product subcategories — on your shop page, or wherever you list categories — the default markup offers very little styling control: a basic image and a title, with no easy way to add hover effects, overlays, or a polished card layout.
-
-## How it helps
-
-Woo Categories Transform restructures the category tile markup and gives you full control over it: box styling with borders and shadows, image hover transforms and filters, and a positioned content overlay for the category title — including a subtle blur effect behind the text if you want it.
-
-## The result
-
-Category tiles that look like a designed product grid, not a default WooCommerce archive.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-my-account-transform.md

@@ -1,15 +0,0 @@
-# Woo My Account Transform
-
-Give WooCommerce's My Account area the same design polish as the rest of your store.
-
-## The problem it solves
-
-The My Account page — order history, downloads, account forms — is one of the most-visited parts of any WooCommerce store, but it's usually the most visually neglected, since it's built from WooCommerce's own default markup rather than your page builder.
-
-## How it helps
-
-Woo My Account Transform applies consistent, on-brand button and link styling across the entire My Account area — buttons on forms, order actions, and download links all pick up the same styled look, in normal and hover states.
-
-## The result
-
-An account area that finally looks like it belongs to the rest of your site, not a leftover default template.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-page-numbers.md

@@ -1,15 +0,0 @@
-# Woo Page Numbers
-
-Fully styleable pagination for your shop and product archive pages.
-
-## The problem it solves
-
-WooCommerce's default "Previous / 1 2 3 / Next" pagination is functional but plain, and offers very little native styling control — especially for showing which page a shopper is currently on.
-
-## How it helps
-
-Woo Page Numbers wraps WooCommerce's pagination with dedicated styling controls: colours, borders, and spacing for the normal state, the hover state, and — separately — the currently active page, so it's always visually obvious where a shopper is in your catalogue.
-
-## The result
-
-Pagination that matches the rest of your store's design, without writing custom CSS to override WooCommerce's defaults.

marketing/dotjuice-elementor-tools/documentation/marketing/widgets/woo-taxonomy-list.md

@@ -1,15 +0,0 @@
-# Woo Taxonomy List
-
-A flexible, fully-styled term list for any taxonomy — categories, tags, product categories, or any custom taxonomy your site uses.
-
-## The problem it solves
-
-Building a "Shop by Category" footer block, a category sidebar, or a sitemap-style navigation list usually means either a rigid built-in widget with few styling options, or custom template code.
-
-## How it helps
-
-Woo Taxonomy List displays terms from any taxonomy on your site — flat (every term as one list) or hierarchical (chosen parent categories with their children nested beneath), with an optional clickable heading, term counts, custom icons, and deep styling control over every part of the list: parent items, child links, spacing, markers, and hover states.
-
-## The result
-
-A polished, on-brand category or taxonomy navigation block, built entirely through Elementor controls.

marketing/dotjuice-elementor-tools/overview.md

@@ -1,5 +1,3 @@
-# Dotjuice Elementor Tools
-
 Free, practical Elementor widgets built for real WordPress and WooCommerce sites — screenshot capture, dark mode, WooCommerce styling fixes, and small utilities that solve problems the native widgets don't.
 
 ## Why these widgets exist
@@ -26,4 +24,4 @@ Every widget in this plugin is designed to sit alongside your existing theme, El
 
 ## Free forever, with a Pro upgrade path
 
-Every widget listed here is free, permanently. [Dotjuice Elementor Tools Pro](../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) adds advanced WooCommerce widgets (AJAX product filtering, a full cart widget, quick view, custom product tabs), ACF frontend forms, and watermark-free screenshots for stores and sites that need to go further.
+Every widget listed here is free, permanently. [Dotjuice Elementor Tools Pro](../dotjuice-elementor-tools-pro/overview.md) adds advanced WooCommerce widgets (AJAX product filtering, a full cart widget, quick view, custom product tabs), ACF frontend forms, and watermark-free screenshots for stores and sites that need to go further.

marketing/dotjuice-elementor-tools/product-attribute-colours.md

@@ -14,4 +14,4 @@ Product Attribute Colours gives every term in any of your product attributes (Co
 
 A central place to define your product colours once, ready to power colour swatches anywhere on your store that supports them.
 
-*Configuring colours here is free. Displaying them as clickable swatches on your product pages uses the [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md) widget's swatch mode, which is a [Pro](../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md) feature.*
+*Configuring colours here is free. Displaying them as clickable swatches on your product pages uses the [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md) widget's swatch mode, which is a [Pro](../dotjuice-elementor-tools-pro/overview.md) feature.*

marketing/dotjuice-elementor-tools/widgets/dark-mode-toggle.md

@@ -0,0 +1,21 @@
+A one-click, site-wide dark mode switch that works with the colours you've already set in Elementor — no separate stylesheet, no custom code.
+
+#### The problem it solves
+
+Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template. That's a lot of work for something that should be simple.
+
+#### How it helps
+
+Dark Mode Toggle works directly with Elementor's own global colours — no extra setup, no duplication. Add the toggle anywhere on your site, choose a dark palette, and one click flips every page into dark mode instantly. The choice is remembered for that visitor on their next visit too.
+
+It supports **both** of Elementor's colour systems:
+- **Classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use
+- **Elementor 4.x global variables** used by the latest atomic widgets
+
+Real sites are a mix of the two, so the toggle remaps both at once — your dark mode stays complete as you build with newer Elementor widgets.
+
+#### The result
+
+A genuine site-wide dark mode, built entirely from colours you already control through Elementor, future-proofed for the newer widget system, with nothing extra to maintain.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/keyword-linker.md

@@ -0,0 +1,15 @@
+Turn chosen keywords into links automatically, across every post and page — without editing your content by hand.
+
+#### The problem it solves
+
+Manually adding internal links to every mention of a keyword across your entire site is tedious, and you'll always miss some. Over time, your internal linking grows stale, and you're leaving SEO value and reader engagement on the table.
+
+#### How it helps
+
+Add a keyword and a URL, and the widget handles the rest — every occurrence of that keyword on the page becomes a clickable link. You control which keywords to link, where they go, and whether to link every occurrence or cap the number. Bold the link text for extra visibility, and choose whether links open in a new tab or pass link equity.
+
+#### The result
+
+A fully automated internal linking system that keeps your content connected, boosts SEO, and guides readers to the pages that matter — without touching a single blog post.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/keyword-linker" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/markdown-widget.md

@@ -0,0 +1,17 @@
+Embed a live Markdown file directly into your page — always showing the current version, with no copy-pasting.
+
+#### The problem it solves
+
+Content that lives in two places inevitably drifts apart. When your documentation, changelogs, or release notes live in a markdown file on GitHub or Git, you end up manually copying content into WordPress pages, and the two versions quickly fall out of sync.
+
+#### How it helps
+
+Drop the Markdown widget anywhere on your page, give it a raw URL to any markdown file, and it renders the content in full — tables, code blocks, headings, images, everything. The content is fetched server-side (no CORS headaches) and cached for performance, so visitors always see the latest without you lifting a finger.
+
+You can also upload a markdown file directly through the WordPress Media Library if you prefer not to link to an external URL.
+
+#### The result
+
+Your WordPress content stays in sync with your source-of-truth markdown files automatically. Update the file in your repo, and the page updates — no copy-paste, no drift, no hassle.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/markdown-widget" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/screenshot-capture.md

@@ -0,0 +1,15 @@
+A live, always-current screenshot of any website — dropped onto your page like a normal image, with full styling control.
+
+#### The problem it solves
+
+Keeping screenshots up to date is a constant battle. Every time a site redesigns, you need to re-capture, re-upload, and re-insert screenshots across your pages. On top of that, standard screenshots don't capture full-page content, and they look static and lifeless on an otherwise modern site.
+
+#### How it helps
+
+Point the widget at any URL, and it generates a fresh screenshot on demand — rendered at the viewport size you choose, with optional lazy loading and full-width or constrained layouts. The screenshot is cached so repeat visits are instant, but you can clear the cache and regenerate whenever you need an updated version.
+
+#### The result
+
+A portfolio, case study, or review page that always shows the current state of the target site, without manual screenshot management. Your pages stay fresh, and you stay focused on building.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/screenshot-capture" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform.md

@@ -0,0 +1,15 @@
+Turn WooCommerce's plain variation dropdowns into clickable buttons — the way a modern product page should look.
+
+#### The problem it solves
+
+WooCommerce's default variation swatches are dropdown selects. They're hard to style, hard to scan, and they don't give shoppers an immediate sense of their options. On mobile especially, dropdowns bury choices behind a tap, slowing down the purchase decision.
+
+#### How it helps
+
+The widget replaces variation dropdowns with a grid of clickable buttons or colour swatches that shoppers can see and compare at a glance. Every option is visible, every click instantly updates the price and availability, and the whole thing inherits your site's styling — no theme conflicts, no clunky workarounds.
+
+#### The result
+
+A product page that looks and feels like a modern ecommerce store. Shoppers see their options immediately, and the path from "I want that" to "add to cart" is as short as a single click.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-add-to-cart-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-categories-transform.md

@@ -0,0 +1,15 @@
+Turn WooCommerce's plain category tiles into a genuinely styleable grid.
+
+#### The problem it solves
+
+WooCommerce's default category display is rigid — a simple list of linked images that's hard to customise without overriding template files. If you want your category tiles to match the rest of your design, you're fighting against the theme or writing custom CSS that breaks on the next update.
+
+#### How it helps
+
+The widget takes WooCommerce's category output and wraps it in a fully styleable grid. Control padding, background, borders, shadows, typography, and hover effects — all from the Elementor panel, no CSS required. The grid is responsive by default, so it looks good on every screen size.
+
+#### The result
+
+A category page that matches the rest of your site's design perfectly. Category tiles become a design asset rather than a layout problem, and you control every aspect of their appearance from the editor.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-categories-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-my-account-transform.md

@@ -0,0 +1,15 @@
+Give WooCommerce's My Account area the same design polish as the rest of your store.
+
+#### The problem it solves
+
+The WooCommerce My Account page is notoriously difficult to style. Its default layout is a plain list of links with basic content panels, and most themes leave it untouched — creating a jarring disconnect between your beautifully designed storefront and the account area your customers use every time they log in.
+
+#### How it helps
+
+The widget restructures the entire My Account dashboard into a clean, styleable layout. Navigation tabs, content panels, and forms all get the same level of design control you'd expect from Elementor — typography, borders, spacing, colours, and hover states. No template overrides, no child theme hacks.
+
+#### The result
+
+A cohesive customer experience from shop to account. Your customers stay in a polished, trustworthy environment whether they're browsing products, checking orders, or updating their details.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-my-account-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-page-numbers.md

@@ -0,0 +1,15 @@
+Fully styleable pagination for your shop and product archive pages.
+
+#### The problem it solves
+
+WooCommerce's default pagination is a bare-bones previous/next setup with numbered page links. It works, but it's nearly impossible to style to match a modern Elementor-built site. You end up with a shop that looks great until you scroll to the bottom, where the pagination sticks out like a sore thumb.
+
+#### How it helps
+
+The widget gives you complete control over the pagination appearance — font size, colours, spacing, border radius, hover states, and active page styling. It works with any number of pages and adapts responsively to screen size. The pagination numbers are clear and easy to tap on mobile, so shoppers can navigate your catalogue without frustration.
+
+#### The result
+
+A polished shop from first product to last page. Pagination becomes part of your design, not an afterthought, and shoppers can browse your full catalogue without hitting a design dead end.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-page-numbers" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-products-transform.md

@@ -0,0 +1,15 @@
+Add hover effects, image rollovers, and colour swatches to an Elementor Pro product grid.
+
+#### The problem it solves
+
+Elementor Pro's Products widget is powerful, but its product tiles are static — a thumbnail, a title, a price, and an add-to-cart button. There's no built-in way to add hover animations, image swaps, or swatch previews that make a catalogue feel interactive and modern.
+
+#### How it helps
+
+The widget enhances any Elementor Pro product grid with configurable hover effects — scale the image, fade in a content overlay, swap the main image for an alternate on hover, or show colour swatches that let shoppers preview variations without leaving the grid. All effects are controlled from the Elementor panel, no JavaScript required.
+
+#### The result
+
+An interactive, engaging product catalogue that invites browsing. Shoppers see more product detail without clicking through, and your store feels premium and polished from the first scroll.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-products-transform" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

marketing/dotjuice-elementor-tools/widgets/woo-taxonomy-list.md

@@ -0,0 +1,15 @@
+A flexible, fully-styled term list for any taxonomy — categories, tags, product categories, or any custom taxonomy your site uses.
+
+#### The problem it solves
+
+WordPress and WooCommerce generate category and taxonomy lists in their own way, and they're notoriously hard to style without overriding template files. Whether you're building a footer navigation, a sidebar filter, or a sitemap-style directory, you end up wrestling with wp_list_categories() output or writing custom loops.
+
+#### How it helps
+
+The widget displays terms from any taxonomy as a clean, styleable list. Choose between a flat list of all top-level terms or a hierarchical view with parent terms and their children. Control spacing, typography, icons, indentation, and whether to show term counts. The parent terms are selectable via a searchable dropdown, so you can pick exactly which sections to show even on large sites with hundreds of categories.
+
+#### The result
+
+A taxonomy navigation that looks exactly the way you want, anywhere on your site. No template overrides, no custom queries, no styling headaches — just the terms you need, presented your way.
+
+<a target="_blank" rel="noopener noreferrer" href="https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/woo-taxonomy-list" class="dj-docs-button" style="display: inline-block; padding: 14px 28px; background-color: var(--e-global-color-text); color: var(--e-global-color-primary); text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 16px; margin-top: 8px;">View full documentation</a>

site/docs/.gitkeep

@@ -1 +0,0 @@
-This folder is overlaid by the bind-mounted ../../docs/ directory at runtime — see docker-compose.yaml.