Woocommerce quantity arrows different on browsers

[deranaloge]

hi there,

i tested the shop on firefox and chrome and the quantity arrows looks different in chrome and firefox:

chrome (this looks how it should):

firefox (there are the arrows really tiny and always there):

any idea what wrong?

thanks in advance

[rad]

Hi Harald,

Thanks for reaching out.

It’s firefox bug, please check this https://bugzilla.mozilla.org/show_bug.cgi?id=947365. It’s been like that and looks like they aren’t fixing it yet.

I tried some CSS and it’s not currently fixable. You can also customize the spinner button like this https://stackoverflow.com/questions/30801488/how-to-style-input-field-number-up-down-button-on-firefox but it appears not working on firefox either. I recommend just hiding the number spinner.

Thanks!

[deranaloge]

hi rad,

thanks for your answer, strange bug…

i get it with the before and after but how can i add a class for the arrows?
i looked around and some woocommerce themes are using this but cant archvive it to work.

any tipps?

thanks!

[rad]

Hi Harald,

They use a special library that isn’t part of Woocommerce which completely replace the fields. Example, https://select2.org/dropdown, it’s not an actual <select> element, but just made look like it. And this for number type https://www.tjvantoll.com/demos/2012-07-15/spinner, it’s not an actual <input type="number"> but just standard text input which only made look like a number type. It would need customization to implement these, some theme has it, but our theme is a framework and it’s only stylized to make Woocommerce design blend with the theme. Any Woocommerce customization is outside the theme’s customization

Thanks!