Sticky Add to Cart Mobile

Yes I want this style for mobile only because on desktop current style is looking good. So only for mobile i need to change.

Sorry for this, but I don’t Feel safe to allow anyone to edit directly in the website.

Please can you give me the custom css code here I will try it myself and will keep you Updated on whether it is Working or not.

Please it is a kind request.

Hi,
Thank you so much for responding

i added the css code and it worked but i wanted rounded corners for the sticky add to cart button please modify the code for rounded corners

I modified the code by myself for rounded corners but only quantity input button has got rounded corners not the add to cart button

for your reference i have written the code below and also attached the image

div.wd-sticky-btn{
background-color: #fff;
padding-block: 10px;
padding: 10px;
height: auto;
border-radius: 8px;
}

div.wd-quantity-overlap div.quantity{
position: relative;
}

div.wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart){
width: 75%;
border-radius: 8px;
}

div.wd-quantity-overlap div.quantity:not(.hidden)+.single_add_to_cart_button {
padding-inline-start: 0;
}

html div.wd-sticky-btn.wd-quantity-overlap div.quantity input[type] {
background: transparent;
}

.wd-sticky-btn.wd-quantity-overlap div.quantity input[type]{
color: #000;
padding: 0 5px;
min-width: 25px;
min-height: unset;
height: 42px;
border: var(–wd-form-brd-width) solid var(–wd-form-brd-color);
box-shadow: none;
border-radius: 8px;
}

Hi Hung Pham,

On Android Devices the sticky add to cart button and quantity button is stacking on each other. I don’t want them to stack on each other it should be in a line.

I have attached the photo of error below