How to Create and Add a Coupon Popup in WooCommerce

Do you own a WooCommerce store and want to add a coupon popup in order to increase sales? In this article we will explain how you can add a coupon popup to your WooCommerce Store

You might be offering discount coupons and codes but what if your customers aren’t aware about these promotional codes. You might be sending out Emails to your customers but does everyone notice it? There would be a percentage of users who might be missing out on these promotional coupons. In such cases a coupon popup displayed on the WooCommerce store would be the ultimate solution.

You can display a coupon popup at the top of your store in such a way that it is prominently visible to your visitors. If you are running certain kind of sale you can display the same by making use of WooCommerce Sale plugins.

If you display a coupon popup at the top of your WooCommerce store there are high chances that user will certainly notice it. The only thing that you need to take care of is that these popups shouldn’t be an obstacle to user experience. You should avoid intrusive popups at all cost as they impact user experience and this might hamper the conversions. You should offer discounts, coupons by making use of coupon popups but they shouldn’t be annoying to customers.

Popups these days appear as in-page elements without being intrusive. These popups are user-friendly and are a great marketing tool that all WooCommerce store owners should leverage to its maximum potential. There are several WooCommerce Promotion plugins that can be used to create coupon popups but for the sake of this tutorial we are going to make use of is Optinmonster which is one of the most popular WordPress plugins for creating killer coupon popups that are proven to increase conversions.

Before we go on to create coupon popups we will first have to create coupons and then make Coupon Popup

There are two steps that go in the creation of a Coupon Popup

Step 1: Create Coupons Using Advanced Coupons

Step 2: Create Coupon Popups Using Optinmonster

Creating Coupon Code Using Advanced Coupons

In order to create discount coupons, coupon code for WooCommerce store we are going to make use of Advanced Coupons which is one of the most popular WooCommerce coupon plugin used for creating coupons for WooCommerce stores

In order to create a coupon code you will need to first install the Advanced Coupons plugin. For doing this you will first need to purchase one of their plans. You can check out their pricing plans by clicking on the below button.

Assuming that you have purchased one of their paid plans let’s proceed to the next step.

Navigate to your WordPress Dashboard –> Coupons –> Add New

You will come across a screen similar to the one shown below

Kindly note down this coupon code somewhere as we would be needing this in the next steps

Now when on the Coupons window scroll down a bit and you will come across Coupons Meta box. Here we will select the discount type and the amount / value for the same.

For the sake of this tutorial we will be using Percentage as the discount type and 25 as the amount/value

Setting up Coupon Restrictions / Conditions

Now having a 25% Off coupon with no conditions or restrictions can be dangerous for your business and that is why it is important to have certain conditions/restrictions put in place. Remember the phrase “Terms and Conditions apply” – that is exactly what we will dive deeper in the next step.

In order to setup conditions for your coupon follow the below given steps

Navigate to the Coupon Data section and click on Usage Restriction section. You can decide which products or categories you want the coupon to be applied.

You can also setup rules and conditions at cart conditions system level but this comes under the Premium plans of Advanced Coupons. This system will help you setup rules using the AND/OR rules and by using a set of predetermined set of conditions.

Upgrading to the Paid plan of Advanced Coupons will give you several customization features like offering Buy One Get One Deals (BOGO Deals), setting up a scheduler on when the coupons should be showcased. All these features will help you implement the discounts and the coupon game to the next level. SO it is certainly worth upgrading to their Premium plans

Assuming that you are done setting up all the coupon related settings it’s time to create a coupon popup. Before going ahead let’s have a look at some of the Exit-intent popups created on a WooCommerce store using Optinmonster

Examples of Exit-Intent Coupon Popups on WooCommerce store

Optinmonster offers tons of features using which you can customize the coupon popup, create specific rules as to when the popup should be triggered. Let’s have a look at couple of examples.

Optinmonster’s Exit-intent technology detects visitor behavior and shows them a popup just when the visitor is about to close the window or navigate away from your website.

Implementing Exit-intent popup will help reduce abandoning visitors and will improve conversion rates. If you don’t implement exit intent popup then those visitors are anyway going to abandon your website. So how about trying to convert these abandoning visitors into customers by offering them discounts and offers in the form of an exit-intent popup.

Using Exit-intent popup on an WooCommerce Store

