Skip to main content
Documentation/Elements & Controls Reference/Elements/WooCommerce/Product

Product

Product displays a complete WooCommerce product presentation for the chosen product. Use Product Builder when you need to arrange individual product parts yourself. WooCommerce must be installed and active.

Add and configure Product

  1. Click Add, choose Product, and place it in the container.
  2. Choose Content > Content > Product.
  3. Set Disable Upsells and Disable Related as needed.
  4. Configure Design > Image, Spacing, and Advanced.
  5. Save your changes.
Product controls in the Breakdance editor
Product controls in the Breakdance editor

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.”

Content > Content

Setting Purpose and options Behavior
Product Set product. Shared
Disable Upsells On/off. Shared
Disable Related On/off. Shared

Design > Image

Setting Purpose and options Behavior
Position Left, Right. Shared

Design > Spacing

Setting Purpose and options Behavior
Spacing spacing controls. See linked controls

Design > Advanced

Setting Purpose and options Behavior
Override Global Styles woocommerce global styles. See linked controls

Troubleshooting

The wrong product appears

Check the selected Product and the current page context.

Review Disable Upsells and Disable Related, along with the product's linked-product data.