Wisepops logo
Last updated Mon Jan 30 2023

WooCommerce Popup: How to Create a Popup for Sales [+Plugin]

By Caro Cooper

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:

Create WooCommerce popups now 📦

Why use WooCommerce popups?

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.

lead generation quote business owner

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

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.

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 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.

Step 2: Add the setup code to your store

Now it’s time to connect your WooCommerce store and Wisepops.

It’s easy.

Click the Get my setup code button at the top of the dashboard.

setup code wisepops

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.

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.

To start creating a campaign –

Click New Campaign in the dash.

Then, choose Campaign Assistant.

popup campaign assistant wisepops

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.

popup temlates

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:

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!

Want to collect phone numbers instead of emails?

Check out this guide: SMS Popup Examples [+ How to Create]

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 Cooper

Help