Posted on

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, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

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

  1. 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're writing code, please wrap it between: [php] code_here [/php]

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.