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>
3.6 KiB
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.
Once Pro 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.