Add to Cart Button Width

How do I adjust my add to cart button width so it stays in line with the quantity selector and expands 100%, I tried changing the width to 100% using CSS, but the button drops to the line below it and doesnt stay inline with the quantity selector ?

Thanks

Hello,

Sorry for the inconvenience caused.

Could you please share some useful Screenshots and the Page URLs so that we can check this concern specifically on your Site and assist you accordingly in this regard.

Best Regards

Link attached

Hello,

According to the available space here for the Add to Cart button, please try using the below Custom CSS code and paste it to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:

.product-image-summary .single_add_to_cart_button {
    min-width: 75% ;
}

And try the following one under the Dashboard >> Theme Settings >> Custom CSS >> Custom CSS for mobile area:

.product-image-summary .single_add_to_cart_button {
    min-width: 100% ;
}

Hope this works out for you !

Best Regards

Hello

The desktop CSS code you shared does not work, it pushes the add to cart button below the quantity selector instead of expanding the width alongside the quantity selector ?

Image attached

Attachments:

You must be logged in to view attached files.

In fact the mobile CSS code doesn’t work also ..

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check these concerns on your Site and help you out accordingly.

Best Regards

Staging site details provided

Hello,

Your issue has been solved. I have added the below custom CSS code in Theme options >> Custom CSS >> Global CSS and CSS for mobile section respectively:

.product-image-summary .single_add_to_cart_button {
    min-width: 75% !important;
}

.product-image-summary .single_add_to_cart_button {
    min-width: 100% !important;
}

Best Regards.

Still doesn’t display on desktop or display on mobile correctly ?

Attachments:

You must be logged in to view attached files.

I checked the staging site also, doesn’t display correctly..

Tried on live site entering css, still the same.

Hello,

Sorry for the delay.

Unfortunately, there is no option to show the according in the way you want. I have adjusted on the site now. Please see the button in desktop and mobile both on the staging site. I have added the below custom CSS code in your staging site.

.product-image-summary .single_add_to_cart_button {
    margin-bottom: 10px;
    display: block;
    width: 100%;
}

.woocommerce-variation-add-to-cart{
    display:flex;
}
.product-image-summary .single_add_to_cart_button {
    flex-grow: 3;
}
form.cart{
     display:flex;
}

Best Regards.

Still doesnt show correctly

I have attached the images below one showing how it shows after you have added the css code above.

The other I have edited in photoshop to show the quantity selector and button on the same line, so it’s impossible to achieve the quantity selector and add to cart button on the same line to fill the line width ??

Attachments:

You must be logged in to view attached files.

Hello,

As I already told you that this is not possible to show the button as you want to. When we will show the full width of the add to cart button it will change the row and show under the quantity on both Desktop and Mobile.

For more changes, It requires customizations and this is beyond our limitations and support policy.

Regards.
Xtemos Studios

[Author]

Posts