quantities display in woocommerce

WordPress 3 posts 2 voices

  1. The standard quantities display in woocommerce in MS Edge browser does not show the up and down arrows, I havn’t checked IE but expect it would be the same, Chrome displays quantities arrows on hover and Firefox displays up and down arrows properly.

    I have seen an implementation which works in all browsers at http://easywpguide.com/ which appears to be a divi based theme.
    I have an image of the 2 at https://imagebin.ca/v/32omE0vsC8QN. The top example is the version which works in all browsers, and the bottom example as in Firefox.

    Would you be able to help with how to implement this?

  2. I wasn’t even aware of anyone custom-styling number inputs. Browsers can handle those very differently, and overwriting browser styles can be tough or impossible at times. Here’s a tutorial that talks about different browser defaults: https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/

    Here’s a comment I found about styling them: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/#comment-534949

    I’ve never tried to style the up/down arrows for number inputs, so I don’t have a lot to offer on that. The best thing to do is just to search around for “css styling number inputs” to see what all you can pull up and doing some trail-and-error.

  3. I wasn’t even aware of anyone custom-styling number inputs. Browsers can handle those very differently, and overwriting browser styles can be tough or impossible at times. Here’s a tutorial that talks about different browser defaults: https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/

    Here’s a comment I found about styling them: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/#comment-534949

    I’ve never tried to style the up/down arrows for number inputs, so I don’t have a lot to offer on that. The best thing to do is just to search around for “css styling number inputs” to see what all you can pull up and doing some trail-and-error.