Rename or Hide Coupon Code fields with WooCommerce

Estimated reading time: 3 minutes | Last updated on

In our article on improving eCommerce conversions, the #7 tip was to rename or hide coupon code fields on your checkout pages so your customers aren’t automatically searching for coupons as soon as they see the checkout page.

Simplifying and streamlining the checkout process improves conversions, so encouraging customers to leave your site to go coupon hunting can hurt your bottom line. Renaming the coupon field to something like “Promotional Code”, or hiding it until the checkout / payment screen can help reduce this behavior.

WooCommerce makes this fairly easy to do with some short code snippets that can go directly into your theme’s functions.php file without needing to change any theme templates. By default, the coupon code field appears like this:


Cart

Cart



Checkout

Checkout


Hiding the Coupon Form #

If you’re not using coupons at all, you can hide the form on the cart and checkout page by unchecking “Enable the use of coupons” from WooCommerce > Settings > General, but most times you’ll want to leave coupons enabled in case you need to give a customer a discount for some reason. In this case, you can use this snippet to simply disable the form on the cart/checkout pages, but leave coupon use enabled otherwise. This is particularly helpful in combination coupon-related plugins like Smart Coupons and URL Coupons that apply discounts without directly requiring customers to enter a code.

However, if you still give out discount codes, you’ll want a place for customers to enter them. If this is the case, I’d recommend testing whether hiding the discount code from the cart page or from the checkout page makes a greater difference in conversions for you. Test hiding from one page first for an extended period of time, then another (try to keep everything else consistent in your store).

If you want to hide the coupon form on the cart page or the checkout page, you can use these snippets to do that:

Renaming the Coupon Form #

Simply renaming the coupon field to something else can also reduce the number of customers that leave your site during checkout to find coupon codes. Customers that already have the code will know what name to look for as long as you’re consistent. For example, if you email out “Offer Codes” or “Promo Codes”, then customers will look for this field, yet those without coupons won’t get distracted by the words ‘coupon’ or ‘discount’.

Our favorite is something like “Promo Code”, but you can use whatever fits your store best. To change the coupon code on the cart page, use this snippet:

Simply change the text inside the single quotes to whatever you’d like the “Apply Coupon” button to say :) . When you’re done, it should look like this:

Apply Promo Code

Apply Promo Code

Now the checkout page is a bit more complicated, as there’s a message displayed and the customer has to click to enter their code, but it’s still worth changing the wording to match what you’re using on cart page or while communicating with customers:

You can adjust these by changing the text inside single quotes, just like the cart page snippet. You should see something like this when you’re done:

Have a Promo Code?

Have a Promo Code?

Want to know more about why this practice is so useful? Check out this article from KISSmetrics on hiding or renaming coupon fields to improve conversions.

Now go rename or hide those coupon code fields! Hopefully these snippets help you customize your WooCommerce cart / checkout pages and limit cart abandonment for your store.


Cover Photo Credit: StockMonkeys (CC BY 2.0 license)

23 comments

  1. I had been using URL Coupons as the only way to provide coupons and now I’ve used your snippet to hide the coupon fields. No more buyers abandoning the checkout process to go search for coupon codes. That’s just what I needed. Thanks!

    Hiding those fields might be a sensible option to include in the Smart Coupons and URL Coupons extensions.

    • Hey Doug, glad this was helpful :) We actually said the same thing after Max wrote this tutorial, so it’s an option we’re looking to add to URL Coupons in the near future. Keep an eye out!

  2. Michael Lind

    Hi, thank you for this :-) It has solved several problems for me. Do you have any tips on changing the text “Please enter a coupon code” that appears if you click the coupon button without any code? It would be great to be able to refer the customers to the right place where they can receive their coupon code (in this case by becoming a member)

    Hope you can help. Thanks /Michael

  3. Dan

    adding your code to rename “apply coupon” did not work for me, is the a way I can manually do it in the core files (and yes I know this change will be lost when I upgrade) You help would be appreciated.

  4. Pingback: 100 WooCommerce Tips and Tricks - Pootlepress

  5. coupon code

    Can you please tell me how to adjust the field of the place where coupon should be entered? There writes “Coupon code”(I guess it’s code I can not see it). I guess my options are to:
    -remove “Coupon code” and leave it blank, Apply code explains it itself;
    -make “Coupon code” field longer.
    Can you please tell me what to do to make these changes.

    • Check out the gists under Renaming – they’ve been fixed. That will help you change the “Coupon Code” text. As for making the field longer, this will require some CSS tweaks to your theme – are you talking about the cart page?

  6. Eric W

    The Renaming snippet works great for renaming the button on the cart page but how do you change the text “Coupon Code” inside the text field? Thank you!

  7. Hi, thank you for the code, but in my case it warks too good, i also use woocommerce points and rewards plugin and when i use ur code the redeem points section desapears as well in check out page. Could you pleas give me a code witch hides coupon section and leaves points and rewards section visible. Thank you, Martina

  8. Deb

    Hi! I’ve been using the functions to rename ‘Coupon’ to ‘Promo Code’, but something broke after I updated to Woo 2.2. Have you heard that anywhere else? Perhaps a deprecated function?
    Thanks in advance.

  9. Those snippets rock, thanks for sharing them!

    In WooCommerce checkout, do you have any idea how to move the “Apply Coupons” field further down the page closer to the payment section? I feel like potential customers will convert more if they deal with all money stuff later on the page after entering address and email…

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>