"Add To Cart" Button Maximum Width

[ccastanedag]

Hello Claue Dev:

I would like to have the “Add To Cart” button at maximum witdh independently of device size (Desktop, Tablet, Mobile)

DESKTOP

This is how it looks currently:

This is how I want (I edited with paint):

MOBILE

When product is simple, this is how it looks currently:

When product is variable, this is how it looks currently:

This is how I want (I edited with paint) Take special look on “UNIT COUNTER” it’s width is also full, in previous version of Claue  this behavior was default, I don’t know why you remove, it was awesome, is more user friendly IMO:

CUSTOM CSS

I have to mention that I have done some minor changes to the button css to make it bigger, this is my custom css code:

.single_add_to_cart_button {
padding-left:45px;
padding-right:45px;
height:75px;
font-size:1.45em;}

 

The problem is I don’t like too much my solution because it use “px” and this is like hardcoding and in some devices the button looks weird. I would like a responsive solution. I will appreaciate your help

Thanks for your time

Carlos

[ccastanedag]

Hello Devs, any news about my question?

I’ll appreciate your help

Thanks 😉

Carlos

 

 

[Harry]

Hi,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.woocommerce-variation-add-to-cart {
width: 100%;
}
.single_add_to_cart_button {
	width: calc(100% - 127px);
}
@media only screen and (max-width: 480px) {
.quantity.pr.fl.mr__10 {
	width: 100%;
	margin-right: 0;
}
form.cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	width: 100%;
	margin-top: 15px;
}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts