Sticky Mobile Add to Cart

Hi Aizaz,

Below mentioned code was margins and positioning which was originally created by you. The code single_add_cart_button is working sitewide for branding purpose. We would not like touch or remove such.

where exactly you would like me to add this line in the said class? .single_add_to_cart_button:not(.loading)::before

The sticky add to cart mobile code:
.wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart) {
margin-top: 75px;
}
.sticky-toolbar-on.wd-sticky-btn-on-mb {
padding-bottom: calc(-48px + var(–wd-sticky-btn-height)) !important;
}

Could you mind rewrite and give us the exact style for such?

I look forward to hearing from you.

Kind regards
SP

Hello,

Ok, I will wait for your next message.

Best Regards.

Aizaz, I was expecting the exact the code.

Hello,

Ok sure, I will wait for your next message.

Best Regards.

Hi Aizaz,

Could you clarify what message you are asking for?

We are not sure where to put the coding you have suggested?

Hello,

Extremely sorry for the last replies, I just misread the messages, really sorry once again.

Please try to use the below code:

.single_add_to_cart_button:not(.loading)::before {
margin-top: 75px;
}
.single_add_to_cart_button:not(.loading)::before {
padding-bottom: calc(-48px + var(–wd-sticky-btn-height)) !important;
}

Best Regards.

Hi Aizaz,

Thank you for the coding above. Unforunately, it seems not working. I have attached the video for your information to assist us.

Kind regards,
SP

Hi Aizaz,

Can we a link to upload the video to share? I got the following error.

Upload Errors:
Screen_Recording_20231012_145159_Chrome.mp4: File exceeds allowed file size.

I have attached the video Aizaz. Could you please have a look at it and assist us?

Hi There, I am still getting Upload Errors:
Screen_Recording_20231012_145159_Chrome_1.mp4: File exceeds allowed file size.

Hello,

Please share the video through Dropbox or Google Drive or upload the video here online and share the link:
https://streamable.com/?src_player=page-video-logo&gclid=Cj0KCQjw1aOpBhCOARIsACXYv-cQfFo8k7soZU6GVPNuP-IRYbveIfStp9tYi7RckQevV-VXqiX-NGgaApxXEALw_wcB

Best Regards.

Hi Aizaz,
Thank you for the link. Please find the links below:

https://streamable.com/rqk639

https://drive.google.com/file/d/1P3hP4yzRwaggu_Zjo_oNn9M3JOZ5kajs/view?usp=sharing

Regards
SP

Hello,

You need to remove the following custom CSS https://take.ms/8hZEX
And add this snippet for mobile devices

.wd-sticky-btn form.cart {
    column-gap: 0;
}

.wd-sticky-btn .add-to-cart-container {
    display: unset !important;
    flex: 1 1 auto;
    order: 10;
}

.wd-sticky-btn.wd-quantity-overlap div.quantity {
    position: unset;
		height: var(--btn-height);
}

Kind Regards

Hi
Thank you for the above code,

Should I increase the margin https://prnt.sc/k6Ucw8NsdHK8

.single_add_to_cart_button:not(.loading)::before {
margin-top: 85px;
}
Margin top from 85px to 95px?

Regards
SP

Firstly, you need to remove this custom code
https://monosnap.com/file/KokBWGU9FMrodmFkbHlUE54m22jZin
https://monosnap.com/file/ZOWVhU4Ur7ZJWclupaEYf5Lmvetd4J

After this, add the following snippet

.wd-sticky-btn .wcsatt-options-wrapper {
	display: none;
}

Lastly, go to Theme settings > Single product > Add to cart > Height on mobile and set 42px https://take.ms/sUigv

Well, I did it a way around. However the following codes were given by Aizaz.

https://monosnap.com/file/KokBWGU9FMrodmFkbHlUE54m22jZin
https://monosnap.com/file/ZOWVhU4Ur7ZJWclupaEYf5Lmvetd4J

But I will follow your instructions.

Thank you for the above code snippet. I will check with different devices and confirm as soon as possible.

Can we please close this topic?

OK, we close this topic. Feel free to create a new one if you still have any questions.

[Author]

Posts