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

Home Forums Support How to make Woocommerce "Place Order" button sticky on bottom on mobile display

  • This topic has 3 replies, 2 voices, and was last updated 12 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1148837
    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.

    #1149053
    David
    Staff
    Customer Support

    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;
        }
    }
    #1149797
    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;
        }
    }
    #1150099
    David
    Staff
    Customer Support

    You’re welcome
    Thanks for sharing your final code 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.