Increase the add to cart button size

Hello,

I saw the screenshot you attached. If we try to make the add to cart button to full width it would go in the next line as for different sets of devices. So you need to use media queries for all sets of devices.

For example the following Custom CSS will make the add to cart button take the remaining width for desktop.

You need to add this in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
width: 81%;
}

Use the following CSS for the Quick View add to cart button for desktop.

.mfp-content .single_add_to_cart_button.button.alt {
width: 76%;
}

You can set it for different mobile and tablet devices respectively by setting the width and adding the CSS in the Mobile and tablet CSS area.

Best Regards.

Hello,

Please replace all the code provided above with this one:

.single-product-page.product-type-simple form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
}
.single-product-page.product-type-simple form.cart > button,
.woocommerce-variation-add-to-cart > button {
  flex-grow: 1;
}

Please add this code to the Theme Settings > Custom CSS > Desktop/Tablet/Landscape

Do not insert into Global and Mobile.

Best Regards

Hello,

Please replace the code with this one:

.product-type-simple form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
}
.product-type-simple form.cart > button,
.woocommerce-variation-add-to-cart > button {
  flex-grow: 1;
}

If you want it to work on mobile, insert this code to the Theme Settings > Global.

Best Regards

Hello,

We have not tested this plugin with our theme, at the same time, our theme default styles inherit Woocommerce default styles in order to ensure support of the widest range of plugins.
The custom CSS we have provided is workable provided no additional elements are in the container of the Add to cart button, however, the plugin adds the elements to the container.

Unfortunately, it is not possible to change that. Thus you need to decide: either you use the full-width button or you have the correct plugin view.

Alternatively, we can provide custom CSS which would increase the width of the button but it would not 100% full-width. https://prnt.sc/t5iw12 and https://prnt.sc/t5iw8m

Best Regards

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.btns-shop-light .single_add_to_cart_button{
width:70%;
}

Best Regards

Hello,

Yes, you can. Here is the code:

.product-type-simple form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
}
.product-type-simple form.cart > button,
.woocommerce-variation-add-to-cart > button {
  flex-grow: 1;
}

Best Regards

Hello,

This code works on the default Add to cart button without plugins as I explained before. Try to check the code without plugins.

Best Regards

Hello,

Please use this custom CSS for the grouped products:

.product-type-bundle .bundle_button,
.product-type-simple form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
}
.product-type-bundle .bundle_button > button,
.product-type-simple form.cart > button,
.woocommerce-variation-add-to-cart > button {
  flex-grow: 1;
}

Best Regards

You are welcome! If you have any questions please feel free to contact us.

Best Regards