Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetWooBuilder: How to Create a Purchase Pop-up Notification

From this tutorial, you will learn how to add a purchase pop-up notification to your online store with the help of JetPopup and JetWooBuilder plugins.

With this new update that combines JetWooBuilder and JetPopup functionality, you’ll be able to display different content and use different widgets in a pop-up easily.

For example, you can display your products with the help of the Product Grid widget and add a pop-up with the message “Product successfully added to your shopping cart” or “Thank you for your purchase” to it. This is really useful because there is no more need to check the cart when you add a new product; the client will see a notification. Also, you can display a pop-up wherever you need it and add it to different widgets.

1 Step — Create a new pop-up

Firstly, you need to create a pop-up with the help of the JetPopup plugin. To do so, open your WordPress Dashboard and navigate to JetPopup > Create New Popup. Then, give your pop-up a name, click on the “Publish” button, and edit the pop-up with Elementor.

create new popup

2 Step — Add a widget to the pop-up

For this tutorial, we’ll add a Heading widget to a pop-up 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 the pop-up according to your preferences.

Style of the popup

It’s crucial to enable the Loading content with Ajax and Force Loading options in the pop-up settings. To find these features, click the settings button in the bottom left corner of the Elementor left-side menu.

jetpopup settings in elementor

Don’t forget to add conditions to your pop-up. To do it, click the “Manager” and then “Add Condition” button, and choose where you want to display the pop-up.

add display conditions

3 Step — Add the pop-up to the Products Grid

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

To do that, go to the Advanced settings, open the JetPopup section, and enable the JetWooBuilder Purchase Popup option. Then select the pop-up you’ve created previously in the Purchase Popup.

jetpopup settings
knowledge base information icon
NOTE. Be aware, that the JetWooBuilder Purchase Popup option works only with Products Grid, Products List, Archive Add to Cart widgets and shows the pop-up after product is added to cart.

The last step is to check your pop-up in action.

Heading in the popup Preview

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