Initial commit: Docusaurus docker stack and docs

docs/dotjuice-elementor-tools/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Elementor Tools (Free)",
+  "position": 2,
+  "link": { "type": "doc", "id": "dotjuice-elementor-tools/getting-started" }
+}

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

@@ -0,0 +1,42 @@
+# Getting Started
+
+## Requirements
+
+Dotjuice Elementor Tools requires **Elementor** (the free page builder plugin) to be installed and active. It doesn't require WooCommerce or ACF, but several widgets only appear once those plugins are active too — see [Finding your widgets](#finding-your-widgets) below.
+
+## Finding your widgets
+
+Open any page in the Elementor editor and look for the **Dotjuice** category in the widgets panel on the left. Every widget from this plugin lives there.
+
+If a widget you expect to see is missing:
+
+- **All WooCommerce-related widgets** (anything with "Woo" in the name, plus **Woo Taxonomy List**) only appear once **WooCommerce** is installed and active — even Woo Taxonomy List, which can be used for non-shop content like blog categories, only shows up with WooCommerce present. If you want a general-purpose taxonomy list widget on a site without WooCommerce, install WooCommerce or get in touch with support.
+- The **Image Carousel Transform** widget only has a visible effect on pages that also use Elementor Pro's native Image Carousel widget elsewhere.
+
+## Where the plugin's settings live
+
+In your WordPress admin menu, under **Dotjuice**:
+
+- **Elementor Tools** — the plugin's own dashboard (Getting Started, Widgets overview, System Status, Support)
+- **Screenshot API** — required setup for the Screenshot Capture widget (see [Screenshot API Settings](screenshot-api-settings.md))
+- **WooCommerce Hacks** — account page tweaks and product attribute colours (only visible with WooCommerce active — see [WooCommerce Account Settings](woocommerce-account-settings.md) and [Product Attribute Colours](product-attribute-colours.md))
+
+## Recommended first steps
+
+1. If you plan to use **Screenshot Capture**, set up your API key first — see [Screenshot API Settings](screenshot-api-settings.md). The widget won't display anything without it.
+2. If you run a WooCommerce store, review [WooCommerce Account Settings](woocommerce-account-settings.md) — most stores end up wanting at least one of these tweaks (hiding unused account tabs, excluding a category from the shop page).
+3. Browse the widget guides below for the ones relevant to your build.
+
+## Widget guides
+
+- [Screenshot Capture](widgets/screenshot-capture.md)
+- [Dark Mode Toggle](widgets/dark-mode-toggle.md)
+- [Keyword Linker](widgets/keyword-linker.md)
+- [Markdown Widget](widgets/markdown-widget.md)
+- [Image Carousel Transform](widgets/image-carousel-transform.md)
+- [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md)
+- [Woo Categories Transform](widgets/woo-categories-transform.md)
+- [Extended Product Loop](widgets/extended-product-loop.md)
+- [Woo My Account Transform](widgets/woo-my-account-transform.md)
+- [Woo Page Numbers](widgets/woo-page-numbers.md)
+- [Woo Taxonomy List](widgets/woo-taxonomy-list.md)

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

@@ -0,0 +1,26 @@
+# Product Attribute Colours
+
+**Dotjuice → WooCommerce Hacks → Attribute Colours** (only visible with WooCommerce active)
+
+## What this does
+
+Lets you assign a hex colour to each term of any product attribute on your store (Colour, Material, or any custom attribute you've created). This is a configuration page — see the note below about where these colours are actually displayed.
+
+## Setting a colour
+
+1. Choose the attribute you want to configure from the dropdown at the top (e.g. "Colour").
+2. Every term for that attribute is listed in a table, each with a colour picker and a matching hex code field — you can use either; they stay in sync.
+3. Enter or pick a colour for each term you want to configure. A "Clear" button next to each row removes its colour.
+4. Save.
+
+## Sharing one colour across several terms
+
+If several terms should display as the same swatch colour (for example, "Ash", "Carbon Grey", and "Slate" all rendering as the same grey), just give them the identical hex value. The table shows a "Shared" indicator next to terms that currently share a colour with others, so you can see at a glance which terms are grouped together.
+
+## Sorting the list
+
+Use the **Sort by** control (Name or Hex Value) to reorder the table while you work — sorting by hex value groups terms with the same colour together visually, useful for checking your "shared colour" groupings are set up the way you intended.
+
+## ⚠ Where these colours actually appear
+
+This page only **stores** the colour assignments — it doesn't display them anywhere on its own. To show them as clickable colour swatches on your product pages, you need the **Woo Add to Cart Transform** widget's "Show Colour Swatches" option, which is a [Dotjuice Elementor Tools Pro](../dotjuice-elementor-tools-pro/getting-started.md) feature. In the free version, you can fully configure your colours here ready for when you upgrade, but your product options will display as plain buttons rather than colour swatches until Pro is active.

docs/dotjuice-elementor-tools/screenshot-api-settings.md

@@ -0,0 +1,29 @@
+# Screenshot API Settings
+
+**Dotjuice → Screenshot API**
+
+This page configures the credentials the [Screenshot Capture](widgets/screenshot-capture.md) widget needs to function, and lets you manage the local cache of captured screenshots.
+
+## Setting up your API key
+
+1. Sign up for a Screenshot Machine account and get an API key (a link to their site is provided on the settings page).
+2. Paste your **API Key** into the field and save. A warning banner at the top of the page will disappear once a key is saved.
+3. If your Screenshot Machine account has a **Secret Key** configured for additional request security, enter it in the optional **Secret Key** field too — most accounts don't need this.
+
+Until an API key is entered, every Screenshot Capture widget on your site will fail to display an image.
+
+## Cache management
+
+This section shows:
+
+- How many screenshots are currently cached
+- Their total size on disk
+- Where they're stored (inside your uploads folder)
+- A **Clear All Cached Screenshots** button
+
+Clearing the cache deletes every cached screenshot file and removes the corresponding entries from your Media Library. Every widget will re-capture its screenshot (spending a fresh API call) the next time its page is viewed. Use this if you've made site-wide changes to target pages and want everything refreshed at once, rather than refreshing screenshots one at a time from the editor.
+
+## Things to know
+
+- Every screenshot capture — whether from a visitor loading an uncached page, or your own manual refresh — counts as one billed API call against your Screenshot Machine plan. Keep this in mind if you have many Screenshot Capture widgets with a low or zero Cache Limit.
+- The Secret Key field is optional and only relevant if you've specifically enabled request signing in your Screenshot Machine account settings.

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

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

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

@@ -0,0 +1,34 @@
+# Dark Mode Toggle
+
+Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
+
+## How it works
+
+This widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps Elementor's four Global Color variables (Primary, Secondary, Text, Accent) to the dark-mode values you configure on the widget. It remembers the visitor's choice, so it stays applied on their next visit.
+
+**Important:** this widget only changes colors for elements styled using Elementor's Global Colors. If part of your design uses a hardcoded color instead of a Global Color, that part won't respond to dark mode.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Light Mode Icon** | Moon icon | The icon shown when the site is currently in light mode (click to switch to dark). |
+| **Dark Mode Icon** | Sun icon | The icon shown when the site is currently in dark mode (click to switch back to light). |
+| **Icon Color / Hover Color** | — | Styling for the toggle icon itself. |
+| **Icon Size** | — | Responsive sizing for the toggle icon. |
+
+## Dark Mode Colors (Style tab)
+
+Four color fields — **Primary**, **Secondary**, **Text**, and **Accent** — define what your site looks like once dark mode is switched on. Set each to the dark equivalent of the matching Elementor Global Color. If you leave any of these blank, a sensible built-in dark default is used instead.
+
+## Setting it up
+
+1. Add the widget somewhere visible and consistent — a header or footer works well, so it's reachable from every page.
+2. Under the Style tab, set your four Dark Mode Colors to a palette that works well as a dark theme.
+3. Save and test: click the toggle on the live site and check that the elements using your Global Colors switch correctly.
+
+## Good to know
+
+- **Whichever toggle instance was clicked most recently determines the colors used site-wide.** If you place more than one Dark Mode Toggle widget with different color settings, the last one clicked "wins" for the whole site until another is clicked. For a single consistent dark mode, use the same color settings on every instance, or better, only place the widget in one shared location like your header.
+- You can deep-link directly into dark mode by adding `?dark=0` to any URL (or `?dark=1`, `?dark=2`, etc. if there's more than one toggle instance on that specific page) — useful for sharing a dark-mode preview link.
+- The dark mode choice is remembered per browser (not per WordPress account), so it persists across visits on the same device but doesn't follow a visitor between devices.

docs/dotjuice-elementor-tools/widgets/extended-product-loop.md

@@ -0,0 +1,31 @@
+# Extended Product Loop
+
+Found in the Elementor panel under **Dotjuice → Extended Product Loop**. Requires WooCommerce.
+
+## How it works
+
+This widget renders its own product grid — separate from Elementor's or WooCommerce's native product loop widgets. It shows all your regular published products, plus an extra tile for every individual product variation that has a value set for the attribute you choose. Each tile shows that variation's own image, name, and price, linking through to the parent product page.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Attribute Name** | `pa_color` | The attribute taxonomy to pull variations from, using its technical slug (WooCommerce attributes are typically prefixed `pa_`, e.g. `pa_color`, `pa_size`). |
+
+There's no Style tab on this widget — the grid uses WooCommerce's standard product-grid CSS classes, so it inherits your theme's existing product grid styling.
+
+## What to expect in the grid
+
+If a product has three variations matching your chosen attribute (say, three colours), it can appear as **up to four tiles**: the parent product once, plus one tile per matching variation. This is intentional — it's what makes a "shop by colour" browsing experience possible — but it's worth knowing in advance so it doesn't look like a duplication bug when you first set it up.
+
+**This widget's tiles show image, name, and price only** — no Add to Cart button, sale badges, or star ratings, since the grid is built independently of WooCommerce's standard loop template. Link the tile through to the product page for the full buying experience.
+
+## Setting it up
+
+1. Decide which attribute you want to browse by (commonly colour or size) and find its technical slug — check **Products → Attributes** in your WordPress admin, or look at the attribute's edit URL.
+2. Enter that slug into **Attribute Name**.
+3. Place the widget on a page and confirm the variation tiles appear as expected.
+
+## Good to know
+
+- If the attribute slug you enter doesn't exist on your store, the widget quietly falls back to showing only your regular product list — no error is shown, so double-check your spelling if variation tiles aren't appearing.

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

@@ -0,0 +1,33 @@
+# Keyword Linker
+
+Found in the Elementor panel under **Dotjuice → Keyword Linker**.
+
+## How it works
+
+This widget doesn't display anything visible on the page itself — it works in the background, scanning your post and page content for the keywords you've defined and converting matching occurrences into links. Add it once to a template that renders post content (a Single Post or Single Page template), and it applies to every post/page using that template.
+
+Matching happens inside paragraph and heading text only — text inside list items, tables, or other structural elements isn't scanned. Matching is whole-word and case-insensitive, and any text that's already part of an existing link is left alone.
+
+## Content settings — Keyword Links
+
+A repeater list; add one row per keyword you want linked.
+
+| Setting | What it does |
+|---|---|
+| **Keyword** | The exact word or phrase to search for. Matches are whole-word only (so "cat" won't match "category") and case-insensitive. |
+| **Link** | The destination URL, with options to open in a new tab and/or add a "nofollow" attribute. |
+| **Bold** | Makes the generated link bold. |
+| **Link All Occurrences** | If on, every matching occurrence on the page gets linked. If off, only the first few (see Max Links below). |
+| **Max Links** | Only shown when "Link All Occurrences" is off. The maximum number of times this specific keyword gets linked per page (1–50, default 3). |
+
+## Setting it up
+
+1. Add the widget to a template that renders your post/page content (typically your Single Post or Single Page Elementor template — this is a "Theme Builder" style template in Elementor, not a specific individual post).
+2. Add a row for each keyword you want automatically linked, with its destination URL.
+3. Save and visit a post that contains one of your keywords — it should now appear as a link.
+
+## Good to know
+
+- **This widget needs to sit on a template that actually renders post content** — placing it on a page with no post content being displayed does nothing, since it works by intercepting WordPress's content output.
+- The first occurrence of a keyword found in a matching heading or paragraph keeps its original capitalization in the resulting link — you don't need to match the exact case when defining the keyword.
+- Links are only ever added inside `<p>` and heading tags — if your target text lives inside a list, table, or custom block markup, it won't be matched.

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

@@ -0,0 +1,27 @@
+# Markdown Widget
+
+Found in the Elementor panel under **Dotjuice → Markdown**.
+
+## How it works
+
+The widget fetches the Markdown file you specify directly in the visitor's browser and converts it to HTML on the fly. Because the fetch happens in the browser, the source file needs to allow cross-origin requests — raw file URLs from GitHub (`raw.githubusercontent.com`) work well; a URL that isn't set up to allow this will fail to load, with a note in the browser's developer console.
+
+## Content settings
+
+| Setting | What it does |
+|---|---|
+| **Markdown File URL** | The direct URL to the raw Markdown file (not a formatted preview page — for GitHub, use the "Raw" file link, not the normal file view). |
+
+## Styling
+
+| Setting | What it does |
+|---|---|
+| **Text Color** | Sets the base text color for the rendered content. |
+
+The Markdown is converted to plain semantic HTML (headings, paragraphs, lists, code blocks, links) with no additional classes — headings, code blocks, and other elements will take on whatever styling your theme already applies to those standard HTML tags. If you want the rendered Markdown to look a specific way, style it through your theme's typography settings for headings, lists, and `<pre>`/`<code>` blocks, since this widget doesn't apply its own detailed formatting beyond the base text color.
+
+## Good to know
+
+- **Use the raw file URL, not a formatted view.** For a GitHub file, click "Raw" on the file page and use that URL — the normal GitHub file-viewer page returns an HTML page, not the Markdown source, and won't render correctly.
+- The content loads via JavaScript after the page loads, so it won't appear in "view source" — this is expected and doesn't affect what visitors see.
+- If nothing appears, check your browser's developer console: the two most common causes are an incorrect URL (view page instead of raw file) or the source not allowing cross-origin requests from your domain.

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

@@ -0,0 +1,40 @@
+# Screenshot Capture
+
+Found in the Elementor panel under **Dotjuice → Screenshot Capture**.
+
+## Before you start: set up your API key
+
+This widget uses the Screenshot Machine API to capture screenshots, which requires a free or paid API key from their service. Go to **Dotjuice → Screenshot API** in your WordPress admin and enter your key — the widget won't display anything until this is done. See [Screenshot API Settings](../screenshot-api-settings.md) for full setup details.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **URL** | — | The web address to screenshot. |
+| **Refresh Screenshot** button | — | Editor only. Forces a brand-new capture immediately, bypassing the cache — use this after the target page has changed. |
+| **Full Page** | Off | Captures the entire scrollable page rather than just the visible viewport. |
+| **Cache Limit (days)** | 0 | How many days a captured screenshot stays cached before it's automatically re-captured on a visitor's page load. `0` means it's captured once and never automatically refreshed — use the Refresh button or clear the cache manually (see below) to update it. |
+| **Device** | Desktop | Desktop, Tablet, or Phone — captures at that device's typical screen dimensions. |
+| **Zoom** | 100% | Zoom level applied during capture, from 50% to 200%. |
+| **Click Element** | Empty | A CSS selector (or comma-separated list) to click before the screenshot is taken — useful for dismissing a cookie banner or opening a menu first. |
+| **Selector** | Empty | Crop the capture to a specific element on the target page, given as a CSS selector. |
+| **Delay (ms)** | 3000 | How long to wait after the page loads before capturing — increase this for pages with animations or content that loads in after the initial page load. |
+
+## Display settings (Style tab)
+
+- **Width / Height** — the maximum size of the screenshot display area.
+- **Website Link** — if set, clicking the screenshot goes to this URL instead of the page that was captured.
+- **Show Lightbox** — opens the screenshot in a lightbox on click (only applies if Website Link is empty). Multiple Screenshot Capture widgets on the same page with this enabled become one swipeable lightbox gallery together.
+- **Scroll Speed** — for full-page captures only: how fast the image auto-scrolls to reveal the whole page (lower is faster).
+- **Border**, **Box Shadow**, **CSS Filters**, and a **Transform** popover (rotate, scale, offset, opacity) are available for both the normal and hover states, exactly like Elementor's native Image widget.
+
+## Managing your screenshot cache
+
+On the **Dotjuice → Screenshot API** settings page, a Cache Management panel shows how many screenshots are currently cached and their total size, with a **Clear All Cached Screenshots** button to force every screenshot on your site to be re-captured on next view. Screenshots are stored in your Media Library, so clearing the cache removes them from there too.
+
+## Good to know
+
+- **Every capture uses one API call**, whether triggered by a visitor's first view of an uncached page, or the editor's Refresh button. With Cache Limit set to 0 (the default), a given screenshot is only captured once — subsequent visitors see the cached version until you manually refresh it or your Cache Limit expires it.
+- **The first visitor to an uncached page waits for the live capture** to complete before the page finishes loading. If you're about to publish a page with several uncached screenshots, visit it yourself first (or use the editor's Refresh button on each one) so the cache is warm before real visitors arrive.
+- The editor never triggers an automatic capture while you're designing, specifically to avoid spending API calls while you work — you'll see a placeholder instead until you click Refresh.
+- Changing **Cache Limit**, **Delay**, **Click Element**, or **Selector** on an already-cached screenshot won't take effect until you use the Refresh button — these settings affect how a new capture is taken, not the one already cached.

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

@@ -0,0 +1,31 @@
+# Woo Add to Cart Transform
+
+Found in the Elementor panel under **Dotjuice → Woo Add To Cart transform**. Requires WooCommerce.
+
+## How it works
+
+Place this widget on your single product template (typically inside your Elementor Theme Builder's Single Product template, near where the product form appears). It finds WooCommerce's native variation `<select>` dropdowns on that page and converts them into a row of clickable buttons.
+
+## Content settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Swap to Buttons** | Off | Turns on the dropdown-to-button conversion. Leave this off if you want to keep native WooCommerce dropdowns but still use the price/description styling controls below. |
+| **Show Colour Swatches** | Off | **Pro feature.** In the free version, this setting has no visible effect — buttons always display as text. Colour swatches (each button showing its actual colour) require [Dotjuice Elementor Tools Pro](../../../../dotjuice-elementor-tools-pro/documentation/marketing/overview.md). |
+| **Hide Labels** | Off | Hides the attribute name label (e.g. "Colour", "Size") next to each button group. |
+| **Button Spacing** | 10px | Spacing between buttons within a group. |
+
+## Styling
+
+- **Buttons** — Normal and Selected states, each with text colour, background colour, typography, border, box shadow, and padding, plus a shared border radius.
+- **Text** — typography and colour for the product price and short description.
+- **Swatch** — sizing, padding, and border controls for colour swatches (only visible in the Pro version, where swatches actually render).
+
+## Setting up colour swatches (Pro)
+
+Even in the free version, you can pre-configure your swatch colours ready for when you upgrade: go to **Dotjuice → WooCommerce Hacks → Attribute Colours** and assign a colour to each attribute term (e.g. Red, Blue, Green). See [Product Attribute Colours](../product-attribute-colours.md) for the full guide. Once Pro is active and "Show Colour Swatches" is enabled, these assigned colours display automatically.
+
+## Good to know
+
+- **Two WooCommerce-wide behaviours are always active once this plugin and WooCommerce are both installed**, regardless of whether you've placed this widget on any page: WooCommerce's default "Clear" reset-selection link is replaced with this widget's version, and per-variation pricing is always shown (rather than only appearing when variations have different prices). These are intentional store-wide improvements, not something you need to configure per page.
+- Because the button styling targets WooCommerce's variation markup directly rather than being scoped to just this widget, if a page shows more than one product form (for example, a quick-view popup alongside the main product), the same button styling applies to all of them.

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

@@ -0,0 +1,36 @@
+# Woo Categories Transform
+
+Found in the Elementor panel under **Dotjuice → Woo Categories Transform**. Requires WooCommerce.
+
+## How it works
+
+Place this widget on any page that shows WooCommerce's product category tiles — typically your Shop page when it's set to display subcategories. It restructures the tile markup into styleable wrapper sections and applies the styling you configure below to every category tile on that page.
+
+This widget has no Content tab — every setting lives under Style.
+
+## Box styling
+
+Border style, colour, width, radius, background colour, and padding for the overall category tile.
+
+## Image styling
+
+- **Overflow** — controls whether hover transforms are clipped to the image area or allowed to spill outside it.
+- Border, radius, and — for Normal and Hover states separately — a Transform popover (rotate, scale, offset, opacity), Box Shadow, and CSS Filters.
+
+## Content styling
+
+- **Hide Product Count** — the product count badge is hidden by default; turn this off if you'd like the count shown.
+- **Position** — Relative (sits naturally below the image) or Absolute (overlays directly on top of the image, positioned at the bottom).
+- Font colour, background colour, an optional background blur effect (for a frosted-glass look behind overlaid text), padding, border, and box shadow.
+
+## Setting it up
+
+1. Add the widget to your Shop page (or wherever your category tiles are displayed).
+2. For an overlay-style card, set Content Position to Absolute and add a background colour with some transparency, or enable the blur effect for a frosted look.
+3. Configure hover effects under Image styling for a polished interactive feel.
+
+## Good to know
+
+- **Two things happen automatically once this plugin and WooCommerce are both active**: the tile markup restructuring (extra wrapper elements around each category tile) happens site-wide regardless of whether this widget is placed anywhere, but the actual **styling** only applies once you've placed the widget on the page showing those tiles.
+- Styling isn't scoped to a single widget instance — placing the widget once styles every category tile shown on that page.
+- The product count badge is **hidden by default** — if you expect to see a count and it's missing, check the "Hide Product Count" setting.

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

@@ -0,0 +1,23 @@
+# Woo My Account Transform
+
+Found in the Elementor panel under **Dotjuice → Woo My Account Transform**. Requires WooCommerce.
+
+## How it works
+
+Place this widget on your My Account page template (typically inside your Elementor Theme Builder's My Account template). It detects buttons and links within the account content area and applies the styling you configure below.
+
+## Styling
+
+- **Button Style** — Normal and Hover states, each with text colour, background colour, border, border radius, and box shadow, plus shared typography and padding. Applies to account action buttons (e.g. form submit buttons, "Pay", "Cancel").
+- **Link Style** — typography, plus Normal and Hover text colour, applied to order-table links: download links, product name links, and order number links.
+
+## Setting it up
+
+1. Add the widget anywhere inside your My Account page template.
+2. Configure your button and link colours to match your site's branding.
+3. Visit the My Account page while logged in (as a real customer account, since this only applies within the actual account content) to check the styling.
+
+## Good to know
+
+- **Styling applies across the whole My Account area on that page, not just near the widget** — you only need to place this widget once on your My Account template for it to take effect everywhere within it.
+- You won't see live account content while editing in Elementor — the editor shows a placeholder instead, since there's no real logged-in account context inside the editor. Preview your changes by viewing the actual My Account page on the front end while logged in.

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

@@ -0,0 +1,29 @@
+# Woo Page Numbers
+
+Found in the Elementor panel under **Dotjuice → Woo Page Numbers**. Requires WooCommerce.
+
+## How it works
+
+Place this widget on your Shop page or any product archive/category template, where it will show. It wraps WooCommerce's built-in pagination and applies the styling you configure.
+
+This widget only shows real pagination when there's more than one page of results to paginate through — on a page with too few products to need pagination, it will render an empty space.
+
+## Styling
+
+There's no Content tab — every setting lives under Style:
+
+- **Alignment** — left, centre, or right.
+- **Typography** — font styling shared across all pagination links.
+- **Normal / Hover** — text and background colour for regular page number links.
+- **Active** — text and background colour for the current page indicator (styled separately, since it's not a clickable link).
+- **Border** and **Padding** — spacing and border styling for each page number.
+
+## Setting it up
+
+1. Add the widget to your Shop page or a product category archive template.
+2. Style the Normal, Hover, and Active states to match your site.
+3. Preview on the live site with enough products to trigger real pagination — the Elementor editor shows a fixed example (pages 1–4) purely so you can preview your styling, which won't match your site's real page count.
+
+## Good to know
+
+- **The Elementor editor always shows a sample 4-page pagination** so you have something to style against — this is a preview aid only, not a reflection of your real page count. Check the actual front end to see your real pagination.

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

@@ -0,0 +1,61 @@
+# Woo Taxonomy List
+
+Found in the Elementor panel under **Dotjuice → Woo Taxonomy List**.
+
+**Note:** despite the "Woo" name, this widget works with any public taxonomy on your site — product categories, blog categories, tags, or a custom taxonomy — not just WooCommerce. It currently only appears in the widgets panel when WooCommerce is active; if you'd like to use it purely for blog categories on a site without WooCommerce, get in touch with support.
+
+## Two display modes
+
+**Flat mode** lists every term in the chosen taxonomy in one simple list — good for a straightforward "browse all categories" block.
+
+**Hierarchical mode** (the default) lets you choose specific parent terms, and displays each one with its child terms nested beneath — good for a "Shop by Category" style block where you want to group related subcategories under their parent.
+
+## Content settings — Widget Heading
+
+| Setting | What it does |
+|---|---|
+| **Heading Text** | An optional title shown above the list. |
+| **Heading URL** | If set (and Heading Text is filled in), makes the heading a clickable link. |
+| **Heading Tag** | The HTML tag used for the heading (H2–H6, or a plain div), for correct document structure. |
+
+## Content settings — List Settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Taxonomy** | Product categories | Which taxonomy to pull terms from — every public taxonomy registered on your site is available here. |
+| **Show All Terms (Flat)** | Off | Switches to flat mode (see above). |
+| **Parent Terms** | — | Hierarchical mode only. Choose which parent term(s) to display, each with its children listed beneath. |
+| **Show Parent Term** | On | Hierarchical mode only. Shows the parent term itself as a clickable heading above its children. |
+| **Max Depth** | 1 level | Hierarchical mode only. How many levels of nested children to show beneath each parent — 1, 2, 3, or all levels. |
+| **Hide Empty Terms** | On | Excludes terms with no posts or products assigned to them. |
+| **Order By** | Name | Name, Count, Slug, or Term ID. |
+| **Order** | Ascending | Ascending or descending. |
+
+## Content settings — Display
+
+| Setting | What it does |
+|---|---|
+| **Show Term Count** | Adds a post/product count in brackets after each term name. |
+| **List Icon** | An optional icon (as a CSS icon class, e.g. from Font Awesome) shown before each term link. |
+
+## Styling
+
+Extensive styling is available, organised into: **Heading** (typography, colour, spacing), **List Container** (padding, background, border, shadow), **Parent Items** and **Parent Link Text** (hierarchical mode only), **List Items** (marker style — none, disc, circle, square, numbers, or letters — spacing, indentation, background, and hover background), **Link Text** (typography, colour, hover underline), and **List Icon** (size, colour, spacing) if you've set one.
+
+## Setting it up
+
+**For a flat list** (e.g. "all blog categories"):
+1. Choose your Taxonomy.
+2. Turn on **Show All Terms (Flat)**.
+3. Style as needed.
+
+**For a grouped list** (e.g. "Shop by Category" with subcategories):
+1. Choose your Taxonomy.
+2. Leave Flat mode off, and select your parent term(s) in **Parent Terms**.
+3. Set **Max Depth** to however many levels of children you want shown.
+4. Style as needed.
+
+## Good to know
+
+- **If your configuration doesn't resolve to any terms** (for example, hierarchical mode with no parent terms selected yet), the widget shows a helpful explanatory message while you're editing in Elementor — but shows nothing at all on the live front end. Always double-check your configuration is complete before publishing.
+- The **Parent Terms** picker updates automatically to show terms from whichever taxonomy you've selected, but this live update only works while you're inside the Elementor editor.

docs/dotjuice-elementor-tools/woocommerce-account-settings.md

@@ -0,0 +1,32 @@
+# WooCommerce Account Settings
+
+**Dotjuice → WooCommerce Hacks → General** (only visible with WooCommerce active)
+
+## Settings
+
+| Setting | Default | What it does |
+|---|---|---|
+| **Hide Dashboard Tab** | Off | Removes the "Dashboard" entry from the My Account menu. |
+| **Hide Downloads Tab** | Off | Removes the "Downloads" entry from the My Account menu — useful for stores that don't sell downloadable products. |
+| **Auto Redirect to Orders** | Off | Sends customers straight to their Orders page instead of the generic Account dashboard when they visit My Account. **Requires "Hide Dashboard Tab" to also be enabled** — see below. |
+| **Redirect After Logout** | Off | Sends customers to your site's homepage after logging out, instead of WooCommerce's default behaviour. |
+| **Exclude Product Categories from Shop** | None selected | A checkbox tree of every product category on your store. Categories you check are hidden from your main Shop page and from that category's own archive page. |
+
+## ⚠ "Auto Redirect to Orders" needs "Hide Dashboard Tab" enabled too
+
+These two settings work together — Auto Redirect to Orders only takes effect when Hide Dashboard Tab is also switched on. If you enable Auto Redirect on its own and it doesn't seem to do anything, check that Hide Dashboard Tab is enabled as well.
+
+## About excluding categories
+
+Excluding a category here hides its products from:
+
+- Your main Shop page
+- That category's own archive page
+
+It does **not** hide those products from search results or from other custom product displays elsewhere on your site (like related products, or a widget built to specifically show that category). This is intentional — it's meant for keeping a category out of general browsing, not hiding it from your store entirely.
+
+## Setting it up
+
+1. Enable whichever toggles match what you want changed.
+2. If you want customers redirected straight to Orders, enable both **Hide Dashboard Tab** and **Auto Redirect to Orders** together.
+3. For category exclusions, check the categories you want hidden from your Shop page in the tree, then save.