How To Create A Coupon Popup With WordPress

SkyStra
Feb 8, 2021

Coupon popups on your WordPress website are a great way to turn website visitors into paying customers. 

Using a coupon popup alone won’t convert, but showing a coupon at the right time of the purchase process could turn abandoned carts to real sales. 

Some business owners may think that coupons devalue pricing on products & services, however offering a discount at the right time in the checkout process can help your customers make up their minds and complete the purchase.  There’s a distinct psychological impact on customers when a coupon is shown to them.

Everyone loves a good deal, right?

WordPress’s most popular eCommerce platform, WooCommerce, allows you to easily create coupon codes. However, it’s essential to deliver them to your customers in a meaningful way and at the right time to have the most impact on the sales process.

This article will teach you how to create coupon codes in WordPress and then share them with your potential customers using a coupon exit popup and the coupon spin wheel feature in the OptinMonster* plugin.

*Quick note: The OptinMonster plugin is a popup and lead generation tool used on WordPress websites. 

Preparation

Create A Free OptinMonster Account

To start creating your coupons, you need to create a free OptinMonster account, install their WordPress plugin, and connect the account with your website. OptinMonster is free, but to use all the features listed in this article, you’ll need either the Pro or the Growth plans.

Go to the OptinMonster website and create a free account. 

It will ask you for your credit card details for verification purposes (anti-spam measures), but it won’t charge you.

Install The OptinMonster Plugin

Next, we need to install the OptinMonster plugin on our website. Log in to your WordPress Dashboard, head to Plugins > Add New, and input Marketing Toolkit into the search field in the upper-right corner:

Click Install Now to start the plugin installation. Once installed, click Activate to activate the plugin:

The OptinMonster plugin connects your WordPress website with your OptinMonster account.

Connect Your OptinMonster Account

Head to the OptinMonster option in the left menu and click Launch the Setup Wizard to start the setup. Follow the on-screen instructions to connect your OptinMonster account with your website.

Once completed, you will be able to see the Campaigns option in your WordPress Dashboard under the OptinMonster menu in the left frame. 

The Popup Campaign

Create The Popup Campaign

1. Log in to your OptinMonster Dashboard, click Create New Campaign in the top-right corner and choose the Popup campaign type. 

2. Next, you need to select a template. OptinMonster has tons of professionally designed templates for all purposes, but we recommend using the Coupon template. However, you can choose and customize any template you like if needed. Use the search box to find the Coupon template or scroll down a bit to locate it.

3. Click the Coupon template and select the Use Template option.

4. Fill in your campaign’s name and select the WordPress website you previously connected to your OptinMonster account. Click the Start Building button to proceed further.

Design The Coupon Popup

The Start Building button will take you to OptinMonster’s campaign builder – an interface that allows you to use drag & drop functionality to design your campaigns easily. You can change primary and background colors, text, images, and more.

Click on any element in the template, and you can alter options for it in the left frame. 

Once you’ve finished your popup design, go to Optin Settings > Optin View Styles, and change the Background Overlay option. 

This option allows you to customize the color around the popup that appears to your customers and covers the background content. You can customize the Background Style (solid or gradient) and the Background Color itself. If needed, you can also add an image to your popup here.

Next, the Coupon template has a dashed border around the coupon. If you want to remove or alter it, click the border, then click the Settings cog icon that shows on the left-hand side. The options menu on the left allows you to change the color, width, and style.

Once ready, click Save in the top-right corner to save changes.

Delivering The Coupon Code

Now that we designed the coupon popup, we need to present it to customers. There are several ways to do this, but we recommend delivering it through OptinMonster’s Success view and send it via newsletter. In this case, if the visitor isn’t ready to make the purchase – we provide the code in the mail so they can use it later.

The Coupon template that we’ve chosen previously has a Success view set up already. To change the options, click the button in your coupon popup (“Yes, Send Me the Discount Code!”), select the Button tab on the left, and finally, the Action tab on the bottom. This will allow you to change the button action, but we recommend using the defaults if this is your first coupon.

If you want to automatically send an email to every visitor that clicks on the popup, you need to connect OptinMonster with your email marketing service. OptinMonster supports all major marketing/email providers, and once connected, you can use the Integrations tab on your campaign to set up the automated newsletter.

If needed, you can also adjust the Success View template by going back to the campaign’s Design tab. Click the Success option, and you can change any element on your Success view popup.

Coupon Popup Display Rules

The coupon shows to all visitors after 5 seconds after they’ve visited any page by default, but you can change this behavior by clicking on the Display Rules option in the top menu. We recommend trying out the Exit-intent display rule. This is a proprietary technology created by the OptinMonster, and it knows when a visitor is ready to leave your site so it can show the popup at the perfect time.

Publishing The Popup

Once ready, you need to publish your coupon popup. 

1. Save your changes and click Publish in the top menu. 

2. Use the toggle switch to make your campaign Live.

3. Scroll down, find WordPress, and select it.

4. Follow the on-screen instructions to put the campaign live on your website.

Spin-To-Win Coupon Wheel

If you want to engage your visitors and make things more fun for them – we recommend creating a spin-to-win coupon wheel. This is a mini-game that your website visitors can play to win various prizes such as discounts, bonuses, free shipping, free trial, etc. OptinMonster provides three spin-to-win templates you can use for this.

Let’s start!

1. Head back to OptinMonster Campaign Dashboard and click Create New Campaign.

2. Select Fullscreen for the Campaign Type option.

3. Scroll down, find Wheel templates, and choose the desired template.

4. Fill in the campaign’s name and select your WordPress website.

5. Customize your coupon wheel and change anything you like. If you want to customize the wheel options, click the wheel, and click Edit Wheel Sections on the left. You can change the label for any section of the wheel, add the coupon code, and toggle if it can win. Win Chance is random and is automatically determined. By default, the user will always land on a prize, but you can adjust this by turning on the Can win? option for the sections that don’t offer a reward.

6. Adjust the Display Rules as explained previously in this article.

7. Once ready, click Publish in the top menu to publish your coupon wheel.

That’s it!