In this post, I will show you how to change or relocate coupon notices position in woocommerce checkout page.
As you can see I have moved the coupon field from top to the right side of the checkout page. And the coupon notices are displaying at the top. But I want to display the coupon notices right above the coupon field. Let’s see how can we do that.
The notices are showing from the wocoommerce default ‘checkout.min.js’ file. As there is no hook to change the coupon notice position, we will have to edit the js file.
First of all, we will copy the checkout.js from the directory plugins/woocommerce/assets/js/frontend/checkout.js to our theme’s js/checkout.js folder.
Open the checkout.js from our theme that we just added and find line no. 618 where it says
$form.before( code );
Replace it with
$('p.coupon-text').after( code );
It will look like the picture.
In the last step, we will dequeue the default js file and enqueue our edited js file.
//Change checkout coupon notice position
function replace_checkout_default_scripts() {
/**
* Remove default woocommerce checkout scripts.
*/
wp_deregister_script( 'wc-checkout' );
wp_dequeue_script( 'wc-checkout' );
/**
* Add own modify scripts.
*/
wp_register_script( 'wc-checkout', get_template_directory_uri() . '/js/checkout.js', array( 'jquery', 'woocommerce', 'wc-country-select', 'wc-address-i18n' ), WC_VERSION, true );
if( is_checkout() ) {
wp_enqueue_script( 'wc-checkout' );
}
}
add_action( 'wp_enqueue_scripts', 'replace_checkout_default_scripts', 20 );
Now all the coupon notices will be displaying right above the coupon field. And all other notices will be displaying at the top as usual.