Increase the width of the add to cart button

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

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

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

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

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

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.

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.

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.

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.

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.

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