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

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

• Steps to create a WooCommerce popup

Why use WooCommerce popups?

Simple—

On average, popups convert around 4% 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.

Next—

This store made 17% of monthly sales in six hours with popups:

Charlotte Bio case study

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 popup app account

To create a WooCommerce popup, we need an app. Our go-to choice, obviously, is Wisepops (rated 4.9 on Capterra)

The first step: creating a free account—

★★★★★

"We've increased our signups by 10x, very easy to integrate with our website and email platform, too"

Wisepops review from Capterra

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

To start–

Click Create Campaign.

Step 3: Choose a template

Now, we pick a template for your WooCommerce popup.

And Wisepops has lots to choose from:

Step 4: Personalize the template

Once you’ve chosen the template, Wisepops will redirect you to the Campaign Editor. There, you’ll see the template, ready to play with.

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:

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.

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.

The campaign is almost done.

Save your campaign by clicking Save at the top right corner of your screen.

Step 6: Activate your campaign

Your WooCommerce popup is now ready!

You can preview and see how it will appear on your website by clicking Preview in the top right corner of your screen.

To display the campaign on your site, simply add the Wisepops code snippet with ease: add Wisepops to your website.

Additionally, to have the collected emails sent directly to your email application, connect it to Wisepops through our Integrations.

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

• Best popup practices for higher conversions

• How to increase visitor engagement on websites

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.