GET FREE VERSION GET THE PRO VERSION

Breakdance Builder

Learn about integration with the Breakdance Builder plugin.

In this article

Overview

Breakdance is a new and rapidly growing page builder plugin. It offers all the features expected from such a plugin—many built-in blocks, a design library, page templates, a header and footer editor, and more.

Advanced Woo Labels is fully integrated with Breakdance. You can display any label for Breakdance WooCommerce blocks, or choose to hide labels for certain blocks. Additionally, you can change label positions using special shortcodes.

Show Labels for Breakdance Blocks

No extra steps are required to display labels for Breakdance blocks. They will automatically appear for all products that meet the display conditions.

Breakdance block with labels

Breakdance block with labels


Currently, all WooCommerce Breakdance blocks are supported.

The same applies to single product pages. If you’ve customized them using Breakdance, the labels will display without any issues for all products.

Show/Hide Labels for Breakdance Builder Blocks

By default, labels are shown for all Breakdance blocks. However, you can choose to hide labels for specific blocks or, conversely, show labels only for certain blocks while hiding them for others.

All of this can be managed through special label display conditions.

Follow these steps to show or hide specific labels for Breakdance blocks:

1. Open the label edit page.

2. Locate the Label Conditions box and create a new condition:

Breakdance: Is Breakdance Block -> Equal to -> Yes

This will display the label only inside Breakdance blocks (assuming all other conditions are also met).

Label display condition based on Breakdance blocks

Label display condition based on Breakdance blocks

Set Custom Positions for Labels via Breakdance Builder

For advanced users, you can set custom label positions different from the default positions (On Image and Before Title).

This can be done using the awl_get_product_labels shortcode. This shortcode should be placed inside the product loop to display all current product labels at the specified location.

Example: Instead of displaying the label in the Before Title position, you want to place it after the product title on a single product page. The other label positions should remain unchanged.

Here are the steps to set the custom label position:

1. First, create a custom single product page template. To do this, go to Breakdance -> Templates and click Add Template. Create a blank template for the single product page.

Template for single product page

Template for single product page

2. Click Edit in Breakdance for the template.

3. In the blank template, add a Products Builder block. This block will add several blocks that fully represent the single product page.

Products Builder block

Products Builder block

4. Locate the Product Title block, and add a new Shortcode block below it with the value [awl_get_product_labels position="before_title"].

Adding label via shortcode

Adding label via shortcode

Structure of the page template

Structure of the page template

5. You can add any other blocks to the page if needed. When finished, click Save.

6. Done! Now check your single product page. If the product meets the label display conditions, the label will appear just above the product title, as desired.

Product page with label below title

Product page with label below title