WooCommerce coupon codes are very useful to get more sales, but sometimes users can pause / stop placing the order until they find an offer (coupon).
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.
Here we see, how to move the coupon code form in the Cart page?
Move Coupon Form Under “Proceed to Checkout” on WooCommerce Cart Page
First, we want to display the brand new coupon form below 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.
add_action( 'woocommerce_proceed_to_checkout', 'codeamend_display_coupon_form_below_proceed_checkout', 25 );
function 'codeamend_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
}
Unfortunately, you will get two coupon forms, so we must hide the old coupon form using CSS. Add the below style to your style.css to hide the default coupon form.
div.coupon:not(.under-proceed) {
display: none !important;
}