Cart and Checkout Page Buttons Sticky on Mobile
marianf
Hello Woodmart Team,
First of all, thank you for providing such a flexible and feature-rich theme. We are using Woodmart on our e-commerce site and are very satisfied with its performance and customization options.
However, we would like to make a UX improvement suggestion regarding the mobile experience on the Cart and Checkout pages.
On mobile devices, the "Proceed to Checkout" button (on the cart page) and the "Place Order" button (on the checkout page) are often not immediately visible, especially when the pages are long or when users scroll through product or form details. This can lead to confusion or even abandonment during the checkout process.
We recommend making these key action buttons sticky at the bottom of the screen on mobile devices. This would greatly enhance usability and increase conversion rates by keeping the primary call-to-action accessible at all times.
We believe that this small UX enhancement would have a significant positive impact on mobile conversion rates and align perfectly with modern mobile shopping behavior.
Best regards
Stefan Leemans
You can try something like this (add media-query for tablet/mobile only)
.wc-proceed-to-checkout {
position: fixed;
bottom: 0;
width: 100%;
left: 0px;
z-index: 999999;
background: white;
padding: 15px 10px;
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
}
marianf
Stefan Leemans Thank you so much for your help with the code 🙏 It worked perfectly on the cart page. However, when I tried applying the same change to the checkout page button, unfortunately it didn’t work. I’m not sure what I did wrong — do you have any idea what might be causing it?
Stefan Leemans
marianf Ye it's a different class on the checkout page. I'm using a custom template for checkout, so I'm not sure if we have the same class setup, but could you try this (I also lowered the z-index, because it was causing the button to be over the fly out panels)
.wc-proceed-to-checkout,
.form-row.place-order {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 251;
background: white;
padding: 15px 10px;
box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
}
marianf
Stefan Leemans Thank you so much again — I really appreciate you taking the time to look into it. I’ll give this a try as soon as I get a chance and let you know how it goes!
Stefan Leemans
marianf you're welcome :)
K
Kejserjorn
This is default behaviour when using the blocks cart. Hopefully Xtemos will enhance support for this soon.