Are your customers unaware that you are running a promotion or offering a discount on your store? Then you must learn how to create a coupon popup. You’ll learn the step by step guide on how to make coupon popups.
Do you know your customer base is distributed that’s why even if you send emails to your existing customers, or put up a notifications on your store, there is always someone who’s going to miss out on your discounts or promotions. But, if you use the WooCommerce coupon popups, you’re sure to convert anyone that’s on your website/store.
Popups are hard to miss because they come up right in your face, and if you activate it correctly or make it show up on the right places, you’ll benefit tremendously.
So, let’s get right to it and create a WooCommerce popup, this will make sure that every visitor whether they’re new or regular get to see the discount coupon.
Why Should You Use Coupon Popups In WooCommerce?
If you’ve been around for a while, by now you might be confused why we’re using coupon popups in our store. Popups, to most people seem annoying as it has been useful a lot of time, we’ve also seen popup ads that completely ruin our internet experience.
But the websites and stores that do use popups use it very strategically. They don’t use it to annoy us. You have store, so you have the option to advertise the coupon with your popup, so this can actually convert them into a customer right away with other crazy time-based tactics.
Below is an example of a coupon popup that is tailored towards a special day.
The old school popups were annoying, modern popups if built correctly won’t click and appear on a new window. Those kind of popups affect our internet user experience. Modern popups will work right over the content, with just a simple click modern popups becomes user-friendly.
Even though you want to not use popups, popups convert because if done right, it’s one of the most effective marketing tactics. After one study, the high-performing popup converted at around 9.28%. If the popup isn’t built well, it converts on average at about 3.1%.
Nowadays getting conversion rate at over 1% is hard, but these coupon popups work. These kind of WooCommerce coupon popups is the perfect way to convert visitors into customers. Also, you don’t to worry, you’ll also be build a list of buyers and a solid base of email subscribers who are interested in specific products from your store.
Step By Step Guide On How To Make Coupon Popups. (Follow This 4 Step Process).
There are lots of tools in the market with which you can create a WooCommerce Coupon Popup.
We recommend you to use OptinMonster in this example. It has loads of templates that you can instantly use, tweak it and publish it in minutes. Best of all, it works well with all the email opt-in forms and other email collectors like floating bars that you can have on your store.
In order to use OptinMonster plugin, you need to create free account on their website and connect it to your WordPress account that’s on your website/store. They’ll ask you to install the OptinMonster Plugin so you’re ready to go ahead with the 4 steps mentioned below.
Step 1: Create A WooCommerce Coupon Code.
The very first step is to create or generate a coupon code that we need for our WooCommerce coupon popup.
Use the Advanced Coupons Plugin, it works really well with your WooCommerce store.
Head over to your WordPress dashboard, click on Coupons >> Add New.
Now all you need to do is to click on the button Generate coupon code. You can go ahead and add a description to remember the purpose of this coupon code.
Make sure to save a copy of the created coupon code (as above), we’ll be needing it on the popup that we’ll create.
Now scroll a bit down, you’ll see the Coupon data meta box.
Go ahead and select the discount type from the drop down menu and enter an amount for that coupon:
In the example above, we’ve added a 25% discount. We’re going to be using this. A coupon should have conditions as to when this applies, giving away discounts simply has no appeal to the product value, but create those cart or even limited quantity restrictions increases the product value perception in everyone’s eyes.
Step 2: Configure The Coupon's Conditions.
In order to configure the coupon’s conditions, head over to Coupon data >> Usage restrictions tab, that’s where you can assign where this coupon code should apply or work on.
Below is a reference image to help you follow along.
You can also use the cart conditions option, its part of the Advanced Coupons plugin. It allows you to set up rules with some conditions. If the order follows them, your store will work in your favor.
Example of conditions are as follows.
You’ve got to decide first what type of coupon popup you’re going to create.
Sometimes, you’ll want to create welcome coupons, sometimes an auto-apply discount coupon, etc. So, figuring that out is going to help you a lot.
Step 3: Create The WooCommerce Popup.
OptinMonster made is easier to create a coupon popup, now it’s time to create a popup using it.
So, click on the OptinMonster tab on the left panel of your WordPress dashboard, then click on Create New, under Popup Menu.
Now that you’ve clicked on Create New, you’ll be presented with a lot of templates that you can use. Using templates helps you save a lot of time. They’re perfect fit for WooCommerce Popups.
Choose the one you like and get on with our next steps.
Since we’re showing you how to create the coupon popups, we’ll select the coupon template and we’ll be modifying them to our design liking.
So click on Use Template to use that template.
Follow along with this steps as in the image below.
Now, you’ll have to create a name for the popup so that you know which it is. Then you’ll be able to customize the design according to your requirements.
OptinMonster has a drag and drop editor, so it’s pretty easy to create a coupon popup.
It’s pretty easy to edit the design. Click on the element you want to edit, and you’ll see the relevant options from the left open up. That’s the power of the text editor option you’re seeing below.
We need to make sure that we’re collecting email address and also there’s a call to action button for the customer to click.
That’s why we need to make sure the email field and the final submit/confirmation button is added. You can click and rename it asap. Then you can send them the coupon code via email or show the coupon code immediately.
Let’s show it to them immediately.
To edit that email field, simply click on it and you’ll be able to edit the placeholder text.
Do it and follow along to learn how it’s done.
I hope you’re getting a hang of how to edit the text on your Coupon popup. Now, let’s see how to style the design.
There’s this styles tab on the left, click on it and you’ll be to see a lot of options to style this popup.
Styling should be pretty easy.
Once you’ve completed styling your popup, you’ll need to move to the next step.
You’ll see a Success tab on the top of the screen, next to the opt-in form that you’re creating.
Success tab is what shows up to the customer once they enter their email address and hit the submit button. That’s where we’re going to give them the coupon code we created earlier in the previous steps.
So, go head, replace that coupon code placeholder with the actual coupon code value that you’ve created earlier.
Once you’re done, please save the changes, but don’t close that editor screen yet.
Step 4: Configure The WooCommerce Coupon Popup’s Display Conditions.
Now that we’ve built the coupon popup that collects email address and shows the coupon code, we’ve not fully customized or set the settings for when and where it should display.
Those are called Popup’s display conditions.
So, in order to configure the display conditions, you’ll have to go back to the Optin tab, before the Success tab, there’ll be Display Settings option on the left side.
This is where you set the settings to where and when you want this popup to show up or work.
Below is the example of what we’re referring to.
Most coupon codes are not a permanent offer, so select Never, or until browser cookies are cleared option.
Now, if a visitor is not interested, they’ll not see this coupon popup again.
Don’t forget to save the changes for the popup.
Now go ahead and publish this popup coupon.
And, it will go live on your website/online store.
With the help of WooCommerce coupon popups, you’ll be able to convert visitors into customers, and also remind or convert your regulars so they don’t miss out on this new offer or promotion that you’ve got going.
Installing a coupon popup, you’re growing a customer base with your email list and also trying to convert the new ones as well.
We recommend you to use OptinMonster as demonstrated in this step by step guide on how to make coupon popups.
To make the coupon popups work with WooCommerce, you’ll have to use Advanced Coupons as they can skyrocket your conversions.
If you have questions, please drop them in the comments below, we’ll try helping you out.
Thanks for reading!