Provides an instant overview of your shop's current customers and the contents of their carts.
I got a complaint from a client that when a checkout error appeared on their site, the screen would scroll down so that the error notice was only visible for a fraction of a second before scrolling up where it disappeared off screen or under the sticky site header. It is WooCommerce default behaviour to scroll to the top of the checkout form after an errored checkout submit, but depending on your theme’s template for this page and not to mention your screen size, it could definitely cause confusion.
As it is usually the quickest path to applying a fix for a situation like this; I googled “woocommerce prevent scroll to checkout error”. Nothing useful…
The next step was to open checkout.js which is one of the native WC assets that would be most likely to contain the scrolling code. Fortunately it did. It has some jQuery telling the screen to animate to the top of $( 'form.checkout' )
over the course of 1 second. The bad part is that instead of replacing the entire checkout.js there’s not really a way to remove these 3 lines of code. The good part is that right after this scrolling trigger it fires an event on the body tag! Namely “checkout_error”. So what I ended up doing is to listen to the checkout_error event trigger and stop scrolling right away. This means it will stop before it event starts, so you don’t see any scrolling:
jQuery( document.body ).on( 'checkout_error', function() {
jQuery( 'html, body' ).stop();
} );
If the checkout_error
event doesn’t fire for some reason, you could also prevent scrolling after every ajax request like so:
jQuery( document ).ajaxComplete( function() {
if ( jQuery( 'body' ).hasClass( 'woocommerce-checkout' ) || jQuery( 'body' ).hasClass( 'woocommerce-cart' ) ) {
jQuery( 'html, body' ).stop();
}
} );
Posted by Berend on
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
I added this script using a plugin “Header and Footer Scripts” by Anand Kumar. I can confirm that the script appears in the ‘source’ however does not solve the issue – for me. Is there anything in this script (I am not very familiar with js) which needs to be customised for a site?
I haven’t been able to test it in a recent WooCommerce version yet. Are you loading the snippet in the footer, though?
$(document).ajaxComplete(function() {
if ($(‘body’).hasClass(‘woocommerce-checkout’) || $(‘body’).hasClass(‘woocommerce-cart’)) {
jQuery( ‘html, body’ ).stop();
}
});
This worked for me. Other method didn’t work. Also fixes the scroll to message in cart after updating qty ect as my messages are fixed position…
Thanks for the input! I’ve updated the article to reflect this.
Thank you!