Designing The Product Page

Creating a Custom WooCommerce Product Page with Breakdance

This document demonstrates how to create a custom WooCommerce product page layout using Breakdance.

Setting Up a Custom Template

Adding a New Template in Breakdance

1. Go to the WordPress admin panel and navigate to Breakdance > Templates.
2. Click ‘Add Template’ and select ‘Single Product’ to apply the template to all WooCommerce products.
3. Optionally, set conditions to apply the template to specific products only.
4. Edit the template in Breakdance.

Adding and Customizing Elements

1. Add a Product Builder element to the page.
2. Add/Remove elements within the Product Builder, such as Product Images, Title, Excerpt, and Cart, as desired.
3. Customize spacing and styles for each element as needed.
4. After making all the desired customizations, save the changes and preview the custom product page on the front end.

Using Global Styles for Consistency

It is recommended to use global styles for consistent branding across the site via Settings > Global Settings > WooCommerce.

For specific customizations, such as sale badges or tab layouts, use the element controls in the Product Builder.