Sticky Add to Cart for Default Variation, etc

Hello, how are you?

I’m sorry about many questions but we are about to finish the website, please bear with me..

– On single product page, when there is a default variation configured, Is it possible to make the sticky add to cart work like simple product? I mean “Add to cart” button instead of “Select option”. Most of our products will have variations but it would be unfortunate if we can only use “Select option” instead of “Add to cart” which is a great new feature. I do understand the reasoning here but it would be great to be able to implement this as we are focused on reducing customers’ friction and we saw higher CVR with sticky add to cart from our previous A/B test(and customers can always re-check their selection in the cart summary).

– There is some empty space between the bottom product meta and footer.
I removed prefooter(html block 258) from HTML before footer but there is still some space left. How can I remove this empty space?

– I would like to use round buttons for the whole website except the sticky add to cart on mobile which looks a bit weird when it’s round. Is this easily doable?

Thank you very much in advance!

Hello,

1. This is WooCommerce functionality our theme cannot influence. As soon as you configure the product to be variable, “Select variation” appears instead of “Add to cart”

2. Please add this CSS to Theme Settings > Custom CSS

.single-product-page>div {
    margin-bottom: 0px; 
}

The gap will be removed http://prntscr.com/joxo5i

Please add this code to make all the buttons rounded:

input[type="submit"] {
border-radius: 20px;
}

This is for contact form button. All others are round.

.woodmart-sticky-btn .woodmart-sticky-add-to-cart{
border-radius:none!important;
}

This is for sticky Add to cart not to be round.

Best Regards

Hello Elise.

Thanks for your quick reply!

2. Please add this CSS to Theme Settings > Custom CSS

.single-product-page>div {
margin-bottom: 0px;
}
The gap will be removed http://prntscr.com/joxo5i

– I actually meant the space between product meta and footer, please see the image attached.

.woodmart-sticky-btn .woodmart-sticky-add-to-cart{
border-radius:none!important;
}

– I added this css while all buttons are set as round in theme settings but the code doesn’t seem to be working. Could you please see the 2nd image and link below?

Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

As for the gap, please try this code:

.site-content {
    margin-bottom: 0px;
}

For the Add to cart, please provide your admin access I shall provide the CSS.

Best Regards

Hello Elise,

1.

.site-content {
    margin-bottom: 0px;
}

This code somehow removes necessary margin on other pages like Shop or 404 pages. Please see the attached image(1.jpg). Is it possible to just remove the gap between product meta information and footer on single product?

2. I would like to use round buttons for the website except the sticky add to cart button on mobile, I want to make it squared. Please see the attached image(2.jpg). I’ve shared credentials below.

3. Somehow the sticky add to cart does not work most of the time on mobile devices. Nothing happens when it’s clicked. Maybe it has some Z-index issue, could you please kindly check? I will leave you a link that you can test it.

Thank you very much!

Mike

Attachments:

You must be logged in to view attached files.

Hello,

1. Remove this CSS from Theme Settings > Custom CSS and paste into product page. Switch to Backend editor and click Page setting to insert http://prntscr.com/jqtq6x and http://prntscr.com/jqtrui

2. In order to get sticky Add to cart button, replace the provided CSS with this one:

.woodmart-sticky-add-to-cart{
border-radius:0!important;
}

3. Please deactivate all the third parties plugins not related to the theme and let us know so that we could check.

Best Regards

[Author]

Posts