Extend Width of ADD TO CART Button

Dear Xtemos,

I am wishing to extend the width of the Add to Cart button as illustrated in my attachment.

I need the width to extend all the way across.

Please can you help.

Attachments:

You must be logged in to view attached files.

.

Hello,

Thank you very much for choosing our theme and for contacting us.

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

.product-image-summary .single_add_to_cart_button {
   display:block;
	min-width:100%;
}

Best Regards

Thanks for you reply but that is not what im trying to achieve unfortunately.

I need the “add to cart” button to be inline with the “quantity box”.

Your code does increase the width but it drops the “add to cart” button to a new row bellow the “quantity box”.

Hello,

Please try to replace the provided code with this one:

` .product-image-summary .cart {
display: flex;
}
.product-image-summary .single_add_to_cart_button {
flex-grow: 1;
}`

Best Regards

hi, that didn’t work unfortunately

Attachments:

You must be logged in to view attached files.

Hello,

Please provide me URL for each type of product you use on the site.

I will provide common CSS for all.

Best Regards

Thanks Elise for your reply.

All my product pages are as bellow:

any updates?

can someone please help out. it has been nearly 4 days now and i still haven’t managed to achieve what i want.

thanks

Hello,

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

.product-type-variable .woocommerce-variation-add-to-cart-disabled {
display: flex;
}
.product-type-variable .product-image-summary .single_add_to_cart_button {
flex-grow: 1;
}
.product-type-simple .product-image-summary .cart {
display: flex;
}
.product-type-simple .product-image-summary .single_add_to_cart_button {
flex-grow: 1;
}

Best Regards

Thanks Elise,

worked perfectly

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts