jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs pass: add widget screenshots and expand the user guides

Browse Source 
Add 21 screenshots across the Elementor Tools docs and rework the pages
around them: clearer opening lines, settings tables that state defaults,
and callouts for the parts people trip over. Also refreshes the Pro
getting-started, Custom Product Tabs and Product Filter pages, plus the
matching marketing copy.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Johan
2026-07-31 06:13:57 +00:00
parent 1d9b26b108
commit f4838865c9
43 changed files with 672 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,61 +1,90 @@
# Woo Taxonomy List
Cascading term lists from any taxonomy — a "Shop by Category" block, or a plain list of blog categories.
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.
![A grouped category list on the front end](../assets/img/woo-taxonomy-list-frontend.png)
*Screenshot: a sidebar "Shop by Category" block showing two parent terms as headings with their child terms listed and counts in brackets.*
:::note Not just for WooCommerce
Despite the name, this widget works with **any public taxonomy** — product categories, blog categories, tags, or a custom taxonomy. It only appears in the widgets panel when WooCommerce is active, so on a site without WooCommerce it isn't available even for blog categories. Get in touch with support if you need it standalone.
:::
## 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 pick specific parent terms and shows each with its children nested beneath — a "Shop by Category" block grouping related subcategories under their parent.
**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.
**Flat mode** lists every term in the taxonomy in one simple list — a straightforward "browse all categories" block.
## 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. |
| **Heading Text** | Optional title above the list. |
| **Heading URL** | Makes the heading a link. Only applies when Heading Text is filled in. |
| **Heading Tag** | H2–H6 or a plain div, so the page keeps a sensible document outline. |
## Content settings — List Settings
![The List Settings section with the taxonomy and parent term pickers](../assets/img/woo-taxonomy-list-controls.png)
*Screenshot: the widget's **List Settings** section showing the Taxonomy dropdown, the Parent Terms multi-select populated with terms, and the Max Depth control.*
| 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. |
| **Taxonomy** | Product categories | Which taxonomy to pull terms from. Every public taxonomy on your site is listed. |
| **Show All Terms (Flat)** | Off | Switches to flat mode. |
| **Parent Terms** | — | Hierarchical only. Which parent term(s) to display, each with its children beneath. |
| **Show Parent Term** | On | Hierarchical only. Shows the parent itself as a clickable heading above its children. |
| **Max Depth** | 1 level | Hierarchical only. How many levels of children to show — 1, 2, 3, or all. |
| **Hide Empty Terms** | On | Excludes terms with nothing assigned to them. |
| **Order By** | Name | Name, Count, Slug or Term ID. |
| **Order** | Ascending | Ascending or descending. |
:::tip The Parent Terms list follows the Taxonomy dropdown
Change **Taxonomy** and the **Parent Terms** picker repopulates with terms from the new taxonomy. This cascade only runs inside the Elementor editor — so if you're scripting or importing widget settings, set both fields explicitly rather than expecting the cascade to fill one in.
:::
## 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. |
| **Show Term Count** | Adds the post or product count in brackets after each term. |
| **List Icon** | An optional icon before each term link, given as a CSS icon class (e.g. Font Awesome). |
## 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.
Grouped into sections:
| Section | Covers |
|---|---|
| **Heading** | Typography, colour, spacing |
| **List Container** | Padding, background, border, shadow |
| **Parent Items** / **Parent Link Text** | Hierarchical mode only — the parent row and its link text |
| **List Items** | Marker style (none, disc, circle, square, numbers, letters), spacing, indentation, background, hover background |
| **Link Text** | Typography, colour, hover underline |
| **List Icon** | Size, colour, spacing — only relevant if you've set an icon |
## Setting it up
**For a flat list** (e.g. "all blog categories"):
1. Choose your Taxonomy.
**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.
**A grouped list**, e.g. "Shop by Category" with subcategories:
1. Choose your **Taxonomy**.
2. Leave flat mode off and select your **Parent Terms**.
3. Set **Max Depth** to how many levels of children you want.
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.
:::caution An incomplete configuration renders nothing on the front end
If your settings don't resolve to any terms — hierarchical mode with no parent terms selected yet is the usual case — the editor shows an explanatory message, but the live site shows **nothing at all**. Confirm the configuration is complete before publishing.
:::
- **Hide Empty Terms is on by default.** A term you expect to see but which has no products assigned won't appear; switch it off if you're building the catalogue out of order.
- Ordering applies within each level, so under a parent the children sort independently of how the parents themselves are ordered.