Adjusting sticky add to cart

Greetings, lovely XTemos team!

I have activated the “Sticky add to cart” feature for both desktop on mobile.

On desktop, it’s almost perfect. I just need the “share” buttons to be aligned horizontally with the “add to cart” button, and to remove the compare button as we don’t use this feature on our website.

On mobile, it needs a bit more work. The “add to cart” button occupies almost the entire width of the screen, and it’s a rectangular button instead of rounded like on the desktop view. The “share” buttons are pushed aside (almost out of frame) as a result of this.

The feature is enabled on our live website at the moment. Please let me know how (and if) I can make these adjustments.

Thanks!
Tom

Hello,

1) Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.wd-sticky-btn-container .wd-compare-btn.product-compare-button.wd-action-btn {
    display: none;
}

.wd-sticky-btn-container .product-share {
    margin-bottom: 0;
}

2) Please try adding the following Custom CSS in the Custom CSS for the mobile area under Theme Settings >> Custom CSS.

.wd-sticky-btn .cart {
    width: auto;
}

Best Regards

Hi Aizaz,

Thanks so much for your prompt reply!
The code certainly did the trick for desktop view, but unfortunately the mobile view remains unchanged. The “add to cart” button is still rectangular and takes up most of the width, pushing the share buttons out of the frame.
I have of course cleared the cache after making the CSS changes.

Best regards,
Tom

Hello,

We are Glad that the issues on the Desktop are fixed.

For mobile try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.wd-sticky-btn .cart {
    width: auto !important;
}

If the issue still occurs then provide the admin panel login details of the website.

Regards.
Xtemos Studios

Hi Aizaz,
Thank you for the additional code, it looks much better!
Is there any way to make the button rounded like on the desktop version? Not big deal if not possible.
Also, is it possible to remove the < symbol in the “share” section?

Hello,

You are Most Welcome.

Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.single button.single_add_to_cart_button.button.alt {
    border-radius: 20px;
}

.share-title:before {
    content: none;
}

Regards.
Xtemos Studios

Hi Aizaz, thank you for the additional code. Can you please confirm if this is in addition to the previous code, or instead of it?

Hello,

You are Most Welcome.

The Code is in addition to the previous Code provided.

Regards
XTemos Studio

The code worked wonderfully! I could only find one final issue – there is a gray background on the right-hand side of the button. Any way to fix this?
Screenshot attached.

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome. To Remove the background please try adding the following Custom CSS with the previous Custom CSS in the Custom CSS for Mobile area.

.wd-sticky-btn div.quantity input[type="button"]{
    background-color: transparent;
}

Best Regards

It worked, thanks!
I apologize for the constant back and forth, but…

1. Would it be possible to switch between the +/- and the “add to cart”? This is more relevant for Hebrew.

2.The “add to cart” text doesn’t seem to be centered in the button, because it’s too wide Perhaps we can reduce the width of the button so that there will be a space on both sides?

I’ve attached a screenshot of the desired result, that I’ve made with Photoshop.

Thanks,
Tom

Attachments:

You must be logged in to view attached files.

Hello,

1. Sorry to say that this is not possible without customization in the theme files. It requires customizations and this is beyond our limitations and support policy.

2. It is already in the center, there is no need to make it center anymore.

Best Regards.

Understood. Thanks so much for your assistance, Aizaz!

Hello,

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority, and your words reaffirm the hard work we put in every day.

So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts