Sticky add to cart button and proceed to checkout button on mobile screens

Hi Magnus,

I’m not sure I understand what you mean by sticky, could you try to explain a bit further where you want to place it please?

Best regards,
Rikard

Hi Magnus,

I had a look at the checkout page on mobile, but I can’t see any sticky buttons there. I can see two buttons reading Amazon Pay and PayPal, are those the ones you are referring to? If not, then please post a screenshot of what you are referring to.

Best regards,
Rikard

Hi,

Thanks for the clarification. I think I missed it last time since I had the browser inspector up, and that was blocking it. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
.postid-5000 button.single_add_to_cart_button {
    position: fixed;
    bottom: 0;
    left: 0;
}
}

Best regards,
Rikard

Hi,

Please try this CSS instead:

@media only screen and (max-width: 767px) {
.postid-5000 button.single_add_to_cart_button {
    position: fixed;
    bottom: -21px;
    left: 0;
}
ul.wc-tabs {
    z-index: 0;
}
}

Best regards,
Rikard

Hi Magnus,

If you are going to comment your CSS, then make sure that you close it properly:

/*sticky orange button on single product page

If you don’t close the comment, then everything below that will be commented out. I removed that for you, and moved the CSS block to the top of the Quick CSS box, and it’s applying to your site.

Best regards,
Rikard