Using Loyalty Program for WooCommerce with Elementor

Loyalty Program for WooCommerce works seamlessly with Elementor. Since Elementor has its own page rendering pipeline, the native Gutenberg blocks are not available inside the Elementor editor — but all plugin functionality is fully accessible via shortcodes, which you can drop anywhere on an Elementor-built page using the built-in Shortcode widget.

Available Shortcodes

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

• [WPGENS_LOYALTY_PAGE] — The main customer loyalty dashboard. Displays the points balance, points history, enrollment form, rank progress, and all other account-level loyalty features. Place this on your dedicated loyalty program page.
• [WPGENS_POINTS_CONVERSION] — A notice that lets customers redeem their points for a discount on the current cart or checkout page. Place this on your cart or checkout page.
• [WPGENS_POINTS_EARNING] — Displays how many points a customer will earn for their current order. Useful on product pages, cart, or checkout.

How to Add a Shortcode in Elementor

1. Open the page you want to edit in the Elementor editor.
2. In the widget panel on the left, search for Shortcode.
3. Drag the Shortcode widget into the desired section or column on the page.
4. In the widget settings, paste the shortcode you want to use (e.g. [WPGENS_LOYALTY_PAGE]).
5. Click Update to save the page.

The shortcode will render the full loyalty component for logged-in customers. Guests will see an appropriate message or be prompted to log in, depending on your settings.

Recommended Page Setup

For most stores, the recommended setup is:

• Create a Loyalty Program page and add [WPGENS_LOYALTY_PAGE] to it. Set this page in Loyalty Program → Settings → General → Loyalty Page.
• Add [WPGENS_POINTS_CONVERSION] to your Cart and/or Checkout page — place it above the order summary or totals for maximum visibility.
• Optionally add [WPGENS_POINTS_EARNING] to your Cart or Checkout page to motivate customers to complete their purchase.