WooCommerce: Stop scrolling to error message on checkout page

Question

Usually WooCommerce scrolls to .form.checkout if there is an error on the checkout form. I want this to stop because it somehow interferes with ScrollMagic.js.

If I don't enqueue ScrollMagic.js everything is working fine, but with ScrollMagic.js enabled the page just jumps a bit to the top.

I tried to use $(document.body).on('checkout_error', function () { $( 'html, body' ).stop(); } but it doesn't work.

If I use

$(document.body).on('checkout_error', function () {
    // There was a validation error
    console.log('checkout_error triggered');
});

There are no log messages in the console. Why isn't there anything happening? How can I stop the WooCommerce animation?

Answer 1

According to this article you could try this?

jQuery( document ).ajaxComplete( function() {
    if ( jQuery( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
        jQuery( 'html, body' ).stop();
    }
} );

Answer 2

Now my console logs are appearing. I didn't change anything at all, but jQuery('html, body').stop(); doesn't trigger.

But by using GSAP ScrollToPlugin I can now scroll to the ul.woocommerce-error using

$(document.body).on('checkout_error', function () {
  TweenLite.to(window, 1, {scrollTo:"ul.woocommerce-error"});
  console.log('checkout_error triggered');
});

as described here: https://greensock.com/ScrollToPlugin .

Answer 3

I know it's really old topic but I found much easier solution. Just edit 3 notice templates (error.php, notice.php, success.php) and remove role="alert" and that's it. The scroll funciton won't find element to scroll to.