f4838865c9
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>
57 lines
3.6 KiB
Markdown
Executable File
57 lines
3.6 KiB
Markdown
Executable File
# 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.
|
|
|
|
|
|
*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, 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.
|
|
|
|
|
|
*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 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
|
|
|
|
| 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)
|
|
|
|
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
|
|
|
|
:::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.
|