How to Make Your WooCommerce Add to Cart Buttons Bigger

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.

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

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.

Hello,

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

Best Regards

Please see the private content.

Attachments:

You must be logged in to view attached files.

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.

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.

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.

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.

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.

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.

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.

Hello,

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

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

Best Regards

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.

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.

Hello,

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

Best Regards

Hello,

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

Cheers,
Alton

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