Are you looking to add a coupon field to the WooCommerce checkout page or perhaps remove it altogether? Maybe you're seeking a way to relocate the coupon field from its default position.
While WooCommerce's default settings include a coupon field at the top of the checkout page, it may not always align with your store's layout or design preferences.
Unfortunately, WooCommerce lacks a direct option to remove the coupon field exclusively from the checkout page without affecting the cart page or even relocating it.
In this blog, we will share how to add a coupon field to your WooCommerce checkout page and provide solutions for removing or relocating it within the checkout page if needed.
Let’s begin.
Contents
A WooCommerce coupon field is a feature that allows customers to apply discount codes or coupons on the checkout page during the buying process.
By entering a valid coupon code, customers can avail themselves of various promotional offers, such as:
The coupon field enhances the shopping experience by allowing customers to save money, thereby encouraging them to complete their purchases.
Note: WooCommerce, by default, doesn’t offer a coupon field on the checkout page.
Move to the next section to learn why you should make an extra effort to add a custom field, such as a coupon field, to your WooCommerce checkout page.
In today's competitive landscape, every aspect of the customer experience matters. Failing to integrate a coupon field directly onto the checkout page can potentially disrupt the flow of the buying process and hinder customer satisfaction.
By addressing this issue and adding a coupon field to the WooCommerce checkout page, you can significantly enhance the overall shopping experience for your customers.
Here are some of the benefits of adding a coupon field to WooCommerce checkout:
We hope you now understand that while most ignore this, treating it as a small addition and adding a coupon field can bring a lot of benefits to your WooCommerce store.
🔔Note: While having a coupon field in WooCommerce checkout has many perks, you may want to relocate it for better results or remove it depending on your strategy. We will cover everything later in this blog.
Here are the top 3 WooCommerce checkout coupon plugins for adding a coupon field to your WooCommerce checkout and maximizing profits with coupon codes:
FunnelKit Funnel Builder is the best WooCommerce sales funnel builder. It allows you to create conversion-optimized checkout pages. You can easily change the location of the WooCommerce checkout coupon field by dragging and dropping.
This plugin aims to enhance users’ shopping experiences while increasing your store's average order value by offering pre- and post-purchase upsells within a sales funnel.
Here are the key features:
Price: A free version of FunnelKit Funnel Builder is available. However, with this plugin, you would need the pro version to add a coupon field to the checkout page. The premium version starts at $99.5/year.
The Advanced Coupon plugin lets you create smart coupons that users can apply on the checkout page to claim various discounts and offers.
This invaluable plugin allows you to create different coupons, like WooCommerce coupons, store credits, gift cards, loyalty programs, BOGO Coupons, and discount rules.
You can use FunnelKit Funnel Builder to create a beautiful checkout page with a coupon field and Advanced Coupon to create smart coupons that customers can apply on the checkout page.
Here are some of the key features:
Price: It’s a freemium plugin. The premium version starts at $119.00 for a single site.
FunnelKit Cart replaces the cart page with a modern sliding cart that users can use to view and update the cart items.
With this side cart, users can apply coupon codes inside the cart itself and also head out directly to the checkout page without having to visit the cart page.
The best part about this sliding cart is that it streamlines the shopping experience by eliminating the cart page step and helps boost average order value by offering in-cart product recommendations and a milestone-based reward system.
Here are some of the key features:
Price: The basic version of FunnelKit Cart is free to use. You can buy the pro version with the FunnelKit Funnel Builder Plus and the above package, which starts at $99/year.
We have compiled these three plugins because each serves a different purpose, cumulatively making the WooCommeere checkout coupon as profitable as possible.
For instance, with FunnelKit Funnel Builder, you can place the coupon field anywhere on the checkout page, like a mini cart.
With an Advanced coupon, you can create smart coupons like BOGO and another discount coupon that users can apply to claim a discount, which will make the customers happy and keep them coming back.
Also, with FunnelKit Funnel Builder, you can eliminate the cart page, optimize the buying process, and effectively boost average order value.
To add a checkout coupon to WooCommerce checkout, follow these steps:
From the WordPress dashboard, navigate to WooCommerce ⇒ Settings and make sure you are on the General settings tab.
Now scroll down and check the option “Enable the use of coupon codes.”
🔔Note: Enabling this option will add a coupon field to both the cart and checkout pages.
Click on “Save Changes” to update the settings.
Now try placing an order, and on the checkout page, you should see a coupon field at the top.
This is how you can add a coupon field to your checkout page with the default option. At the same time, it does the job; it doesn't give you the flexibility to change the location of the coupon field.
Also, the top position isn’t the most user-friendly because when users apply the coupon code, they have to scroll down to see the offer they are getting.
In the next section, we will share a better way of adding a coupon field to the checkout page with more flexibility.
In this section, we will share how you can replace the default WooCommerce checkout page with a better-looking checkout page and how you can control the placement of the coupon field to make it more convenient for your customers.
We will use the free version of FunnelKit Funnel Builder.
🔔 You can refer to the documentation on how to install and activate FunnelKit Funnel Builder.
Now let’s create a custom checkout for your WooCommerce store. For that, navigate to FunnelKit ⇒ Store Checkout.
Now, choose your preferred page builder and the template you like. We are choosing Hific here because it has a free version.
After that, choose a page builder to filter the sales templates. To check any template, hover on it and click on the preview button.
With the free version of FunnelKit Funnel Builder, you can only create a single-page checkout. However, if you opt for the pro version, you can create a multi-page checkout that’s more conversion-optimized.
Now, to import, click on the “Import this Template” button to import the template. After that, provide a store checkout name.
This will import two templates: checkout and thank you page.
Next, you need to edit the checkout page. To do so, click on the checkout page option.
Now, you can edit the checkout page design and content with the page builder you have chosen, which, in our case, is Elementor.
So, click on the “Edit Elementor Template” option to customize the checkout page.
After customizing the content, scroll down to the checkout Form Fields section. Here, you should see the Coupon code placed right before the order summary section.
We think this is a great placement, as users can see how the coupon code affects the order details right below the coupon field.
Here is a preview of the coupon field:
Customize the coupon field.
As you can see, the coupon field is basic. However, you can make it a clickable link. To do so, click on the Coupon Field and turn on the option ”Make Coupon Field a Clickable Link.”
You can also update the Label and make it required if you want.
Make sure to click on ‘Update’ to save the changes.
🔔Note: If you want to change the color, padding, border etc of the checkout coupon field, you can do so while editing the checkout page with your preferred page builder.
Here is what the clickable coupon field looks like:
If you have a question like, “How do I move the WooCommerce coupon field on the checkout page?” The answer is simple.
To change the order of the coupon form field, all you have to do is drag and drop the coupon field to the desired location.
For instance, we are moving the coupon code field to after the order summary.
Make sure to click on ‘Save’ to update the changes.
Here is the preview of the coupon field in a new location:
You can also customize the thank you page.
🔔 Note: If you upgrade to the pro version, you can offer an order bump and one click upsell to effectively increase the average order value of your store.
Lastly, click on the "Enable Store Checkout" button to activate the store checkout.
This is how you can add a checkout coupon field to WooCommerce checkout and place it wherever you want.
We have talked about adding a coupon field to checkout until now, but how about hiding or removing the coupon field?
That’s what we will cover in the next section.
Here, we will share two ways to remove or hide coupon field from the WooCommerce checkout page:
To use this method, navigate to WooCommerce ⇒ Settings ⇒ General and uncheck the option “Enable the use of coupon codes.” Make sure to click on Save Changes to update.
🔔Note: Enabling this option will add a coupon field to both the cart page and checkout page.
However, you can solve this problem by eliminating the cart page and replacing it with a sliding cart using FunnelKit Cart.
For more details, read the blog “How to Skip WooCommerce Cart Page”.
If you are using FunnelKit Funnel Builder to create your checkout page and add a coupon field, then removing the coupon field is way easier than you think.
To remove the coupon field from your WooCommerce checkout page, edit the checkout page, scroll down to the Checkout Form Fields section, hover on the Coupon field, and click on the ‘X’ icon.
Make sure to click on Save to update the changes.
These were two ways of removing the WooCommerce checkout coupon. Depending on the method you use to add one, follow the relevant process to remove it.
A WooCommerce checkout coupon URL is a URL that directs users directly to the checkout page, where specific products are added to the order details, and automatically applies a preset coupon code.
This is quite effective if you want to run a special discount offer for a specific group of people, as you can share the URL with only those people.
With FunnelKit Funnel Builder, you can easily create a WooCommerce checkout coupon URL. To do this, you need to have the premium version of FunnelKit Funnel Builder.
After that, Edit the checkout and move to the Optimization tab. Here, scroll down to the “Generate URL to populate checkout” section and expand the section. Then, set the following values:
After providing the URL, you will find the WooCommerce Checkout Coupon URL in the field “Coupon URL”.
Make sure to hit Save.
Now, you can share this WooCommerce Checkout Coupon URL with the target audience via social or broadcast SMS and email campaigns.
Here is a preview of the WooCommerce checkout coupon URL:
The above multi-step checkout is built with FunnelKit Funnel Builder’s Hific template. This is a premium template available with FunnelKit Funnel Builder. As you can see it also has a beautiful mini cart, and the checkout coupon field is set just below it, making it convenient for users.
Note: You can also auto-apply a coupon code to the checkout page using FunnelKit Funnel Builder.
Here are some common questions people ask about WooCommerce checkout coupons:
You can hide/remove the coupon field from the WooCommerce checkout form using default settings. However, note that this action will also remove it from the cart page.
If you only want to remove the coupon from the checkout form, you can use FunnelKit Funnel Builder to create your checkout page and remove the coupon field.
You can’t limit coupons with guest checkout using the WooCommerce default option. Instead, you can rely on a plugin like Advanced Coupon, which restricts coupons based on user roles.
With FunnelKit Funnel Builder, you can easily move the coupon field from the default top place and relocate it to anywhere on the checkout page form.
Offering discounts serves as the push users need to place an order. If you’re considering offering a discount coupon, you should present it on the checkout page.
Why? Because the checkout page represents a crucial stage in which many users abandon their carts. By offering a WooCommerce checkout coupon, you can motivate users to complete their purchases.
It's crucial to position your WooCommerce checkout coupon strategically to maximize its effectiveness. With FunnelKit Funnel Builder, you can easily achieve this. Additionally, keep in mind that you can enhance your store's average order value with order bumps and upsell offers.
Our experts highly recommend replacing the cart page with a slide-in cart provided by FunnelKit Cart, as it streamlines the entire shopping experience.
So, are you ready to harness the power of WooCommerce checkout coupons to drive sales effectively?