Sticky Add to Cart Mobile

Hi, I wanted to Change the sticky add to cart Mobile layout a bit, I wanted the sticky add to cart to have rounded corners like a button and the quantity input button background should be white.

Currently it looks like the First Image ( Image Number 1 attached below)

and I want it to look like the second image ( Image Number 2 attached below)

Attachments:

You must be logged in to view attached files.

Hi nexoraretail,

Thanks for reaching to us and appreciate your patience.

Do you want to apply these styles on mobile only? Please confirm me back.

Regards,

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

Hi nexoraretail,

Thanks for your patience.

I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, I will try to put Custom CSS by myself and let you know when it’s done.

Regards,

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 nexoraretail,

Thanks for your patience.

Please add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile section:

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

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%;
}

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;	
}

Regards,

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;
}

Attachments:

You must be logged in to view attached files.

Hi nexoraretail,

Thanks for your patience.

Please add below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile section:

div.wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart) {
	border-radius: 5px !important;
}

Regards,

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

Attachments:

You must be logged in to view attached files.

Hi nexoraretail,

Please edit this code https://prnt.sc/-F7jQoj6JkZY and reduce to 70%.

Regards,

[Author]

Posts