How to Make Your WooCommerce Add to Cart Buttons Bigger

This topic has 17 replies, 2 voices, and was last updated 2 years, 10 months ago by Aizaz Imtiaz Awan.

Viewing 18 posts - 1 through 18 (of 18 total)

Author

Posts
January 2, 2022 at 6:54 pm #343065

Altontait
Participant

I would like to set the width of my add to cart button to 100%. i have tried a few of the support forum options but none seems to work. i don’t know if I need to enable something for my custom CSS codes to work because none of my custom CSS works.

Please provide me with the code to change the width of my Add To Cart button as well as the settings I need to change to allow custom CSS to work on my website.

Attachments:
You must be logged in to view attached files.

January 3, 2022 at 8:13 am #343115
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.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
January 3, 2022 at 9:56 am #343135

Altontait
Participant

Hello,

This is not working for me because of my Buy with GPay, please see the attached before and after photos. the code shrink my Buy with Gpay button

Attachments:
You must be logged in to view attached files.

January 3, 2022 at 12:49 pm #343172

Aizaz Imtiaz Awan
Keymaster

Hello,

Please provide the login details of the website to check it myself and help you out accordingly.

Best Regards

January 3, 2022 at 7:42 pm #343232

Altontait
Participant

Please see the private content.

Attachments:
You must be logged in to view attached files.

January 3, 2022 at 7:46 pm #343235

Altontait
Participant

I would also like to remove the OR between Buy with GPay and the Add To Cart Button.

Also, once you get this done, please send me the information as to how you get it done just so I can make future edits if needs be.

Please see the attached image

Cheers

Attachments:
You must be logged in to view attached files.

January 4, 2022 at 9:06 am #343329
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try to use the below custom CSS code:
```
.single-product button.single_add_to_cart_button.button.alt.disabled.wc-variation-selection-needed {
    display: flex;
    flex-grow: 1;
    width: 100%;
}
```
Thanks.
January 4, 2022 at 9:14 am #343330

Altontait
Participant

Working like a charm. Thanks.

How can I set my copyright footer to full width?

Attachments:
You must be logged in to view attached files.

January 4, 2022 at 12:13 pm #343356

Aizaz Imtiaz Awan
Keymaster

Hello,

The Copyright Footer was made to Full Width using the CSS on your Site. Please check back your Site after clearing browser and server cache.

Best Regards.

January 6, 2022 at 3:59 am #343706

Altontait
Participant

Hi,

The Add To Cart button is now full width but once I change the variation the button restore to the regular Add to Cart button.

January 6, 2022 at 11:22 am #343783

Aizaz Imtiaz Awan
Keymaster

Hello,

I did not see any issue, I have checked by selecting the variation and the button is showing fine fullwidth: https://ibb.co/gRVrMHr

Best Regards.

January 6, 2022 at 4:04 pm #343863

Altontait
Participant

Sorry, I forgot to let you know, I had to use google chrome to inspect the page for the button name and once I figured the button name I made the necessary adjustment. However, I still have a problem with it on mobile, once i change the variation it changes the button size on mobile.

I have been trying to figure out the fix but, no luck so far.

January 7, 2022 at 7:03 am #343927

Aizaz Imtiaz Awan
Keymaster

Hello,

The issue you mentioned doesn’t seem to exist on your website.

Screenshot for Clarification: https://gyazo.com/6565e8703760495dcd837c28319d132b

Best Regards

January 7, 2022 at 7:22 am #343930

Altontait
Participant

Please see the attached screen recording, When I visit the website from my cellphone, once i change the variation it changes the button size on mobile.

Please turn the maintenance mode off and visit the website from your cellphone. i am sure you will see what I am referring to.

January 7, 2022 at 7:32 am #343933

Altontait
Participant

I cant add videos to the post so this should be enough proof that I am having issues with the Add to Cart button on the variation

Also, see the attached screenshot.

Link https://youtu.be/rUx2K8hOsuc

Thank you

Attachments:
You must be logged in to view attached files.

January 7, 2022 at 11:11 am #343957

Aizaz Imtiaz Awan
Keymaster

Hello,

Please check after deactivating the SG Optimizer plugin the issue seems to be caused by it.

Best Regards

January 7, 2022 at 8:02 pm #344024

Altontait
Participant

Hello,

I tried that and it’s still not working out for me.

Cheers,
Alton

January 10, 2022 at 10:55 am #344322
Aizaz Imtiaz Awan
Keymaster
Hello,

Remove all the previous Custom CSS and try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.website-wrapper .product-image-summary [type="submit"] {
	width: 100% !important;
}

.website-wrapper .product-image-summary .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-direction: column;
}
```
Best Regards
Author

Posts