Increase the width of the add to cart button

Please guide me on how to increase the width of the add to cart button so that the product quantity increase button + add to cart button has the same size as the buy now button below.

Thank you very much

Attachments:

You must be logged in to view attached files.

Hi dhndigitalmarketing,

Thanks for reaching to us and appreciate your patience.

Please let me know if you resolved the issue by yourself.

Best regards,

I am still waiting for you to guide me on how to solve the problem, hope to receive support from you soon. Thank you very much

Hi dhndigitalmarketing,

Here what I saw on my end, please double check https://ibb.co/Nr05gTH

Best regards,

It’s only in product preview mode on the product archive page

Attachments:

You must be logged in to view attached files.

Hi dhndigitalmarketing,

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

.popup-quick-view form.cart :where(.single_add_to_cart_button){
    flex: 1 0 auto;
}

Regards,

After i used your css everything is fine but i have question that in elementor i selected ‘full width button’ for ‘add to cart’ button but it only shows full width in most of the screen ratio, but on a few billion screens and in product previews it only takes up a portion of the width, not the entire width. I hope you can help me explain this question, thank you very much

Attachments:

You must be logged in to view attached files.

Hi dhndigitalmarketing,

Thanks for your patience.

It looked very well on my end, please double check https://ibb.co/Vv5DYcY

Regards,

Now everything is fine, the problem I asked above was solved with the css, but without the css it will have the problem as I mentioned above, Is there any setting in elementor or in theme settings that can solve this problem without using css?

best regards

Hi dhndigitalmarketing,

Unfortunately, there is no such option by default. Please use CSS instead.

Best Regards

Currently there is a problem: in the product preview and in the single product page, if the product has all the attributes selected, the new ‘buy’ button is below and has the same length as the ‘product quantity increase or decrease button’ + ‘add to cart button’. If you click the clear attributes button, the add to cart and buy now buttons will be smaller and located on the same row.

I would like to repeat the design so you can easily recall and visualize:

– Place the add/subtract product quantity button and add to cart button on the same line.

– Place the buy button right below and have a width equal to the total width of the two buttons above.

– These buttons can be automatically scaled or increased or decreased in size to be consistent on all devices and all screen ratios.

I want the design to be consistent when the product does not select any attributes and when the product has selected attributes. Please help me implement this design on preview and single product page

Hope you can help me, thank you in advance

Attachments:

You must be logged in to view attached files.

Hello dhndigitalmarketing,

Thanks for your patience.

Please replace below code:

.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled button#wd-add-to-cart {
width: 100%;
}

with:

button.wd-buy-now-btn{
	width: 100%;
}

Best Regards,

I deleted the 2 old css codes I sent and replaced them with your 2 new css codes but in the product preview the ‘add to cart’ button does not display all the space but only half.

Best Regards.

Attachments:

You must be logged in to view attached files.

Hello dhndigitalmarketing,

Please replace below code:

button.wd-buy-now-btn{
	width: 100%;
}

.product-quick-view form.cart :where(.single_add_to_cart_button) {
    flex: 1 0 auto;
}

Regards,

I succeeded, thank you very much. By the way, can you help me annotate the meaning of each code segment, so that later when I look at the Global custom CSS section, I can easily distinguish it.

Best Regards.

Hello dhndigitalmarketing,

Please replace below code:

/* Adjusting width of buy now button in both preview and single product */
button.wd-buy-now-btn{
	width: 100%;
}

/* Adjusting width of buy now button in preview only */
.product-quick-view form.cart :where(.single_add_to_cart_button) {
    flex: 1 0 auto;
}

Regards,

Let me ask if you have any confusion about the meaning of the css code snippets, because I see that the content of both snippets is about the buy now button.

And by the way, may I ask why I haven’t received notifications via gmail for the last 2 replies? But when I came here, I saw that the question had already been answered.

Best Regards.

Hello dhndigitalmarketing,

The first code is used for both buy now button in Preview and single products, while the second is used for preview section only.

Regards,

I still have a little question, I hope you can explain to me why the first code has the function of ‘adjusting the width of the buy now button in both the preview and the single product’ but the second code repeats the function of ‘adjusting the width of the buy now button in the preview’ that is already in the first css.
And I wonder if the content of the function of the second paragraph is to adjust the width of the ‘buy now’ button, but in the css content I see (.single_add_to_cart_button), it seems that this button is about the shopping cart button. Because I’m new to website development, I’m not very familiar with css, so I’m wondering if you can sympathize and explain it to me. Thank you very much.

Hello dhndigitalmarketing,

Thanks for your patience.

Sorry, but your question is a bit unclear to me. Please describe in more details, this will allow me to thoroughly investigate and address your concerns in a more efficient.

Regards,

Question 1: My question is:

/* Adjusting width of buy now button in both preview and single product */

/* Adjusting width of buy now button in preview only */

Your 2 css annotations both talk about adjusting the width of the buy now button, I wonder why one buy now button needs 2 css paragraphs.

Question 2:
/* Adjusting width of buy now button in preview only */
.product-quick-view form.cart :where(.single_add_to_cart_button) {
flex: 1 0 auto;
}

And in the css paragraph you sent me, the content of the paragraph is about the buy now button but I see the content in the paragraph talks about the add to cart button so I feel a bit confused.

I’m not very familiar with css so I hope you will sympathize and explain to me. Thank you very much.

Hello dhndigitalmarketing,

It’s hard to describe exactly, but few rules can be applied for many or same elements across site. Hope it clears.

Regards,

Ok i understand, i will dig deeper into this issue to know the specific cause, i just want to be sure so i ask again:

/* Adjusting width of buy now button in both preview and single product */
button.wd-buy-now-btn{
width: 100%;
}

/* Adjusting width of buy now button in preview only */
.product-quick-view form.cart :where(.single_add_to_cart_button) {
flex: 1 0 auto;
}

the content describing the function of the 2 css segments is completely correct, right. Because i am a bit picky so i ask again and again to be sure, i apologize if this makes you uncomfortable. thank you very much

Hello dhndigitalmarketing,

Yes, it’s true.

Regards,

[Author]

Posts