32 lines
2.8 KiB
Markdown
Executable File
32 lines
2.8 KiB
Markdown
Executable File
# Woo Add to Cart Transform
|
|
|
|
Found in the Elementor panel under **Dotjuice → Woo Add To Cart transform**. Requires WooCommerce.
|
|
|
|
## 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.
|
|
|
|
## 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. |
|
|
|
|
## 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).
|
|
|
|
## 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.
|
|
|
|
## 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.
|