# 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

| | |
|---|---|
| **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. Every widget from this plugin lives there.

If a widget you expect is missing, it's almost always the WooCommerce dependency. These six only register when WooCommerce is active:

- 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

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.

![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. **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

**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.