Woocommerce: how to disable AJAX on apply/remove coupon?

Question

In my woocommerce based store I have combined cart and checkout pages into one, it works well, but there is an issue when I try to remove a coupon. Coupon removes from cart with AJAX processing, so when removal is complete - the page doesn't reload, and coupon still displaying like applied (but actually it's removed). So I need to disable AJAX for applying/removing coupon function.

I tried to add this code into my theme's functions.php:

function disable_checkout_script(){
wp_dequeue_script( 'wc-checkout' );
}
add_action( 'wp_enqueue_scripts', 'disable_checkout_script' );

It solves my problem, but this code disables ALL AJAX at the checkout page, and I would like to disable ajax only for apply/remove coupon, and to save another ajax processing like verification for billing/shipping fields.

Please help, unfortunately I'm not a JS expert. Regards!

Answer 1

In your JS file you need to remove a couple of event handlers. There's an event fired when pressing the remove coupon button and also when the coupon form is submit.

The relevant lines are 381 - 383 of woocommerce/assets/js/frontend/checkout.js (WooCommerce loads a minified version of this file).

$( document.body ).on( 'click', 'a.showcoupon', this.show_coupon_form );
$( document.body ).on( 'click', '.woocommerce-remove-coupon', this.remove_coupon );
$( 'form.checkout_coupon' ).hide().submit( this.submit );

You need to remove 2 and 3.

Add the following code to your JS file:

$( document.body ).off( 'click', '.woocommerce-remove-coupon', wc_checkout_coupons.remove_coupon );
$( 'form.checkout_coupon' ).off( 'submit' );

Answer 2

For anyone else looking for a solution to disable AJAX and force a refresh of the checkout page and came across this post, here's what I found worked for me without having to edit any core function files within the WooCommerce plugin. Note, however it does not actually disable AJAX, but it successfully refreshes the full checkout page upon removal.

jQuery code: This forces a page refresh 400ms after clicking the remove button to ensure that the AJAX removal command goes through first.

jQuery(document).on('click', '.woocommerce-remove-coupon', function () {
    setTimeout(
        function () {
            window.location.href = window.location.href;
        }, 400);
});

Then hook the .js file to the checkout page (add to your theme's functions.php or create a plugin).

I did it this way:

add_action( 'woocommerce_after_checkout_form', 'remove_coupon');
function remove_coupon() {
    wp_enqueue_script('remove-coupon', plugins_url('remove-coupon.js', __FILE__));
}