Issue with “Product Add to Cart”

[z.william]

I want to arrange the “Quantity,” “Add to Cart,” and “Buy Now” buttons vertically, just like in the example image I uploaded. How can I achieve this?

Please ignore the text on the blue button in the image and assume it says “Buy Now.”

• This topic was modified 1 year, 4 months ago by z.william.

Attachments:

You must be logged in to view attached files.

Hi z.william,

Thanks for reaching to us.

First of all, I’m really sorry have taken long time to reply you due to the weekend.

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Kind Regards,

[z.william]

thanks

• This reply was modified 1 year, 4 months ago by z.william.

Attachments:

You must be logged in to view attached files.

[Hung Pham]

Hi z.william,

Thanks for details.

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

div form.cart :where(button.single_add_to_cart_button,button.wd-buy-now-btn,div.quantity),
div.wd-btn-design-full form.cart :where(.single_add_to_cart_button,.wd-buy-now-btn){
    flex: 1 1 100%;
}

My colleague will check other topics, please be patience.

Regards,

• This reply was modified 1 year, 4 months ago by Hung Pham.

[z.william]

Thank you very much, the code is working.
I also want to modify the width, so I added the following in “Desktop”:

div.quantity input.minus.btn,
div.quantity input.plus.btn {
    width: 50px;
}
div.quantity input.input-text.qty.text {
    width: 50px;
}

And it worked!

Additionally, I also want “div.quantity” to have square corners. I tried addingborder-radius: 0 !important;, but it didn’t work.
What should I do?

• This reply was modified 1 year, 4 months ago by z.william.
• This reply was modified 1 year, 4 months ago by z.william.

Hi z.william,

Please use below code:

div.quantity input.plus {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

div.quantity input.minus {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

Regards,

It worked!
Thanks!

Hi z.william,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts