Archived topic
How to make Woocommerce "Place Order" button sticky on bottom on mobile display
3 replies · Started by Tri Ryuzaki on January 29, 2020
Viewing posts 1–4 of 4
Hello, is there any way to make Woocommerce "Place Order" button on checkout page sticky on bottom when scrolling on mobile display. Thanks a lot.
Hi there,
you can try this CSS:
@media (max-width: 600px) {
.woocommerce #payment #place_order {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: unset !important;
z-index: 1000;
}
body.woocommerce-checkout {
margin-bottom: 60px;
}
}
Thank you so much David, it works perfectly. Here is the final code to make the button width fix with the layout and center align for those who need.
@media (max-width: 600px) {
.woocommerce #payment #place_order {
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: unset !important;
z-index: 1000;
margin-left:auto;
margin-right:auto;
width:86% !important;
}
body.woocommerce-checkout {
margin-bottom: 60px;
}
}
You're welcome
Thanks for sharing your final code :)
This archived topic is closed to new replies.