Increase the add to cart button size

Dear Support,

Will you please help me in increasing the “Add to cart” button size on single product page and quick view page on all devices i.e. PC, tablet and phone? I checked the theme settings and was not able to see any options. I want the add to cart button to take the rest of the remaining space on the right side. As shown in the picture, I want the add to cart button to span over the red box.

Thanks.

Attachments:

You must be logged in to view attached files.

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.

Hi Aizaz,

Thanks for sharing the details.

I did the changes in Desktop CSS and it worked good on Desktop; however, when I do the changes on the mobile CSS, the values on the quick view page works and it doesn’t work on the single product page on iphone. Also, when I check the site on https://www.responsinator.com/ I am able to see the changes properly but when I use the real device for testing, the changes on the single product page are not there. The code that I applied to the Mobile CSS menu is given below.

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

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

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

Hi Elise,

Thanks for sharing the code.

I have two issues now.

1- The code doesn’t work for a single product quickview add-to-cart button. Please see below screenshot.
https://prnt.sc/t2uuw4

2- Button size on mobile didn’t change? Shall I apply this code in global rather than the other parts?

Thanks.

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

Hi Elise,

Thanks for sharing the code. It works for me but I am having a problem with this CSS when I enable one of my other plugin “Sales booster” as shown below in /1/. The button is squeezed. If I remove the CSS, the Add to cart button size goes to normal and the plugin works good. Will you please help in fixing this?

/1/
https://prnt.sc/t5cdty

Thanks.

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

Hi Elise,

Thanks a lot for the details. I would skip that plugin.

I was trying another plugin for bundled products and I see that the add to cart button is small on bundled product page. Will you please share the CSS for increasing the size of Add to Cart button for bundled products as well?

Thanks.

Hello,

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

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

Best Regards

Hi Elise,

Can we use the flex option for this button as well?

Thanks.

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

Hi Elise,

I tried this code and it didn’t change the button size.

Thanks.

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

Hi Elise,

Presently, the code works with the single product/variable product but it doesn’t work for the bundled product.
Please check the links below:

Thanks.

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

Hi Elise,

Looks good to me, thank for share the code. Please close this thread.

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

Best Regards

[Author]

Posts