Popup BuilderPro

2 min read

WooCommerce popup builder module helps you create engaging and conversion-focused popups. In the popup, you can display promotions, lead forms, coupons, special offers for your WooCommerce store.

This module is very helpful to boost sales, capture emails, and reduce cart abandonment. A highly interactive and customizable popup builder can entice customers to take action and respond to the popup.

1. General #

To configure Popup Builder for WooCommerce, navigate to the WordPress admin menu ShopBuilder =>Settings =>Modules =>Popup Builder => General

1.1) Enable Popup Builder: Toggle this button to activate the module.

1.2) Popup Visibility: Choose the options from where the popup will appear.

All Pages: If you choose all pages, the popup will appear across the all pages of your WooCommerce site.

Multiple Pages: You can choose the multiple pages option. After choosing the option, a new setting will be visible at the below ‘Include Pages’.

In this field, you need to select your preferred pages from the dropdown. If you don’t choose any page from here the popup will show all pages.

Specific Product Page: Select the specific product page. After picking this option, you’ll see a new setting will be visible at the below ‘Select Specific Products’.

In this field, you can choose your preferred products from the dropdown.

Product Categories: If you choose the product category option, then another setting ‘Select Category’ will pop up.

Here, you need to select the desired categories from the dropdown.

Product Tags: You can also select product tags option for popup visibility. After choosing, a new settings will be visible, ‘Applicable Tags’

From here, you need to choose the particular tags where popup will show on products in these tags.

1.3) Trigger Type: Choose the trigger type. From the drop down, you can select Time Delay, Scroll Percentage, Exit Intent, Immediately.

1.4) Popup Delay (milliseconds): You need to enter the popup delay in milliseconds.

1.5) Display Frequency: You can adjust the frequency of the pop up displayed on your WooCommerce store. From the dropdown, you can choose display frequency as Once per session, Once a day, or Every Time.

1.6) Entry Animation: You can select the entry animation style from the dropdown. Select from Fade in, Slide down, Slide up, Slide Right, Slide Left, Zoom in, Flip in, and Bounce in.

1.7) Exit Animation: Determine the exit animation style from the dropdown. Select from Fade out, Slide down, Slide up, Slide Right, Slide Left, Zoom out, Flip out, and Bounce out.

1.8) Hide on Mobile: You’ll get permission to enable the option to hide popup in mobile devices.

2. Style #

Now, click on the Styles tab.

2.1) Modal Width in (px): Adjust the popup button modal width. Example: 950.

2.2) Modal Wrapper Padding: Set the popup modal wrapper padding. Example 1: 20px.

2.3) Modal Wrapper Margin: Determine the popup modal wrapper margin. Example 1: 20px

2.4) Modal Background Color: Change the popup modal background color according to your preferences.

2.5) Modal Box Shadow Color: Set the popup modal box shadow color according to your choice.

2.6) Modal Overly Color: Determine the popup modal overly color.

2.7) Modal Border Radius: Adjust the popup modal wrapper padding.

Template Builder Settings #

Now, you need to go to Template Builder settings to create a popup builder. Navigate to Shopbuilder > Template Builder.

1. Simply click on the ‘Add New Page’ button.

1. Template Name: Set the template name.

2. Select Template Type: From the dropdown choose the template type as ‘Popup’.

3. Select Editor Type: Choose the editor type as Elementor.

4. Set as Active Template: Next, you need to toggle the button to set it as active template.

5. Pre-built Templates: Below, you’ll notice three pre-built templates. You can select any one of them. After determining, click on the ‘Import’ button.

You can also design your own popup template by choosing the ‘Blank Template’ option.