Checkout error message not fully scrolling to top

Hello,

when someone wants to order something and is on the checkout page there is a problem with the error messages. They are correctly displayed and also it is scrolled upwards but not enough. Therefore the error message stays hidden behind the header.

I assume this is caused by the header because the space that isn’t scrolled upwards is the same height as the header.

You can see this in the video: https://1drv.ms/v/s!AnpjDm99bZAzhYU54AaRWBCUxE0CHQ?e=tK7zXr

You can test it out in our shop at tegards.com
Use any product and try it. Just make sure to use XTEMOS as “Vorname” and “Banküberweisung” as the payment method in case the order goes through so that we know which one it is.

Best regards
Bernhard

Hello,

Try to add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
    margin-top: 100px !important;
}

Best Regards,

Hello,

I couldn’t do it with CSS only. I had to write a small js snippet to accomplish scrolling to the top.
For all other people looking for a solution to this problem here is my code snippet:

$(document).on("checkout_error", function () {

    scrollendListener = $(document).on("scrollend", function() {
        
        setTimeout(() => {
            window.scrollTo({
                top: 0,
                behaviour: "smooth",
            });
        }, 1000);

        scrollendListener.off();
    });
}) ;

Best regards
Bernhard

Hello,

Glad you got it sorted! Thanks for sharing the solution—it’ll be helpful for others too. Let me know if you need further assistance.

Thanks for contacting us.

Have a great day.
Best Regards

[Author]

Posts