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

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

@@ -1,31 +1,56 @@
# Woo Add to Cart Transform
Rebuild WooCommerce's variation dropdowns as clickable buttons, and style the product form to match your design.
Found in the Elementor panel under **Dotjuice → Woo Add To Cart transform**. Requires WooCommerce.
![The Woo Add To Cart transform controls](../assets/img/woo-add-to-cart-controls.png)
*Screenshot: the widget selected in the editor showing the **Variation buttons** section — Swap to Buttons, Show Colour Swatches, Hide Labels and Button Spacing.*
## 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.
Place this widget on your Single Product template, near where the product form appears. It finds WooCommerce's native variation `<select>` dropdowns on the page and converts each into a row of clickable buttons.
Shoppers pick "Large" by clicking it rather than opening a dropdown and scrolling — fewer taps on mobile, and every option is visible at a glance.
![Variation buttons on a product page](../assets/img/woo-add-to-cart-frontend.png)
*Screenshot: a live product page showing size and colour options rendered as button rows instead of dropdowns, with one option selected.*
## 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. |
| **Swap to Buttons** | Off | Turns on the dropdown-to-button conversion. Leave it off to keep native dropdowns while still using the price and description styling below. |
| **Show Colour Swatches** | Off | **Pro feature.** No visible effect in the free version — buttons always render as text. See below. |
| **Hide Labels** | Off | Hides the attribute name ("Colour", "Size") beside each button group. |
| **Button Spacing** | 10px | Space 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).
| Section | What it covers |
|---|---|
| **Buttons** | Normal and Selected states — text colour, background, typography, border, box shadow and padding, plus a shared border radius. |
| **Text** | Typography and colour for the product price and short description. |
| **Swatch** | Size, padding and border for colour swatches. Only meaningful in Pro, where swatches actually render. |
Style the **Selected** state distinctly — it's the only feedback a shopper gets that their choice registered.
## 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.
You can pre-configure swatch colours in the free version, ready for an upgrade. Go to **Dotjuice → WooCommerce Hacks → Attribute Colours** and assign a colour to each attribute term — see [Product Attribute Colours](../product-attribute-colours.md).
Once [Pro](../../dotjuice-elementor-tools-pro/getting-started.md) is active and **Show Colour Swatches** is on, those colours render automatically. Terms sharing a hex value merge into one swatch.
## 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.
:::caution Two behaviours apply store-wide, with or without this widget
Once this plugin and WooCommerce are both active, these happen everywhere regardless of whether you've placed the widget on any page:
- WooCommerce's default **"Clear" reset-selection link** is replaced with this plugin's version.
- **Per-variation pricing is always shown**, rather than appearing only when variations differ in price.
These are deliberate store-wide improvements, not per-page settings. If you're wondering why a product form changed on a template where you never added the widget, this is why.
:::
- **Button styling targets WooCommerce's variation markup directly** rather than being scoped to this widget instance. If a page shows more than one product form — a quick-view popup alongside the main product, say — the same styling applies to all of them.
- The conversion runs against whatever dropdowns exist at page load. A theme or plugin that injects extra variation fields later won't have those converted.