Change Quantity on Checkout for WooCommerce

[Pedro]

Hello! Recently I installed a plugin that allows you to change the quantity of products at checkout.

By default this plugin uses theme styles to display the change quantity buttons.

However, after installing it I can see that the buttons and fields do not look good at all.

Here is a screenshot: https://mega.nz/#!Do1XlY6T!7tDR2LRrB5qdTNmhSFOKpwINAO4PHkgr2Y1_HWxmDzQ

Could you help me to make the quantity buttons look better at checkout?

This is the plugin link: https://es.wordpress.org/plugins/change-quantity-on-checkout-for-woocommerce/

[Tom]

Hi there,

Is that plugin active at the moment? I’m not seeing the buttons in the checkout.

It’s possible that our standard quantity buttons won’t work in the checkout, as they were written for the single product page. Do they work if you click the buttons?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pedro]

Hello Tom! Thanks for answering.

The plugin is not active since it affects the user experience of my visitors. (The site is in production)

That’s why I left you the plugin link so you could check it out.

And yes, the buttons work correctly at checkout, the problem is that they are gigantic.

[Tom]

Try this CSS:

.woocommerce-checkout .quantity.buttons-added {
    display: flex;
    margin-top: 5px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pedro]

Hello Tom! I added the code and it worked perfect.

Now the quantity buttons are displayed horizontally and not verticalent.

However I would like these buttons to be smaller (only at checkout)

Can you help me with this?

[Tom]

Give this a shot:

.woocommerce-checkout .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after, 
.woocommerce-checkout .do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before, 
.woocommerce-checkout .woocommerce form .quantity.buttons-added .minus, 
.woocommerce-checkout .woocommerce form .quantity.buttons-added .plus, 
.woocommerce-checkout .woocommerce form .quantity.buttons-added .qty {
    width: 30px;
    min-height: 30px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pedro]

Hello Tom! Does that code replace the one you gave me? Or do I add it later?

[Tom]

You still need the CSS I provided earlier as well.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts