- This topic has 7 replies, 2 voices, and was last updated 1 year, 1 month ago by
Tom.
-
AuthorPosts
-
December 17, 2019 at 8:25 am #1106990
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/
December 17, 2019 at 6:04 pm #1107350Tom
Lead DeveloperLead DeveloperHi 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-developmentDecember 18, 2019 at 8:20 am #1107927Pedro
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.
December 18, 2019 at 5:54 pm #1108343Tom
Lead DeveloperLead DeveloperTry 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-developmentDecember 19, 2019 at 2:34 pm #1109212Pedro
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?
December 19, 2019 at 7:52 pm #1109340Tom
Lead DeveloperLead DeveloperGive 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-developmentDecember 20, 2019 at 8:52 am #1109917Pedro
Hello Tom! Does that code replace the one you gave me? Or do I add it later?
December 21, 2019 at 2:03 am #1110342Tom
Lead DeveloperLead DeveloperYou 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 -
AuthorPosts
- You must be logged in to reply to this topic.