How to Hide Coupon Code Field on the WooCommerce Checkout Page

Offering coupon codes is a great strategy to increase sales.

However, always displaying a coupon box on the cart page or checkout page may not be such a great idea! Because it can distract the customers from proceeding to complete the checkout process.

For example, let’s take a look at the cart page of Wolf & Badger’s online store.

At the bottom right corner, you can see a field to enter the coupon code.

When customers see the coupon box where they can enter a coupon code, they may start looking for coupon codes. They may leave the checkout page searching for the discount coupons on the rest of your website, your social media accounts, or on Google.

This practice is known as coupon hunting and it’s very common.

From the search suggestions provided by Google when I just typed wolf and badger in the search input field, you can see that there are two suggestions related to the coupon or promo code.

It means there are lots of people searching for coupon codes for Wolf & Badger online store, probably after seeing the input field to enter coupon code on the checkout page.

Some of these people who go after coupons may decide to postpone their purchase until they get a coupon code.

Some others may never come back.

This will hurt your conversion!

So, it’s a good idea to hide the coupon code field from the checkout page when you don’t have any active coupons to prevent customers from leaving the checkout process for coupon hunting.

In this blog, we will show you how to disable the coupon code feature in WooCommerce and how to hide the coupon field on the cart or checkout page.

We will also share a few proven strategies to prevent cart or checkout abandonment due to coupon hunting.

Disabling the coupon field from the cart and checkout page on WooCommerce
Disable coupon code field only on the WooCommerce checkout page or cart page
Hide coupon code fields with CSS
Smart techniques to prevent coupon hunting
Summary

Disabling the coupon field from the cart and checkout page on WooCommerce

If you do not have any active coupon or promo codes, you can remove the coupon field from the checkout page very easily.

Go to WooCommerce > Settings to open the WooCommerce settings page and choose General from the list horizontal tab groups.

Scroll down a bit to the Enable coupons section and uncheck the checkbox nearby Enable the use coupon codes.

If you have this checkbox unchecked, coupon code fields will be removed from all places on your WooCommerce store.

Once you make the changes, don’t forget to click the Save changes button.

Disable coupon code field only on the WooCommerce checkout page or cart page

Disabling coupon code from the WooCommerce will remove the coupon code field from the WooCommerce store completely. So, customers can’t see the coupon code field in both the checkout page and the cart page.

But sometimes you may want to disable the coupon code field only on either the checkout page or the cart page while displaying the coupon code on the other page.

It can be achieved by adding a few lines of PHP code to the functions.php file in your theme.

Step 1: Open WordPress Theme Editor

In the WordPress Dashboard, go to Appearance > Theme Editor to open the WordPress Theme Editor screen.

Step 2: Choose functions.php

In the Theme Editor screen, you can see the list of files in your active theme’s folder. Scroll down through the list and click on the Theme Functions (functions.php) file to open it in the text editor screen.

Step 4: Copy the PHP code

Depending on which page you want to disable the coupon code field, you can copy either of the two PHP code snippets given below.

PHP code to disable coupon code field in the cart page


