Checkout – doesnt scroll to error due to sticky header

  • Resolved wpuser293

    (@wpuser293)


    1 year, 2 months ago

    When someone wants to go through the checkout and there will be error messages then it scrolls to the top and shows the error messages but due to the sticky head the error messages are hidden behind the header. I tried to put in some custom JS code to set an offset for the scroll-to-notices part but that didnt work: 

    // overwrite woocommerce scroll to notices
$.scroll_to_notices=function( scrollElement ) {
     var offset = 300;
     if ( scrollElement.length ) {
     $( 'html, body' ).animate( {
          scrollTop: ( scrollElement.offset().top-offset )
          }, 1000 );
     }
};

    Do you have any idea how i can solve that? Because customers cant see the error messages.

    Thanks a lot for your help.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi,

    It seems like you’re trying to adjust the scrolling behavior when WooCommerce displays error messages during the checkout process. However, your custom JavaScript code might need a slight modification to achieve the desired effect. Here’s an alternative approach that might work better:

    // Overwrite WooCommerce scroll to notices
jQuery( document ).on( 'checkout_error', function() {
    var offset = 150; // Adjust this value as needed
    var notices = jQuery( '.woocommerce-NoticeGroup-checkout' );

    if ( notices.length ) {
        jQuery( 'html, body' ).animate({
            scrollTop: ( notices.offset().top - offset )
        }, 1000 );
    }
});

    Here’s how this code works:

    1. It listens for the checkout_error event triggered by WooCommerce when there are validation errors during the checkout process.
    2. It calculates the position to scroll to based on the offset value you set (adjust it to fit your layout).
    3. It finds the notice container with the class woocommerce-NoticeGroup-checkout.
    4. It animates the scroll to the calculated position using jQuery’s animate() function.

    Please make sure to insert this code within a <script> tag or in a JavaScript file that’s enqueued properly on your website. Additionally, ensure that jQuery is loaded before this code snippet.

    Remember to test this thoroughly on different devices and browsers to ensure that the scrolling behavior works as expected.

    Thread Starter wpuser293

    (@wpuser293)

    Dear Owadud, thanks a lot for your quick help and your support. Really appreciate it. I tried to take your code and put it into operation but somehow i didnt get it to work. Can i send you somehow the URL and you could have a look into that. I used the plugin: Simple Custom CSS and JS to enter the code. And i can see that it is loading on the side. But it doesnt scroll to the top.

    Thread Starter wpuser293

    (@wpuser293)

    I think i got it worked. I missed a small item. I will test it now on different devices, thanks a lot for your help so far!!

    Hi @wpuser293

    Please note that we can’t provide support for code customization as per our support policy. Still, if you need customization, we do our best to offer advice and direct you to appropriate resources. Based on the feedback we get from our customers, we highly recommend contacting one of the services on our Customization page.

    On the other hand, it also seems that a member of the community was able to contribute their expertise, and it works for you. That’s great to know. Let us know how it goes!

    doreenhawdon

    (@doreenhawdon)

    Very clever and does the job, it is an additional scroll rather than modifying the original behaviour so first we scroll to the top and then we scroll to the offset. Is there any way of refining this behaviour?

    Hi @doreenhawdon

    Thanks for reaching out!

    As mentioned above, custom coding is not something we can assist with directly. However, I’ll keep this thread open for a bit to see if anyone from the community can lend a hand.

    If you have any other questions related to development or custom coding, don’t hesitate to reach out to some of the great resources we have available for support. The WooCommerce community is filled with talented open-source developers, and many of them are active on the channels listed below:

    Hope this helps!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Checkout – doesnt scroll to error due to sticky header’ is closed to new replies.