In a recent Business Bloomer Club discussion, a member needed a solution to move the WooCommerce coupon field from its default top position on the checkout page to a location after the order review section.
Directly modifying templates posed issues due to WooCommerce’s default form structure, so a more customized approach was required.
Below is an effective solution that hides the default coupon field and adds a custom form that triggers the WooCommerce coupon functionality.
This solution involves hiding the original coupon field, adding a new custom field in the desired location, and using jQuery to handle its visibility and functionality. This setup will allow customers to enter their coupon code below the order review table, providing a more intuitive checkout experience.
Code Implementation
- Hide the Default Coupon Field
The following code snippet hides WooCommerce’s default coupon field.
add_action( 'woocommerce_before_checkout_form', 'hide_checkout_coupon_form', 5 );
function hide_checkout_coupon_form() {
echo '<style>.woocommerce-form-coupon-toggle {display:none;}</style>';
}
- Add Custom Coupon Field after Order Review Table
add_action( 'woocommerce_review_order_before_payment', 'woocommerce_checkout_coupon_form_custom' );
function woocommerce_checkout_coupon_form_custom() {
echo '<div class="checkout-coupon-toggle"><div class="woocommerce-info" style="margin:0;">' . sprintf(
__("Have a coupon? %s"), '<a href="#" class="show-coupon">' . __("Click here to enter your code") . '</a>'
) . '</div></div>';
echo '<div class="coupon-form" style="display:none;">
<p>' . __("If you have a coupon code, please apply it below.") . '</p>
<p class="form-row form-row-first woocommerce-validated">
<input type="text" name="coupon_code" class="input-text" placeholder="' . __("Coupon code") . '" id="coupon_code" value="">
</p>
<p class="form-row form-row-last">
<button type="button" class="button" name="apply_coupon">' . __("Apply coupon") . '</button>
</p>
<div class="clear"></div>
</div>';
}
- jQuery Script for Toggle and Coupon Application The following script handles the toggle functionality and the application of the coupon code.
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery( function($){
$('.coupon-form').css("display", "none");
// Toggle coupon field visibility
$('.checkout-coupon-toggle .show-coupon').on( 'click', function(e){
$('.coupon-form').toggle(200);
e.preventDefault();
});
// Apply coupon code on button click
$('.coupon-form button[name="apply_coupon"]').on( 'click', function(){
$('form.checkout_coupon input[name="coupon_code"]').val($(this).val());
$('form.checkout_coupon').submit();
});
});
</script>
<?php
endif;
}
This approach effectively moves the coupon field to a custom location without disrupting WooCommerce’s core functionality. The jQuery code provides a seamless experience by showing and hiding the custom coupon field as needed. This solution maintains flexibility and allows you to easily adapt it to other placement requirements if needed.
Hi,
This script is great but it does not display any errors messages if coupon is not valid or has been used. Can you ammed the script to include this please or let me know the code to add. Thanks in advance
Try with this other solution: https://fa8faab2-7736-467b-aa28-860b32869022.express.conves.io/woocommerce-move-remove-coupon-form-cart-checkout/
Hello!
On initial testing and for the last several months this modification worked flawlessly! This weekend though the code stopped working. Clicking the “Apply Coupon” button no longer modifies the amount due in the checkout page and doesn’t apply the coupon. I removed and reinstalled the script and the behavior didn’t change. I use the “Hotel” theme, a child theme of Storefront. I disabled all plugins other than WooCommerce, Square for WooCommerce, WooCommerce Bookings, and the “Theme Customization” plugin which loads the functions.php file without modifying the root functions.php. Same behavior. The JQuery is obviously working, since the display of the coupon block toggles. I have looked at the forms and the code, and nothing obvious jumps out.
Hi Jeffrey, please see https://fa8faab2-7736-467b-aa28-860b32869022.express.conves.io/woocommerce-move-remove-coupon-form-cart-checkout/. There is only one location where the coupon logic (JS) can still work, and that’s the very bottom of the classic Checkout page. Try Snippet 3 and let me know
It works – wonderful! Thank you so much.
Great!