This guide covers everything you need to know to create WooCommerce popups for your store, even with no previous experience.
Besides setup, you’ll find conversion-related tips to help you get more leads and sales with WooCommerce popups.
In this post we cover:
Why use WooCommerce popups?
Popups convert website traffic to leads and sales.
They can collect emails from your visitors at all times. Also, Woocommerce popups can effectively share unique discount coupons, sales promotions, collect customer feedback, and drive traffic to specific pages on your website.
And if you design them the right way, your visitors will actually like them.
But don’t just take my word for it –
Ben, whose success story with popups has lots of valuable takeaways, had this to say about them.
Faguo, another business that uses popups, captures 5,000+ new emails with popup campaigns.
I can keep going but –
Let’s learn how to create a WooCommerce popup instead.
Get a head start on designing WordPress pop-ups. Browse our library of designer-made popup templates. Start converting your traffic.
➡️ Get started
How to create a WooCommerce popup
Follow these steps to add a popup to your WooCommerce website. But if you prefer plugins for popup installation, try our WooCommerce popup plugin.
Step 1: Get a free Wisepops account
To create a WooCommerce popup, we need an app.
The first step:
Create a free account and connect it to your WooCommerce store.
Sign up for a free account using Google sign-in or the traditional way. Follow the simple steps in the short video below to sign up for a free trial.
You won’t need to add credit card details. You’re trying Wisepops 100% free with no strings attached – we want everyone to experience the value of our product.
Step 2: Add the setup code to your store
Now it’s time to connect your WooCommerce store and Wisepops.
Click the Get my setup code button at the top of the dashboard.
The button will display the code for you to copy.
Click the copy button and add the setup code according to the instructions. The only requirement – place the code at the end of your website page’s HTML, right before the </body> tag.
Once the registration is done, Wisepops will take you to your dashboard. That’s where you’ll manage campaigns. An operations center, if you will.
Step 3: Create a popup campaign
Now, let’s create your first WooCommerce popup message.
I recommend making a discount popup. Discounts are a major motivator for customers to buy, so we can try and score some quick sales while building our audience (here are discount code ideas for you, too).
Click Create Campaign.
Then, choose Campaign Assistant.
Step 4: Select your goal
Next, Wisepops will ask you what you want to use this WooCommerce popup for.
You can choose among several options, but let’s go with Grow your audience. We’re going to create a popup with a coupon to build an email list and drive sales.
Then, choose Coupon in the menu that appears.
Step 5: Choose a template
Now, we pick a template for your WooCommerce popup.
And Wisepops has lots to choose from.
I’ll go with the second template – this popup is designed to focus visitors’ attention on our generous offer. Here it is.
Step 6: Personalize the template
Our clients love Wisepops because it allows them to change every element in their popups. By doing so, they make amazing popups that look like natural extensions of their websites.
Here’s a quote from one happy client, Martin from Faguo.
Indeed, lead generation experiments can be extremely useful (take it from Martin—his experiments generated an impressive 15% CTR), so knowing how to personalize your popups is a must.
That’s exactly what we’re going to learn right now.
Once you’ve chosen the template, Wisepops will redirect you to the Campaign Editor. There, you’ll see the template, ready to play with.
Here’s how its original version looks.
Inside the Campaign Builder, you’ll see the main menu with five sections: Popup, Blocks, Tab, JS, and Display. We’ll customize our WooCommerce popup by clicking on elements we want to change – it’s super easy.
Let’s make these customizations:
Change the headline to “How about $20 off?”
The main text to “Get $20 off your order if you sign up now.”
Change the CTA button’s color from red to black
Increase the headline’s font size to 40 pixels
Add an original image
I’ll go ahead and click on the headline first. Then, I’ll click the Edit button that appears immediately. The headline’s text will automatically be selected like this, so I can start typing the new version.
So, I’ll do the same for the main text, too.
To increase the font, I’ll go to the size selector that appears above the template once I click any textual element.
Next, to add an original image, click on the default one. Wisepops will automatically open image settings to your left.
Click the Replace button and choose an image from your computer (I’m using a photo by Arno Senoner downloaded from Unsplash).
And the last customization:
Click on the CTA button to reveal customization settings. In the top part of the editor, locate color settings (right after size selector).
Choose black in Background color.
Once I’m done the template will look like this. That’s better, agree?
Just one big question remains:
What’ll happen when visitors click on Get my coupon?
In this case, Wisepops will show a thank you popup window with the coupon code. Click THANK YOU to see this WooCommerce popup.
We can leave the text as it is. But be sure to change the coupon itself—it says FIVEOFF as default.
We can do more great customizations to your WooCommerce popup. But let’s leave the design for now and move on to the next step.
Just remember that you can change anything – just click on an individual element to make any adjustments.
Step 7: Choose when to display the popup
Let’s make this an exit intent popup.
This means the campaign will be displayed when visitors are about to leave your store. I’ve chosen this one because it outperforms “traditional” popups by 5%.
To set up the timing –
Go to the Trigger section in the Display main menu option.
There, choose On Exit.
The campaign is almost done.
Save your campaign by clicking Save at the top right corner of your screen.
Step 8: Activate your campaign
We’re almost there.
Click on the Wisepops logo in the top left corner to go to the dashboard. There, make sure you’re in the Campaigns tab.
Next, set the toggle switch to on to activate your first WooCommerce popup campaign.
You’re all set!
WooCommerce popup: next steps
Having a WooCommerce popup on your store is a great way to collect emails and drive sales. Our clients have even reported click-through rates as high as 17%, which meant several thousand new leads added to the email list every month.
Now that we’ve learned how to create a WooCommerce popup, it’s just a matter of tracking and improving your campaign. But don’t stop there – experiment with the different ways to convert your traffic (coupons, free shipping, early access to sales, etc.).
We have guides to help you in every scenario:
If you need any help with your popups, check out the Wisepops Help Center or message the Customer Service team using the chat function in the app.
Caro has nearly twenty years of experience as a professional writer and editor. She specializes in the fields of tech and ecommerce content.
Caro has degrees in Business and Arts, as well as post-graduate qualifications in Editing and Publishing.