You may be wondering how to add coupon codes in WordPress. This is not a very difficult task and you can do it with the help of a plugin.
In this article, we will explain how to add coupon codes in WordPress to your website so that your visitors can enjoy discounts when they shop on your website.
First, you need to install the Coupon Code plugin on your website. Once you have done that, go ahead and create a new page for your coupons. Make sure that you have added the following code in the head section of this page.
Table of Contents
Why Add a Coupon Code Field to Your Forms?
There are a lot of reasons why you might want to add a place on your payment forms for visitors to enter a discount code. Here are a few:
- Apply discounts to your order forms
- Boost sales using different marketing tactics
- Encourage customers to buy specific clearance items
- Drop the total price of visitors’ shopping carts
- Issue refunds or credits using coupon codes
- Reward loyal customers if you give special codes to VIP members
- Give discount or coupon codes in a specific email marketing campaign for lead generation (Birthday emails, Black Friday, etc.)
- And more
How to Add a Coupon Code Field to Your Forms
Step 1: Install the WPForms Plugin
The first thing you’ll need to do is install and activate the WPForms plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin. Among its many powerful features, WPForms works great to add a coupon code field to your forms.
Step 2: Set Up Your WordPress Coupon Code Form
Now that your WPForms plugin is installed, the next thing you’ll want to do is set up a payment form. That way, you’ll have a form to add your coupon code field to.
From your WordPress dashboard, head to WPForms » Add New in the left-hand panel to create a new form. Name it whatever you’d like in the Name Your Form field, then select the Billing / Order Form template.
So, your order form will populate these fields:
- Name (First and Last)
- Phone
- Address
- Multiple Items
- Total amount
- Comment or Message
WPForms lets you change your template however you like. You can drag fields up and down to rearrange their order, delete things if you feel you don’t need them, and drag fields from the left-hand panel onto your form if you’d like to add something.
Because we’re adding a coupon code field, we need to replace the Multiple Items field with a Multiple Choice field. This will let us change the price of the items if a user enters a coupon code.
First, we’ll delete the Multiple Items field by hovering over it and clicking the trash icon.
Step 3: Add a Yes/No Question
Next up, we’re going to add a dropdown box. This box will ask a user if they have a discount or not.
We want to do this because it’s best practice not to show your discount field unless you know someone has a code. We’ll do this with Smart Conditional Logic.
To do this, simply drag the Dropdown field from the left-hand panel to your form underneath the Total box, or wherever you’d like to place it on your form.
Feel free to have fun with the text in these spots, it’s your website. Try to keep it clear that the options are “Yes” or “No,” but if it matches your brand, you can edit these to something more fun like “Sure!” and “Nope!”. That’s totally up to you.
Before we finish, here’s a neat trick. You can add a placeholder to your dropdown so that neither of the options is selected by default.
To do this, click the Dropdown field in the form builder and click on the Advanced tab in the Field Options panel. Under Placeholder, type something like Select or Please Choose.
Step 4: Create Your Coupon Code Field
Now that your Dropdown field is created, the next step is to add a spot for someone to enter their promotion code if they select Yes in the dropdown box.
To do this, drag the Single Line Text field from the left-hand panel onto your form, right below the Do you have a coupon code? field.
Now, rename the Single Line Text field’s label to “Coupon Code” and then click on the Smart Logic tab.
Step 5: Create Your Validation Messages
The next thing you’ll do on your WordPress coupon code form is to add 2 validation responses. Simply put, we’ll create a response to show people if the promotional code is valid, and another one to show if it isn’t.
To start, drag 2 HTML fields from the left-hand panel onto your form below the discount code field.
Now, click on each of the HTML fields on your form to display the settings so you can adjust them.
In the 1st HTML field, type the message you want to show if a customer enters a valid coupon code. For our example, we’re giving new mailing list subscribers 20% off their purchases.
Step 6: Add Your Payment Fields
The last thing you need to do is add separate payment fields for each item, with full and discounted prices. Then we’ll use conditional logic to show the right price based on whether the customer has a valid coupon code.
Our example form has 3 items, so we need to add 6 Single Item fields — 3 for full price items, and 3 for discounted items.
We’ll click on the 1st Single Item field and set its price to $10.00, which is the full price of the 1st item in our Multiple Choice field. We’ll also set the Item Type to Hidden so users don’t see this field in our form.
Step 7: Add Coupon Code Form to Your Website
In order for people to use your coupon code field, you’ll need it to be displayed on one of your web pages like your checkout pages.
And it’s super easy to do with WPForms. WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.
Let’s take a look at the most common placement option: page/post embedding.
To begin, create a new page or post in WordPress, or go to the update settings on an existing one.
After that, click the black plus (+) button to add a new block. From the options that pop up, choose WPForms.
This is the process of Coupon Codes Generate In WordPress.