If you are using page builders like Elementor and Divi to build custom product pages or product page templates, you will have to do the following steps to ensure the compatibility with Bundler.

1. Create your offers as if you were using normal product pages #

Go to Bundler -> Offers and follow this tutorial to create your first offer.

When your offer is created, test it on the standard Woocommerce product page. The widget should be working properly.

2. Ensure that the widget is showing on the front end #

Go to the product page template. If you are using Elementor, this is located in Elementor -> templates.

Make sure to add the following shortcode in the section where you want to show the widget

[bundler_widget product='PRODUCT_ID' template='YOUR_TEMPLATE' hide_default_form='yes/no' cart_redirect='on/off' checkout_redirect='on/off']

There are 5 parameters to take into account:

• product: this is the ID of the product you want to display the widget for. This parameter is mandatory and if no product id is added or if the product id doesn’t exist, the widget won’t show.
• template: can be “booster”, “classic” or “vertical”. By default, “classic” is used.
• hide_default_form: this parameter allows you to hide the standard variation form and display the Bundler widget instead. It is recommended to always set its value to ‘yes’ which is the default value.
• cart_redirect: set this parameter to “on” (by default it is “off”) if you want to redirect the client to the cart page after a successful add to cart. Please note that this parameter has a higher priority than the cart_redirect parameter available in the plugin’s settings section. Which means, if this parameter enabled, the client will be redirected to the cart page even if the other parameter is off.
• checkout_redirect: set this parameter to “on” if you want the client to be redirected to the checkout page after a successful add to cart. Please note that if both checkout_redirect and cart_redirect are enabled, the checkout_redirect will have a higher priority and so the client will be directed to the checkout page. Please note that the default value for this parameter is “off”.

Example of using the shortcode in Elementor:

3. Add a custom add to cart button #

For the widget to work, you have to add a button to your page and add the following class to that button: custom_add_to_cart_button

For example, in Elementor you can do it like that:

Click on publish.

Now you can preview your page and test if the widget is working:

And voilà!