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

81
docs/dotjuice-elementor-tools/getting-started.md
View File

@@ -1,40 +1,79 @@
# Getting Started
Dotjuice Tools for Elementor adds ten widgets to the Elementor editor, plus three settings pages for the features that need configuration outside the page builder.
![The Dotjuice widget category in the Elementor editor panel](./assets/img/getting-started-widget-panel.png)
*Screenshot: the Elementor editor with the widgets panel open and the **Dotjuice** category expanded, showing the full widget list.*
## 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.
| | |
|---|---|
| **Required** | [Elementor](https://wordpress.org/plugins/elementor/) (the free page builder) installed and active |
| **Optional** | WooCommerce — unlocks the six Woo widgets and the WooCommerce Hacks settings page |
| **Optional** | Advanced Custom Fields — lets the Markdown shortcode read its URL from an ACF field |
The plugin does nothing on its own without Elementor: its widgets are registered on Elementor's own widget-registration hook, so if Elementor is inactive the Dotjuice category simply won't exist.
## 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.
Open any page in the Elementor editor and look for the **Dotjuice** category in the widgets panel. Every widget from this plugin lives there.
If a widget you expect to see is missing:
If a widget you expect is missing, it's almost always the WooCommerce dependency. These six only register when WooCommerce is active:
- **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.
- Woo Products Transform
- Woo Add To Cart transform
- Woo Categories Transform
- Woo My Account Transform
- Woo Page Numbers
- Woo Taxonomy List
**Woo Taxonomy List is in that list even though it isn't shop-specific.** It can drive non-shop content such as blog categories, but it still only appears when WooCommerce is present. On a site without WooCommerce it won't be available.
The remaining four have no dependencies beyond Elementor: Screenshot Capture, Dark Mode Toggle, Keyword Linker, and Markdown.
## Where the plugin's settings live
In your WordPress admin menu, under **Dotjuice**:
Settings sit under the shared **Dotjuice** menu in your WordPress admin sidebar. That menu is shared by all Dotjuice plugins — whichever one loads first creates it, so if you also run Dotjuice Performance you'll see both listed under the same parent.
- **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))
![The Dotjuice admin menu expanded in the WordPress sidebar](./assets/img/getting-started-admin-menu.png)
*Screenshot: the WordPress admin sidebar with the **Dotjuice** menu expanded, showing its submenu items.*
| Menu item | What it's for |
|---|---|
| **Tools for Elementor** | The plugin's own dashboard — widget overview, system status, and support links. |
| **Integrations** | A tabbed page for widgets that talk to outside services. Screenshot API settings are the first tab — see [Screenshot API Settings](screenshot-api-settings.md). |
| **WooCommerce Hacks** | Account page tweaks and product attribute colours. Only appears when WooCommerce is active — see [WooCommerce Account Settings](woocommerce-account-settings.md) and [Product Attribute Colours](product-attribute-colours.md). |
:::note
Older versions of this plugin had a standalone **Screenshot API** menu item. It's now the first tab of **Integrations**, which exists so future API-backed widgets can add their own tabs rather than each adding a menu entry.
:::
## 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.
1. **Setting up Screenshot Capture?** Configure your API key first under **Dotjuice → Integrations**. The widget renders nothing at all without a key — see [Screenshot API Settings](screenshot-api-settings.md).
2. **Running a WooCommerce store?** Look through [WooCommerce Account Settings](woocommerce-account-settings.md). Most stores want at least one of these — hiding unused My Account tabs, or keeping a category off the main shop page.
3. **Using colour swatches anywhere?** Assign your colours once under [Product Attribute Colours](product-attribute-colours.md); every widget that shows swatches reads from that single list.
4. Browse the widget guides below for whatever your build needs.
## 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)
- [Woo Products Transform](widgets/woo-products-transform.md)
- [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md)
- [Woo Categories Transform](widgets/woo-categories-transform.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)
**General purpose**
- [Screenshot Capture](widgets/screenshot-capture.md) — live screenshots of any website, captured through an API
- [Dark Mode Toggle](widgets/dark-mode-toggle.md) — a front-end light/dark switch driven by Elementor's global colours
- [Keyword Linker](widgets/keyword-linker.md) — turn chosen words into links across a page automatically
- [Markdown](widgets/markdown-widget.md) — render a live Markdown file, with a shortcode for per-post documents
**WooCommerce** (require WooCommerce active)
- [Woo Products Transform](widgets/woo-products-transform.md) — an attribute-aware product grid with hover and rollover effects
- [Woo Add to Cart Transform](widgets/woo-add-to-cart-transform.md) — variation dropdowns rebuilt as clickable buttons or colour swatches
- [Woo Categories Transform](widgets/woo-categories-transform.md) — styled, animated category tiles
- [Woo My Account Transform](widgets/woo-my-account-transform.md) — full styling control over the My Account area
- [Woo Page Numbers](widgets/woo-page-numbers.md) — styleable product pagination that co-operates with AJAX filtering
- [Woo Taxonomy List](widgets/woo-taxonomy-list.md) — cascading term lists from any taxonomy
## Upgrading to Pro
Several widgets have controls that are visible but inert in the free version — colour swatches on Woo Add to Cart Transform are the usual one people hit. Where that applies it's called out in that widget's guide. [Dotjuice Tools for Elementor Pro](../dotjuice-elementor-tools-pro/getting-started.md) is an add-on rather than a replacement: the free plugin must stay installed and active.