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:
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:
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:
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)