How To Hide The Coupon Code Section During Checkout

A coupon code field during the checkout process signals that your store has coupon codes somewhere on the Internet. If your customer cannot find a code then they will feel as if they are missing out on a better deal. They might even leave their products in the cart in order to receive an email with a coupon code inside. Stop giving this signal as a store owner and remove the coupon form if you do not have any coupon codes in your store. You might just see your conversion rates go up because of that.

Follow the detailed step-by-step instructions below to hide the coupon code section during checkout.

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the styles.css file. If you do not have such a file, open up custom.css instead.

2. Add the following code at the end of the file:

   
   #SideCouponCodeBox {
       display: none;
   }
   
   .CheckoutRedeemCoupon {
      display: none;
   }
   

3. Save the changes to the file.

How It Works

The code hides the coupon elements using CSS. The first code hides the side panel visible when viewing the cart, and the second code hides the coupon code section from the checkout page. Since we did not remove the panel from the page you can always use Javascript to show the element if you need to. This gives you greater flexibility in case you want to show the coupon code section later on.

Troubleshooting

If you made the changes above and the coupon codes are still showing... then clear your browser's cache. If that does not solve the issue, then make sure the CSS file where you made the changes is used on ALL shopping cart pages.