How are you planning to use the popups built with JetPopup on your site?
The statistic has it proven, that in most cases popup elements help in boosting sales, attracting more attention to the needed products and highlighting the most needed information.
But how can we be sure that the popup template displays the offer that will get 100% response from your potential customer?
This is the success of the sales, that depends on the effectiveness of the popup template, nothing more or less.
And this is why the offer in the popup should be displayed at the right time and place, and feature the most needed products (e.g., the ones related to the product the visitor is now viewing).
With Popup Conditions, we can easily accomplish this task, making sure we can tune up the popup template to let it display the products that have more chances to garner one’s attention (as the related products list will fully depend on the current product page one’s viewing).
Also, in case you’ve got the product pages (e.g., for products of different categories) where you would not want to display such a popup, you can easily exclude the popup template from being shown for the specific product category. This will grant that the visitors won’t be irritated by the popup containing the content which is not needed in any way.
Let’s dive in and find out how to create such a popup with dynamic content and specific conditions.
Step 1. Preparing the content
We believe in being prepared, and preparation is definitely the needed step one has to take before actually creating a popup template.
In our case, we’d need to make sure we’ve got related products and have created an Archive template to apply for related products using JetWooBuilder. Please, make sure to check this tutorial to learn more about creating Related products template with Elementor.
Also, make sure that the WooCommerce products for which you want to display the popup with related products, are connected to the products you want to display as related ones, by tags. You can easily check it out in Products tab from your Dashboard, just look through the list of products and check if they have common tags.
Step 2. Building a popup template
Let’s create a brand new popup template, that will showcase the related products. To do it, navigate to JetPopup > Add New Popup block and here input the new popup’s name and click Edit with Elementor to proceed to editing it.
Now drag and drop the Text editor widget and place a shortcode for displaying related products into its Content area. Make sure you’ve switched to Text editor while doing so.
The shortcode for displaying related products is [related_products].
It embeds the products, related to the one currently displayed on the page, based on Archive template.
But, as you can see, no products are currently shown. The reason is that we’re just creating a popup template, and it’s not connected to any specific pages yet. The moment we’ll set conditions for it, the popup will display the data being viewed from the Single Product page.
Let’s add a title to the popup’s template as well. Drag and drop one of the widgets you want to use for displaying the heading of the popup (in our case it’s Animated text). Add the text you want to display and style it up according to your particular needs.
Don’t worry, the template looks not complete on the backend as no Single product page was selected by now, but when opened on front-end, the popup will show all the needed content.
Step 3. Setting the conditions
It’s time to add conditions for the popup template to display the popup stuffed with dynamic content we’ve just created on the pages we need. To do it, click the cogwheel icon in the bottom left corner to access the popup template’s settings block. Here navigate to Display Settings tab and here click the Conditions button to open up the popup conditions settings.
After that you’ll see Display the Popup window where you can exclude or include the pages on which the popup template you’ve created will be shown.
Click Add Additional Condition button to add a new condition, or use the one you’ve got in case there’s already one existing. Here you’ll see dropdown blocks, each one dedicated to the condition and aimed to make it more specific.
In the first dropdown you’ll be able to choose if the popup template is to be shown for entire site, on singular pages or archive pages. As we’re creating a popup to be shown only for particular product pages, let’s specify Singular condition.
The second dropdown’s content depends on the first condition you’ve chosen. When creating a Singular condition, you’ll be able to select if you want to set the popup template for the post type, posts from category, front page, a child page of any other page, etc. As you can see, it’s not needed to display the popup template on front page nor it will be necessary to display the related products for the 404 page, etc. So we specify Post type in this dropdown.
The last dropdown allows us to select the post type for which we’ll be adding the popup. Let’s select Products from the dropdown containing multiple post types we’ve got on the site.
Finally, let’s click Include button to make this rule we’ve just created active. Then hit Save to save the changes.
Step 4. The open event
When the conditions have been set, all we need to do is return to our popup template’s settings and here in the Settings block define the needed Open Event we’d like to use.
E.g., the related products can be shown when the visitor has viewed the product page and has decided to leave it (he hasn’t proceeded to checkout, so he’s still looking for the similar products, but wants to leave) – this we might use as a chance to show him the similar products in the popup.
Set the popup Open event to Try exit and click Publish to save the changes. Don’t forget that this popup template should be mostly to inform the visitor of similar products, it shouldn’t be annoying. It’s imperative that this template can be easily closed whenever the visitor wants to do it.
When everything is set let’s make our brand new popup template active. Click Publish button to set it.
Now you can proceed to any WooCommerce Single Product page and when you’d try to exit it the popup with the related products will appear.
Hoping this technique will help you bring more customers to your websites and make more sales. It’s fairly easy to use and can be accomplished in a matter of minutes with JetPopup.