Hi @marijke,
I understand what you’re aiming for, you want the footer to sit at the very bottom on short pages like Cart and Contact, and it’s frustrating when it floats in the middle even after adding custom CSS. I can help you simplify this, the extra selectors you have are likely fighting each other.
Please try this clean sticky-footer pattern and remove the previous footer CSS you shared, then add the snippet below instead:
html, body { height: 100%; }
.site { /* Astra's outer wrapper */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-content { /* main content wrapper */
flex: 1 0 auto;
}
.site-footer { /* footer sticks to bottom */
margin-top: auto;
}
A couple of notes to ensure it takes effect
- Remove the earlier rules that set display:flex and flex-direction on many WooCommerce cart selectors, they are unnecessary and can push the footer up.
- Clear any caching or CSS optimization, then hard refresh the page.
- If you only want this behavior on WooCommerce pages, you can scope it like body.woocommerce .site { … } and body.woocommerce .site-content { … }.
If the footer still does not stick, please run a theme/plugin conflict test by switching to a default theme like Storefront or Twenty Twenty-Four and disabling all plugins except WooCommerce to check if the issue persists. This will help confirm if the problem is coming from Astra, another plugin, or custom code.
Feel free to let us know how it goes.
Thread Starter
Marijke
(@marijke59)
Hi lovingbro,
Thanks for reacting so quick, I deleted all the css from the customizer and pasted your css but no it still doesn’t work. (did the hard refresh aswel) I changed theme to twentytwenty-four and still it doesn’t stick to the bottom or is this another one I have to get rid of, I am quit a novice ….
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.site-content {
flex: 1;
display: flex;
flex-direction: column;
}
thanks 🙂
Hi @marijke,
Thanks for getting back and for testing with the CSS I shared. I checked your cart page, and here’s what I noticed: when a product is added to the cart, the footer does stick correctly to the bottom. However, when the cart is empty, the footer floats higher on the page. Here’s a screenshot so you can see the difference: https://cln.sh/pw2jKPxhVTnKCX24YvDk
This shows that it’s not a WooCommerce core issue but more about how the styling and theme are handling the footer area when there’s little or no content. Could you please double-check how you created your footer—was it built using Astra’s customizer, Elementor, or another page builder? That could make a difference.
Also, when you switched to the Twenty Twenty-Four theme, did you deactivate your other plugins first? To properly confirm if this is a theme or plugin conflict, please try switching to the Storefront theme and deactivate all plugins except WooCommerce, then test the cart page again. If the footer works there, it means the issue is tied to Astra or another plugin you’re using.
Let us know the results so we can narrow this down further.
Thread Starter
Marijke
(@marijke59)
Hello Lovingbro,
I disabled all my plugins but with astra childtheme still active and yes the footer stayed down!
When I reactivated astra pro plugin the footer came up again.
I created the footer with the astra (menu) customizer, in wordpress I build with gutenberg (have astra and spectra pro).
Should I rather contact Astra instead of taking your time?
Anyway thanks for explaining Marijke
Hi @marijke59,
Thank you for clarifying and for taking the time to run the test. Since the footer is created with the Astra Menu Customizer, it remains managed by Astra and its addons, even if you’re using Gutenberg. In this case, the best step would be to reach out to Astra support for the proper assistance, as you mentioned.
Before you go, if you’ve found the support provided here in the forum helpful, we’d greatly appreciate it if you could leave a quick review: https://wordpress.org/support/plugin/woocommerce/reviews/#new-post
