Product
A Single Product template supplies the layout for individual products. WooCommerce fills it with each product's images, descriptions, prices, and purchase options.
Customize the Product Layout
- Go to Breakdance > Templates > Add Template and choose Single Product.
- Create the template, click Edit in Breakdance, and select a product to preview.
- Add Product inside a Section for a complete product layout. Customize its design and save.
For layouts that apply to selected products or product categories, see WooCommerce Templating. Use Global Settings for shared typography, buttons, sale badges, and quantity fields.
Build a Custom Product Layout
Use Product Builder in place of Product. From the Content tab, open Content > Add Elements and arrange the product parts inside it.
| Element | Displays |
|---|---|
| Product Title | Product name |
| Product Price | Current price and sale-price presentation |
| Product Excerpt | Short description |
| Product Cart Button | Purchase form, including variation choices where applicable |
| Product Stock | Stock status |
| Product Meta | SKU and product taxonomy details |
| Product Tabs | Description, additional information, and reviews |
Leave Product Builder > Product unset to use the current product. Selecting a fixed product makes the builder display that product instead of following the template's current product.
For images, use a gallery-compatible control bound to Product Gallery, such as Swiper's image source. The Elements Reference also links to Product Images and the remaining product parts, including ratings, descriptions, and reviews.
Related Products displays WooCommerce recommendations. Upsell Products displays the upsells assigned to the product.
Variation Swatches
Variation swatches replace dropdown choices with colors, images, or labels. Breakdance integrates with the CartFlows and GetWooPlugins variation-swatches plugins. Configure your attributes and variations in WooCommerce and the plugin, then style them under Global Settings > WooCommerce > Variation Swatches.
See Variation Swatches integrations for setup links. Use Product Cart Button for the product's purchase form so the variation choices are part of the add-to-cart process.