// hide coupon field on the cart page
function disable_coupon_field_on_cart( $enabled ) {
    if ( is_cart() ) {
        $enabled = false;
    }
    return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_cart' );

PHP code to disable coupon code field in the checkout page


<?php
// hide coupon field on the checkout page
function disable_coupon_field_on_checkout( $enabled ) {
    if ( is_checkout() ) {
        $enabled = false;
    }
    return $enabled;
}
add_filter( 'woocommerce_coupons_enabled', 'disable_coupon_field_on_checkout' );

Step 5: Add the PHP code to functions.php

In the WordPress Theme Editor screen, scroll down to the bottom of functions.php file and paste the code at the end.

Step 6: Save changes

Click on the Save changes button when you are finished.

Hide coupon code fields with CSS

If you have a coupon that gets automatically applied to the cart, showing the field to enter coupon code in the cart page or checkout page is redundant.

Whether users enter the coupon code or not, the coupon code will be applied to the cart automatically. So, there is no need to show the coupon code field again because that will confuse the customers. They may also think that they can use a coupon code again and may start coupon hunting.

In that case, you may want to hide the coupon code field from the cart page and checkout page.

However, if you disable the coupon code from the WooCommerce settings as shown in the first method, the automatic coupon code will not work because the coupon code feature is disabled in WooCommerce.

If you have automatic coupons, smart coupons, or URL coupons, you may just want to hide the coupon code fields from users while keeping the coupon feature enabled in WooCommerce.

So, users will not see the coupon code fields but the coupon will be automatically applied to their cart.

This requirement can be achieved by hiding the coupon code fields using CSS code.

Step 1: Open Theme Customizer

In your WordPress admin dashboard, navigate to Appearance > Customize to open WordPress Customizer.

Step 2: Choose Additional CSS

From the list of menus in the left sidebar, choose Additional CSS.

Now you can see a small text editor window on the left side where you can add additional CSS to your theme.

Step 3: Copy the CSS code below

Depending on which pages you want to hide the CSS code, copy any of the three following CSS code snippets

CSS code to hide coupon code fields both in the cart page and checkout page


.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-cart-form .coupon {
            display: none !important;
}

CSS code to hide coupon code field in the cart page


.woocommerce #content table.cart td.actions .coupon,
.woocommerce table.cart td.actions .coupon,
.woocommerce-page #content table.cart td.actions .coupon,
.woocommerce-page table.cart td.actions .coupon,
.woocommerce-cart-form .actions {
    display:none !important;
}

CSS code to hide coupon code field in the checkout page


.woocommerce-checkout .woocommerce-form-coupon-toggle {
            display: none;
}

Step 4: Paste the CSS code to Additional CSS text editor window

After copying a CSS code snippet from above, paste it into the small text editor window on the left side of the WordPress Customizer screen.

After adding the code, don’t forget to click on the Publish button at the top to save the changes.

Smart techniques to prevent coupon hunting

Apart from disabling the coupon code feature completely or hiding the coupon code field using CSS, there are also many other tried and tested strategies that you can also try to reduce cart abandonment rate on your online store.

Show available coupon codes>

Showing the list of available coupon codes on the cart page helps you to prevent the users from leaving the checkout process for searching coupons.

It’s also a good idea to give a link to a coupon page where customers can see all the available coupons or a link to open up a popup window with coupon codes.

Show coupon code field only for those who have a coupon code

A customer typically gets coupon codes from promotional emails, social media promo posts, and affiliate marketers.

So, you can choose to display the coupon code field only when customers reach your online store via the links in promo emails, social media promo posts, or affiliate links by looking at the URL parameters.

All other customers do not see the coupon code field.

Automatically apply coupon code

If a customer reaches your online store via a link in promo email, social media promotional post, or an affiliate link, you can find it out by checking the URL parameters and choose to apply the coupon code automatically.

In that case, customers don’t need to enter the coupon code manually or you don’t need to display the coupon code field. The discount code should be automatically applied if the customer reached your online store through a promotional link.

Camouflage the coupon box

Placing the coupon code section in a way that subtly hides it from the customers is another technique to prevent coupon hunting.

Instead of showing the input field to enter the coupon code and button directly in front of the customer, hide the button and input field inside an accordion or an expandable element, and place it at the bottom so that customers won’t notice it.

You can also reduce the font size of the accordion or expandable element so customers would miss it as it is not prominent.

However, if the customer has a promo code, they would actively look for where they can enter their coupon code and they will find it without much effort.

Summary

The coupon code box in the cart page and checkout page often drives the customers away from the checkout process at critical moments. You can try different strategies we discussed above and check if any of them helps you to reduce the cart or checkout abandonment rate on your online store.