# 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, 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 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.