Back to contents

JetWooBuilder: How to Create a Popup Notification

From this tutorial, you will learn how to add a popup notification to your online store 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 — Create 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.

add new popup

2 Step — Add a widget to the popup

For this tutorial, we’ll add a Heading widget to a popup as an example, but you can add any widget you need. So, drag-n-drop the Heading widget to the needed section to create a notification.

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. To find these features, click the settings button in the bottom left corner of the Elementor left-side menu.

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

3 Step — Add the popup to the Products Grid

You can add a popup to any of the versatile JetWooBuilder widgets, be it Products Grid, Products List or Archive Add to Cart widgets. Open the page where you want to place a product gallery with popup notification and drag the necessary widget to it. After that, you’ll need to enable the JetWooBuilder Cart Popup option.

To do that, go to the Advanced settings, open the JetPopup section and enable the JetWooBuilder Cart Popup option. Then, in the Template drop-down menu choose the popup you’ve created before.

Enable JetWooBuilder Cart Popup option
NOTE. Be aware, that the JetWooBuilder Cart Popup option works only with Products Grid, Products List, Archive Add to Cart widgets and shows the popup after product is added to cart.

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.