Site logo

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.