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?
You’ve seen popups on many online stores. Ever wondered why businesses use them despite their reputation of being distracting?
The reason is simple: Popups convert website traffic to sales.
They can be a stable source of new leads in your email list. Also, Woocommerce popups can effectively share coupons, promote sales, 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.
How to create a WooCommerce popup
Ready? Just follow these steps to add a popup to your WooCommerce website.
To create a WooCommerce popup, we need an app.
Our go-to choice, obviously, is Wisepops. The first step: create a Wisepops account and connect it to your WooCommerce store.
Sign up for a free Wisepops account using Google sign-in or the traditional sign-in option. Follow the simple steps in the short video below to sign up for a free trial.
Don’t worry, 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.
|Prefer plugins for popup installation? |
Try the WooCommerce popup plugin.
● Easy to use
● Regular updates
● 5-star rating from users
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.
|For help with adding the code, check out this article: Embed Wisepops Setup Code [Wisepops Help Center]|
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.
Now, let’s create your first WooCommerce popup message.
I recommend making a discount coupon popup. Discounts are a major motivator for customers to buy, so we can try and score some quick sales while building our audience.
To start creating a campaign –
Click New Campaign in the dashboard.
From there, Wisepops will ask you to choose the way to build the campaign.
Let’s go with Campaign Assistant – it’s a beginner-friendly option.
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.
Check out the many goals in this menu: social media sign ups, giveaways, newsletter sign ups, callbacks, webinar invitations … We’re choosing only one option, but you should explore the many other options and templates once you’re confident.
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.
|Choosing the best WooCommerce popup format? |
Use our Popup Preview Tool to see how popups will look on your WooCommerce store in seconds.
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.
|Here’s some design inspiration for your WooCommerce popups: |
👉 Email Popup Examples
👉 Gorgeous Popup Design Examples
👉 Exit-Intent Popup Examples [+Design Tips]
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.
|Learn more about exit intent popups: |
👉 Simple Guide to Exit Intent Popups
👉 On Exit Popup Option [Wisepops Help Center]
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!
|Want to collect phone numbers instead of emails? |
Check out this guide: 12 SMS Popup Examples [+ How to Create Them]
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:
- How to Use Popups for Black Friday Marketing
- Best Popup Practices to Generate More Leads and Sales
- How to Increase Visitor Engagement for Ecommerce Stores
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.