Let’s check out the use case of exit-intent popup. Let’s assume the user added product to cart but didn’t buy – In such cases you can setup rules and trigger popup such that when the user is about to exit you can show the popup to them offering discounts or offers like 10% OFF or 15% OFF

Below we have shown an example of how an E-Commerce website has made use of an exit-intent popup by utilizing Optinmonster’s Exit intent feature.

Here’s another specific example of a Ecommerce website which is showing an exit-intent popup based on user’s interaction with the site and offering them a 10% discount

You can even build your Email list and do retargeting via if you ask your customers to enter their Email to avail the 15% discount. Below is one such example

All the exit-intent popups that we just saw in this article have been created in Optinmonster

Optinmonster has a huge library of templates which you can choose from to create a coupon of your choice. Besides this you can also create Email opt-ins in order to build your Email list.

Now let’s check out how you can create a coupon popup using Optinmonster

Important Pre-requisite

You will have to buy one of the Paid Plans of Optinmonster in order to create a Coupon Popup. Alternatively, you can sign up for their free trial and experiment with your campaigns

Assuming that you have already purchased the Pro plan or any paid plan of Optinmonster let’s proceed further and have a look at the steps involved in creation of a coupon popup using Optinmonster.

As such Optinmonster provides tons of templates that you can choose from but as per our requirement we are going to proceed further with the Coupon template.

In order to create the coupon popup you will have to navigate to your WordPress Dashboard –> Mouseover on Optinmonster –> Click on Templates -> Choose Popup from the list.

Once you click on Popup as shown in the above screenshot then you will come across a set of sub templates that you can use on your WooCommerce website but as stated earlier we are going to use the Coupon template.

When on the templates page keep on scrolling until you come across the Coupon template

When you mouseover on the coupon template you will see two options “Use template” and “Preview”. If you want to see how the coupon popup looks like then you can click on Preview. In our case we will click on “Use Template”

Once you click on “Use Template” you will come across a screen similar to the one shown below. It will ask you to enter the name of the popup campaign and the website on which you want the popup to be displayed.

Once you have clicked on “Start Building” you will come across the amazing drag and drop campaign builder of Optinmonster

You can change any element of the coupon (e.g text, CTA text, CTA color, coupon background color etc) by using the options available in the campaign builder.

The most important elements that we are going to change is the Email field and the CTA button

You can play around with the styling, font, border color, background color and much more.

We want to display the Coupon code once the customer enters their Email address. Once you are done customizing the coupon popup then click on the Success tab which is next to the Optin tab (you can refer to the screenshot below which shows the success tab next to the Optin tab)

Once you click on the Success tab it will show you what your visitors will see once they enter their Email and click on the confirmation button (in this case it is “Yes. I want this Exclusive Deal”

Now the text “SAVE25” that you see in the above screenshot is a placeholder text. You can replace this placeholder text with the coupon code you created using Advanced Coupons in one of the earlier steps.

Once you have replaced the placeholder text you can save the Coupon popup but do not close the editor yet.

In the next step we will configure the display options (this will showcase the coupon popup to your visitors based on certain conditions)

Configuring the Display Conditions for the Coupon Popup in Optinmonster

Optinmonster offers this cool feature using which you can define when you want to show the coupon popup to your visitor. Ideally speaking, you don’t want to annoy your user by showing the coupon popup to your visitor everytime they visit your WooCommerce store and that is the reason it is important to setup display rules / conditions for the coupon popup in Optinmonster.

In order to setup the Display conditions click on the Optin tab and then click on the Display settings section that appears on the left hand side. You can decide when to show the coupon popup to a visitor if they have already seen it but not converted.

Generally speaking, the discounts and offers are for a limited time so we recommend that you choose the “never, or until browser cookies are cleared option. This way, if the user has already seen the coupon popup earlier and they aren’t interested then they will not see the coupon popup again. This setting is an important one as you don’t want to annoy your visitors by showing them the coupon popups even if they aren’t interested.

Save and Publish your Coupon Popup

Once you are done with all the above changes and configuration it’s time to finally save and Publish. To start the publishing process, click on the Publish tab to see publishing options, then toggle the status button to make it live.

Conclusion:

WooCommerce coupon popups if implemented effectively can bring in great results and revenue. So if you want to implement coupon popups on your WooCommerce store then you should certainly use this amazing combination of Advanced Coupons and Optinmonster.

Leave a Comment

Your email address will not be published. Required fields are marked *