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        Get CustomizeWoo.com FREE
 * @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        Get CustomizeWoo.com FREE
 * @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 );

Share:

Leave a Reply