[Resolved] How to make Woocommerce "Place Order" button sticky on bottom on mobile display

[Tri Ryuzaki]

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.

[David]

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;
    }
}

[Tri Ryuzaki]

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;
    }
}

[David]

You’re welcome
Thanks for sharing your final code 🙂

[Author]

Posts