Using Loyalty Program for WooCommerce with Breakdance

Loyalty Program for WooCommerce is fully compatible with Breakdance. Because Breakdance renders pages outside of the standard WordPress block editor, the native Gutenberg blocks are not available inside the Breakdance canvas — but all plugin features are accessible through shortcodes using Breakdance’s Shortcode element.

Available Shortcodes

The plugin provides three shortcodes you can use on any Breakdance-built page:

• [WPGENS_LOYALTY_PAGE] — The main customer loyalty dashboard. Shows points balance, transaction history, enrollment form, and rank progress. Place this on your dedicated loyalty page.
• [WPGENS_POINTS_CONVERSION] — Lets customers redeem their points for a discount directly on the cart or checkout page.
• [WPGENS_POINTS_EARNING] — Shows customers how many points they will earn for the current order. Great for cart and checkout pages.

How to Add a Shortcode in Breakdance

1. Open the page in the Breakdance editor.
2. Click the + button to add a new element.
3. Search for Shortcode in the element search panel.
4. Add the Shortcode element to your layout.
5. In the element settings, paste the shortcode (e.g. [WPGENS_LOYALTY_PAGE]) into the shortcode field.
6. Click Save.

The shortcode will render the loyalty component for logged-in customers. Guests will see a login prompt or a message based on your plugin settings.

Recommended Page Setup

For a standard WooCommerce store built with Breakdance:

• Create a Loyalty Program page and add the [WPGENS_LOYALTY_PAGE] shortcode. Register this page in Loyalty Program → Settings → General → Loyalty Page.
• Add [WPGENS_POINTS_CONVERSION] to your Cart or Checkout template in Breakdance — place it near the order total for best results.
• Optionally add [WPGENS_POINTS_EARNING] to the Cart or Checkout template to show customers how many points they will earn.

Adding Shortcodes to WooCommerce Templates in Breakdance

If you have custom Cart or Checkout templates built in Breakdance, open the template in the Breakdance editor, add a Shortcode element, and paste the relevant shortcode. Breakdance will render it correctly for logged-in customers during the live page load.