Docs pass: add widget screenshots and expand the user guides
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
@@ -4,7 +4,7 @@
|
||||
|
||||
Dotjuice Elementor Tools Pro requires:
|
||||
|
||||
- **The free [Dotjuice Elementor Tools](../../../dotjuice-elementor-tools/documentation/marketing/overview.md) plugin**, installed and active — Pro is an add-on, not a standalone plugin.
|
||||
- **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).
|
||||
- **Advanced Custom Fields (ACF)**, only for the ACF Frontend Form widget.
|
||||
|
||||
@@ -47,6 +47,18 @@ For a custom tab, choosing **Elementor Template** as the Content Type requires e
|
||||
2. Open the template you want to embed, or hover over it in the list.
|
||||
3. The number in the edit URL (`post=1234`) or shown in your browser's address bar is the Template ID — enter that number into the field.
|
||||
|
||||
## Using shortcodes in a tab
|
||||
|
||||
Custom tabs set to **Text Editor** run shortcodes, so anything available on your site as a shortcode can go straight into a tab's content.
|
||||
|
||||
This is the practical way to give every product its own document without building a tab per product. Using the free plugin's Markdown shortcode:
|
||||
|
||||
```
|
||||
[dj_markdown acf_field="changelog_url"]
|
||||
```
|
||||
|
||||
Add a URL field to your products, drop that single line into a "Changelog" tab, and each product renders the file its own field points at. See the [Markdown Widget](../../dotjuice-elementor-tools/widgets/markdown-widget.md) documentation for the full list of shortcode options.
|
||||
|
||||
## Styling
|
||||
|
||||
**Tab Navigation** — background, spacing, alignment, divider styling, and Normal/Hover/Active states for each tab button (including a separate colour control for the active tab's bottom border, useful for either blending it into the panel or removing the divider line entirely).
|
||||
|
||||
@@ -6,6 +6,8 @@ Found in the Elementor panel under **Dotjuice → Woo Product Filter**. Requires
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
Each filter group is one item in the **Filters** repeater. Add as many as you need — one per category/attribute you want shoppers to filter by.
|
||||
@@ -16,15 +18,52 @@ Each filter group is one item in the **Filters** repeater. Add as many as you ne
|
||||
| **Filter By** | Category | Category, Tag, Brand, or Attribute. |
|
||||
| **Taxonomy Slug** | — | Only for Attribute — the technical slug of the attribute (e.g. `pa_color`). |
|
||||
| **Display Type** | List | List (simple clickable list) or Buttons (clickable button/swatch style). |
|
||||
| **Match Logic** | Match Any | Whether selecting multiple terms in this group should show products matching *any* of them, or *all* of them. |
|
||||
| **Match Logic** | Match Any | Whether selecting multiple terms in this group shows products matching *any* of them, or *all* of them. |
|
||||
| **Show products without this attribute** | Yes | Attribute filters only. When a term is selected, decides whether products that don't have this attribute set at all stay visible (Yes) or are hidden (No). |
|
||||
| **Enable Colour Swatches** | Off | Buttons display only. Shows each term's assigned colour as a clickable swatch instead of a text button — colours come from the [Product Attribute Colours](../../../../dotjuice-elementor-tools/documentation/user-guide/product-attribute-colours.md) settings page in the free plugin. Terms sharing the same colour are merged into a single clickable swatch. |
|
||||
| **Show this filter** | Always | Always, only when any other filter is selected, or only when a specific other filter type has a selection — see "Dependent filters" below. |
|
||||
| **Hide unavailable terms** | Off | When on, terms with zero matching products (given the current selection) are removed entirely rather than just visually faded. |
|
||||
| **Enable Swatch Color** | Off | Buttons display only. Shows each term's assigned colour as a clickable swatch instead of a text button — colours come from the [Product Attribute Colours](../../dotjuice-elementor-tools/product-attribute-colours.md) settings page in the free plugin. Terms sharing the same colour are merged into a single clickable swatch. |
|
||||
| **Show this filter** | Always | Always, only when any other filter is selected, or only when a specific other filter type has a selection — see [Dependent filters](#dependent-filters) below. |
|
||||
| **Show after this filter type** | Category | Only used when *Show this filter* is set to depend on another filter — the filter type that triggers this one. |
|
||||
| **Trigger taxonomy slug** | — | For an Attribute trigger, the slug of the attribute that reveals this filter. |
|
||||
| **Link to term archive** | Off | When on, clicking a term navigates to that term's own archive page instead of filtering the grid in place — see [Link to term archive](#link-to-term-archive) below. |
|
||||
| **Hide unselected items** | Off | Turns this group into an "active filters" bar that shows only the currently-selected terms as removable chips — see [Active-filters bar](#active-filters-bar-hide-unselected-items) below. |
|
||||
|
||||
## How the options narrow
|
||||
|
||||
When a shopper picks a value in one filter, every *other* filter updates to show only the options still available — but a filter never narrows itself. For example, choosing a **category** (or being on a category/range archive) reduces the **colour** swatches to just the colours those products come in; then picking a colour doesn't shrink the colour list further, it simply reflects the category you're in. This means the colours always mirror the "parent" filters (category, range, etc.) you've chosen, which is what shoppers expect.
|
||||
|
||||
Options that can't produce any results with the current selection are **hidden** entirely, and a filter group whose options all disappear collapses (its heading hides too), so shoppers never see empty or dead-end choices.
|
||||
|
||||
## Dependent filters
|
||||
|
||||
To build a filter group that only appears once another one is used — for example, showing a "Size" filter only after a category is chosen — set **Show this filter** to "When a specific filter is selected" and choose which filter type triggers it. If the triggering selection is cleared, the dependent group's own selections are cleared too.
|
||||
To build a filter group that only appears once another one is used — for example, showing a "Size" filter only after a category is chosen — set **Show this filter** to "When a specific filter is selected" and choose which filter type (and, for attributes, which **Trigger taxonomy slug**) triggers it. If the triggering selection is cleared, the dependent group's own selections are cleared too.
|
||||
|
||||
## Link to term archive
|
||||
|
||||
Set per filter group. When **Link to term archive** is on, clicking a term takes the shopper to that term's normal archive page (e.g. the category or range page) instead of filtering the current grid via AJAX. This is handy when a group is really meant for *navigation* (e.g. jumping between ranges) rather than in-place filtering.
|
||||
|
||||
- The group's **Clear** link / ✕ then returns to the main Shop page rather than just clearing a selection.
|
||||
- It's safe in the Elementor editor: clicking a linked term while designing won't navigate the editor away.
|
||||
|
||||
## Active-filters bar (Hide unselected items)
|
||||
|
||||
Turn **Hide unselected items** on for a filter group and it shows **only the terms currently selected**, each as a removable chip with an ✕ — clicking a chip deselects that term. When nothing is selected, the group (and its heading) collapse out of view. The group's own Clear link is hidden in this mode, since each chip is individually removable.
|
||||
|
||||
The intended pattern is **two instances of the widget**:
|
||||
|
||||
- The **main filter** (for example inside an off-canvas panel) leaves this off and shows all terms for browsing and selecting.
|
||||
- A **second instance above the product grid** turns **Hide unselected items** on for each group, so it acts as an "active filters" summary bar — empty until the shopper picks something, then showing their choices as ✕ chips they can clear individually.
|
||||
|
||||
Because both instances share the same selection state, selecting a term in one instantly appears as a chip in the other, and clearing a chip updates both.
|
||||
|
||||
## Reset & clear options
|
||||
|
||||
These sit below the Filters repeater and apply to the whole widget:
|
||||
|
||||
| Setting | Default | What it does |
|
||||
|---|---|---|
|
||||
| **Show Reset Button** | On | Shows the "Reset Filters" button that clears every group at once. Turn off if you'd rather rely on the per-group clear links / chips. |
|
||||
| **Cascade Clear** | Off | When on, clearing one filter group also clears every group *below* it in the list. Useful when lower filters only make sense in the context of a higher one (e.g. clearing Category also clears the Colour choices made within it). |
|
||||
| **Clear Link Style** | Text | Whether each group's clear control is a text link ("Clear") or a compact ✕ icon. |
|
||||
|
||||
## AJAX & URL settings
|
||||
|
||||
@@ -34,22 +73,33 @@ To build a filter group that only appears once another one is used — for examp
|
||||
| **Live update** | Off | AJAX mode only. When on, the grid refreshes automatically the moment a filter is clicked. When off, shoppers make their selections and click an "Apply Filters" button to refresh. |
|
||||
| **Update browser URL** | On | AJAX mode only. Keeps the URL in sync with the current filter selection as shoppers filter, so the page can be bookmarked, shared, or reloaded and show the same results. |
|
||||
| **Products container selector** | Empty (auto-detect) | Advanced: the CSS selector of your product grid, if the widget doesn't auto-detect it correctly. Leave empty unless you're troubleshooting a grid that isn't updating. |
|
||||
| **Contextual filtering** | Off | When placed on a category archive page, scopes filter options and counts to that category's products only, rather than your whole catalogue. |
|
||||
| **Contextual filtering** | Off | When placed on a category/term archive page, scopes the *initial* filter options to that archive's products only, rather than your whole catalogue. |
|
||||
|
||||
## Pagination
|
||||
|
||||
When AJAX is on, clicking a page in a [Woo Page Numbers](../../dotjuice-elementor-tools/widgets/woo-page-numbers.md) widget (or your theme's product pagination) loads that page's products in place — no full reload — while keeping your current filters applied. With **Update browser URL** on, the address bar updates to the normal pretty archive form, e.g. `/t-shirts/page/2/?pa_color=blue`, so paged views are shareable and bookmarkable, and the browser back/forward buttons move between pages. (On sites using plain permalinks it falls back to `?paged=2`.)
|
||||
|
||||
## Styling
|
||||
|
||||
Filter Group headings, Buttons (Normal/Hover/Active states), Swatches (Normal/Selected states), and Faded terms (opacity, greyscale, scale for unavailable options, plus a toggle for whether faded/unavailable terms can still be clicked).
|
||||
Style controls live under the Style tab:
|
||||
|
||||
- **Filter group** — Title Typography, Title Colour, **Grid Gap** (space between the terms within a group), and **Space Between Groups** (vertical gap between one filter group and the next).
|
||||
- **Buttons** — Button Typography; Text and Background colours for **Normal**, **Hover** and **Active** (selected) states; Border radius; Padding.
|
||||
- **Clear Link** — Typography, Size, Colour (Normal / Hover), and Spacing Above (the gap between the terms and the clear link / ✕).
|
||||
- **Swatches buttons** — for colour swatches: Swatch Size and Border radius for the **Normal** and **Selected** states, plus a Margin control for selected swatches.
|
||||
|
||||
## Setting it up
|
||||
|
||||
1. Add the widget to your Shop page or category archive template, near your product grid.
|
||||
2. Add a filter group for each way you want shoppers to filter — start with Category, then add Attribute groups for things like colour or size.
|
||||
3. For colour attributes, set up your colours first on the [Product Attribute Colours](../../../../dotjuice-elementor-tools/documentation/user-guide/product-attribute-colours.md) page, then enable **Enable Colour Swatches** on that filter group.
|
||||
3. For colour attributes, set up your colours first on the [Product Attribute Colours](../../dotjuice-elementor-tools/product-attribute-colours.md) page, then enable **Enable Swatch Color** on that filter group.
|
||||
4. Leave AJAX and URL settings at their defaults for most stores — instant, bookmarkable filtering.
|
||||
5. Test: apply a filter, copy the URL, and open it in a new tab (or with JavaScript disabled) to confirm it reproduces the same filtered results.
|
||||
5. (Optional) Add a second instance of the widget above the grid with **Hide unselected items** turned on for each group, to give shoppers a clear "active filters" bar.
|
||||
6. Test: apply a filter, copy the URL, and open it in a new tab (or with JavaScript disabled) to confirm it reproduces the same filtered results.
|
||||
|
||||
## Good to know
|
||||
|
||||
- **Options reflect your other selections, not their own.** Picking a colour won't shrink the colour list — the colours mirror the category/range you're in. This "disjunctive" behaviour is automatic and needs no setup.
|
||||
- **Filtered URLs work even without JavaScript** — if a shopper shares a filtered link, or your page is cached, the filter still applies correctly on a plain page load, not just via AJAX. This is deliberate and doesn't need any extra setup.
|
||||
- Colour swatches only work for **Attribute** filter groups (not category/tag/brand), and require colours to already be configured on the Product Attribute Colours page — a term with no colour assigned won't show a meaningful swatch.
|
||||
- If your product grid doesn't refresh correctly after filtering, check the **Products container selector** field — leaving it empty works for most themes' standard WooCommerce/Elementor product grids, but an unusual custom grid layout may need this set explicitly.
|
||||
|
||||
Reference in New Issue
Block a user