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.
