Woocommerce 2.1 Update & Number Inputs in Google Chrome

Share on facebook
Facebook
Share on twitter
Twitter

numberinput-woocommerceWith the big new update from Woocommerce last week came several minor (and major) bugs, and some of them are quick and easy to fix.

One issue we’ve seen noted on several support forums and also experienced it on some websites that we manage is the duplication of what is called the “spin buttons”. Google Chrome and other HTML5 friendly browsers automatically add plus and minus buttons to the number input field, and because Woocommerce also adds these buttons to number fields, the user sees an unnecessary duplication. Small things like this can hurt even the most beautiful website designs.

So, until Woocommerce includes this in an update, we can easily fix this with a nice snippet of CSS. Our lead front-end guy (and founder!) Brian wrote the following fix for the spin button duplication issue on Woocommerce number fields:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Let's Talk
We can't wait to hear about your project.
  • required
  • required
  • required
  • required
    *Sorry, "Johnny Flyaway" recently retired. We hope an email response or phone call will suffice.
    Spam isn't fun. We promise to only send you emails with helpful marketing & design tips, and life changing information. Ok, maybe the latter is a bit of an exaggeration, but it's possible!
  • This field is for validation purposes and should be left unchanged.
Web & Logo Design Blog

© 2021 Brian Joseph Studios LLC. All rights reserved

Facebook | Twitter | Instagram | Web Design Naples | Web Design Fort Myers | Logo Design Fort Myers | Logo Design Naples | LinkedIn | Thumbtack | Brian Joseph Studios is featured on Florida Web Design

Fort Myers - (239) 989 3306 | Naples - (239) 280-1294

Google Business Listing - Brian Joseph Studios - Naples Web Design Company