Pro: stick header hides woocommerce alert messages

[iTurtle]

hi there,
is there a way to make the woocommerce alerts scroll below the stick header? now the header is hiding them. see the screenshots.
this happens when i forget to fill out a require field in the checkout for example.
you can have a look at the site. see secure note.
thanks a lot! best wishes, kai

[ruenel]

Hello Kai,

Thanks for writing in! Regretfully the given password does not work for us. Please double-check it. By the way, are you using the default header? Please set the Navbar Top height in Theme Options > Header. If nothing is helping, provide us access to your site instead so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[iTurtle]

hi @ruenel,
thanks for your fast reply!
i corrected the password. it was not a capital letter… sorry.
i also added admin access.
i use pro and a pro header with two sticky header bars.
thanks a lot for looking into it! best wishes, kai
ps: why did you add the information how a secure note works?

[ruenel]

Hello Kai,

I am only seeing this:

See the secure note.

Thanks.

[iTurtle]

dear rue,
thanks for checking.
did you click on the button at the very end of the page and not fill in all the required fields?
then a red alert message shoud be on top of the page which is not visible because after scrolling up (automatically) the message moves behind the header.
maybe the url was misleading. please use the url without the “#step-adress”.
maybe you could check again? thanks a lot! kai

[nabeel]

Hi @iTurtle,

Thank you for the clarification, This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. You can add the following code in the Theme Options > CSS:

form.checkout.woocommerce-checkout {
    display: flex;
    flex-direction: column-reverse;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!