Full length ADD TO CART and BUY NOW button

I want the ADD TO CART and BUY NOW buttons to cover the full length on the same line in a way that looks nice. Currently the buttons are in left alignment, which I don’t like. I have designed how I want it, shown in the screenshot. Is it possible to do this?

Attachments:

You must be logged in to view attached files.

Hello,

Try to add this code to the Theme Settings > Custom CSS:

.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .wd-buy-now-btn {
    flex: 1 1 0 !important;
    min-width: 0;
}

Best Regards

Worked. But showing a big gap between quantity selector and ADD TO CART button. Can you please make it same size gap which is between ADD TO CART and BUY NOW button?

Note: this big gap is showing in mobile device too. I think the buttons are working as right alignment. Please, give me some kind instruction.

Thank you.

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add this code to the Theme Settings > Custom CSS:

.single-product form.cart .quantity {
    width: auto !important;
    min-width: 80px !important;  /* Minimum reasonable width */
    margin-right: 0 !important;
}
.single-product form.cart .quantity input {
    width: 100% !important;
}
.single-product form.cart .quantity,
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart .wd-buy-now-btn {
    flex: 1 1 0 !important;
    min-width: 0;
}

Best Regards

Thanks, It works.

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts