WooCommerce: Move / Remove Coupon Form @ Cart & Checkout

Coupons: the good, the bad and the ugly. WooCommerce coupon codes are great to convert more sales – but sometimes they get users to pause / stop placing the order until they find a coupon code online (you did it too, I know).

One good workaround that the internet giants such as Amazon and eBay have implemented is to hide the coupon form until an email is entered, or alternatively to move the coupon code to the bottom of the Cart page. This is a very smart move, and gets the user to concentrate on the Cart / Checkout details before entering or searching for a coupon.

So the question is – how to move the coupon code form in the Cart page and remove it from the Checkout page? Well, as usual, a bit of PHP can help us. Here’s how it’s done!

Move Coupon Code Form @ WooCommerce Cart

Snippet 1 (PHP+CSS): Move Coupon Form Under “Proceed to Checkout” @ WooCommerce Cart Page

First, we want to display a brand new coupon form under the “Proceed to Checkout” button on the Cart page. This is easily done by using the correct hook (“woocommerce_proceed_to_checkout”) and by printing the HTML code for the form.


/**
 * @snippet       Display Coupon under Proceed to Checkout Button @ WooCommerce Cart
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=81542
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 */ 

add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_display_coupon_form_below_proceed_checkout', 25 );

function bbloomer_display_coupon_form_below_proceed_checkout() {
	?> 
		<form class="woocommerce-coupon-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
			<?php if ( wc_coupons_enabled() ) { ?>
				<div class="coupon under-proceed">
					<input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" style="width: 100%" /> 
					<button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" style="width: 100%"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
				</div>
			<?php } ?>
		</form>
	<?php
}

Now to the existing coupon form… Unfortunately, unlike the rest of WooCommerce default elements, the coupon form is hardcoded into the Cart table i.e. there is no PHP function that can be “unhooked” via “remove_action”.

In plain English, there is no other way (as of now) to remove that coupon code via PHP, so we must use some annoying CSS. Here’s what you should add to your style.css to hide the default coupon form:


/* Hide the default coupon form @ WooCommerce Cart table */
/* I hate to use display:none but there is no other solution */

div.coupon:not(.under-proceed) { 
display: none !important; 
}

Snippet 2 (PHP): Remove “Have a Coupon?” Form @ WooCommerce Checkout Page


/**
 * @snippet       Remove Coupon Form @ WooCommerce Checkout
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=81542
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 */ 

remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

10 thoughts on “WooCommerce: Move / Remove Coupon Form @ Cart & Checkout

  1. Hello, Rodolfo Is there a way to make coupon form work and update with ajax on any other places but cart or checkout page (for example, within off-canvas shopping cart)? I’ve added the form to my cart panel widget by pasting part of your code … so applying the coupons works well, but it redirects me to the cart page immediately. How your snippet can be adapted to work without redirecting and refreshing a page?

    1. Yaroslav, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Hi, i believe this will sort out the Ajax bit. It does require some modifying but what this does is bring the scripts that are used on the checkout, onto the cart page.

      All credit to the respective owner on stack overflow : https://stackoverflow.com/questions/46736095/move-the-coupon-field-to-the-cart-totals?rq=1

      Add this to the cart totals where you want the coupon to go

      wc_get_template( 'checkout/form-coupon.php', array( 'checkout' => WC()->checkout() ) );
      
      
       
      
      // Add the checkout scripts to cart in order for Ajax to work
      function enqueue_woo_scripts() {
      
          if( is_cart() ) {
              if( ! wp_script_is( 'wc-checkout', 'enqueued' ) )
                  wp_enqueue_script( 'wc-checkout' );
          }
      }
      add_action( 'wp_enqueue_scripts', 'enqueue_woo_scripts' ); 
    3. NICE! Thank you

  2. If the coupon form is removed from Checkout, it’s possible that some users will never see the coupon form.

    That’s because in Storefront, hovering over the shopping cart icon displays a menu with two options: View cart or Checkout. If user chooses Checkout, will not see the Shopping Cart page. If that’s the only place where the coupon form appears, a user trying to enter a coupon code will be frustrated.

    1. Good point David 🙂 You could force people to pass through the Cart first or find another workaround, anyway this snippet applies only to some businesses while some others won’t need this. Thank you

  3. These snippets worked fine for us and really improved both our cart and checkout pages, keeping users focused on making their purchases rather than trying to find out where they might find discount codes. We only use discount codes for a handful of items and we let people know if they’re eligible for discounts. We only needed a small amount of our own styling and added a piece of text above the coupon box to say ‘If you have been provided a coupon code, please enter it before proceeding to checkout:’. Thank you, we always review your write-ups for helpful tips and appreciate the time you put into them.

    1. Thanks so much Kim 🙂

  4. Hello Rodolfo,

    I think this action should work fine to move coupon field
    remove_action( ‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’, 10 );

    REMARK: There’s only one other place to re-add it: below the entire checkout form. This is because it can’t be nested inside of the checkout form without affecting the “Place Order” button. You could add it at the end of the form if desired by then adding this snippet:

    add_action( ‘woocommerce_after_checkout_form’, ‘woocommerce_checkout_coupon_form’ );

    1. Hello Fabio 🙂 Doesn’t that break the coupon code form JS? I tried in different positions but would have had to revise the WooCommerce JS to also make it work – hence why I just decided to remove it

Questions? Feedback? Support? Leave your Comment Now!
_____

If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.