Product Cart Button displays WooCommerce's purchase controls for the current product, including the relevant quantity and variation behavior. WooCommerce must be installed and active.
Click Add , choose Product Cart Button , and place it in the container.
Place the element inside Product Builder .
Configure Design > Size , Button , Notices , Typography , and Spacing .
Review Advanced for local global-style overrides.
Save your changes.
Product Cart Button controls in the Breakdance editor Keep the required parent context
Product Cart Button must be inside Product Builder , Fundamental Product Builder . Layout containers can sit between the parent and this element. Configure the product or checkout context on the parent.
This element has no children; use its own controls.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Size
Setting
Purpose and options
Behavior
Width Width.
Responsive
Button Fills Container On/off.
Shared
Setting
Purpose and options
Behavior
Size > Size Custom , Small , Default , Large .Responsive
Size > Padding Padding. When: Size = Custom .
Responsive
Size > Override Width Override width and unit.
Shared
Size > Full Width At Breakpoint.
Shared
Background Color or supported fill.
Hover
Outline On/off.
Shared
Shown when Outline is set.
Setting
Purpose and options
Behavior
Color Color or supported fill.
Hover
Width Width.
Shared
No Fill On Hover On/off.
Shared
Setting
Purpose and options
Behavior
Typography typography controls .See linked controls
Corners Square , Round , Custom .Shared
Corner Radius Corner radius and unit. When: Corners = Custom .
Responsive
Effects > Transition Duration Transition duration.
Responsive
Effects > Scale On Hover Set scale on hover. Range: 0–3.
Responsive
Effects > Shadow Shadow offset, blur, spread, color.
Responsive, Hover
Icon > Icon Icon.
Shared
Icon > Position Before , After .Shared
Icon > Size Size and unit.
Responsive
Icon > Color Color or supported fill.
Hover
Icon > Space Before Space before and unit.
Responsive
Icon > Space After Space after and unit.
Responsive
Icon > Hover Transform Hover transform and unit.
Shared
Design > Notices
Setting
Purpose and options
Behavior
Out Of Stock > Background Color or supported fill.
Shared
Out Of Stock > Borders borders controls .See linked controls
Out Of Stock > Typography typography controls .See linked controls
Out Of Stock > Padding spacing controls .See linked controls
Out Of Stock > Disable Icon On/off.
Shared
Out Of Stock > Icon Color Color or supported fill. When: Disable Icon is unset.
Shared
Out Of Stock > Custom Icon Icon. When: Disable Icon is unset.
Shared
Backorder > Background Color or supported fill.
Shared
Backorder > Borders borders controls .See linked controls
Backorder > Typography typography controls .See linked controls
Backorder > Padding spacing controls .See linked controls
Backorder > Disable Icon On/off.
Shared
Backorder > Icon Color Color or supported fill. When: Disable Icon is unset.
Shared
Backorder > Custom Icon Icon. When: Disable Icon is unset.
Shared
Design > Typography
Design > Spacing
Setting
Purpose and options
Behavior
Container spacing controls .See linked controls
Grouped > Vertical Spacing Vertical spacing and unit.
Responsive
Grouped > Quantity Width Quantity width and unit.
Responsive
Variable > After Label After label and unit.
Shared
Variable > After Dropdown After dropdown and unit.
Shared
Variable > After Stock Qty After stock qty and unit.
Shared
After Notice After notice and unit.
Shared
Before Button Before button and unit.
Shared
Design > Advanced
Setting
Purpose and options
Behavior
Variation Reset > Icon Icon.
Shared
Variation Reset > Size Size and unit.
Shared
Variation Reset > Color Color or supported fill.
Hover
Variation Reset > Background Color or supported fill.
Hover
Global Styles Override woocommerce global styles .See linked controls
Table Separator Color or supported fill. When: Hide Table Separator is unset.
Shared
Hide Table Separator On/off.
Shared
Troubleshooting
A variable product needs a valid variation selection. Check its attributes and variations in WooCommerce.
The product cannot be added to the cart Check stock, purchasability, required options, and WooCommerce notices before changing the button design.
