Back to contents

JetWooBuilder: How to display various content for your shop in a popup (based on JetPopup)

From this tutorial, you will learn how to add different widgets to your popup with the help of JetPopup and JetWooBuilder plugins.

With this new cool update that combines JetWooBuilder and JetPopup functionality, you’ll be able to display different content and add different widgets in a popup easily.
For example, you can display your products with the help of the Product Grid widget and add a popup with a message “Product successfully added to your shopping cart” to it. This is really useful because there no more need to check the cart when you’re adding a new product and the client will see a notification. Also, you can display a popup wherever you need and add it to different widgets.

1 Step — Creating a new popup

Firstly, you need to create a popup with the help of the JetPopup plugin. To do this, open your WordPress Dashboard and navigate to the JetPopup > Add New Popup. Then, give your popup a name, click on the Publish button and then edit the popup with Elementor.

New Popup

2 Step — Adding a widget to the popup

I’ll add a Heading widget in a popup as an example, but you can add any widget you need. So, drag-n-drop the Heading widget to the needed section.

Adding heading widget

Then, you can style your popup according to your preferences.

Style of the popup

It’s important to enable Loading content with Ajax and Force Loading options in the popup settings.

Popup settings

3 Step — Adding display conditions

Don’t forget to add conditions for your popup. To do it, go the Display Settings > Display Conditions > Add Condition and choose where you want to display the popup.

Popup conditions

Adding the popup to the Products Grid widget

1 Step — Adding Products Grid widget

The next step is to open the needed template and drag-n-drop the Products Grid widget. You can also choose Products List or Archive Add to Cart widgets. After that, you’ll need to enable the JetWooBuilder Cart Popup option in the Products Grid settings.

2 Step — Enabling the JetWooBuilder Cart Popup option in the Products Grid

To do that, go to the Advanced settings > JetPopup and enable the JetWooBuilder Cart Popup option. Then, choose the popup you’ve created before.

Enable JetWooBuilder Cart Popup option
ATTENTION! Please note, that the JetWooBuilder Cart Popup option works only with Products Grid, Products List, Archive Add to Cart widgets and open popup after product added to cart.

3 Step — Preview the result

The last step is to check how your popup will look in action.

Heading in the popup Preview

Now you know how to display different content that can appear in the popup with the help of the JetWooBuilder and JetPopup plugins.