0

I have this for my quantity selector on a product page:

<div class="quantity"><input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" size="4" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" maxlength="12" /></div>

I just discovered this bug, only seems to be occurring in Chrome (or its a feature of Chrome?), where there are little arrows inside the box that displays the current quantity in addition to the plus/minus buttons outside of the box. The little arrows don't show in IE/Firefox, and I don't see them in my source. Not sure how to hide them. Anyone run into this before?

quantity arrows

Using Woocommerce 2.0.4 in Wordpress 3.5.1

Miles Pfefferle
  • 1,187
  • 6
  • 20
  • 36
  • 1
    See this question: http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-inputs-spin-box/4298216#4298216 – Ryan Potter Mar 26 '13 at 04:18
  • 1
    chrome is really the only browsers that supports input type number with steps and such. and it would be a feature not a bug. [**source**](http://caniuse.com/#feat=input-number) – David Chase Mar 26 '13 at 04:21

4 Answers4

2

Webkit browsers (chrome and safari) automatically create these buttons as part of the user interface experience. I would not be surprised if other browsers (IE/Firefox) follow suit in the near future.

This causes difficulties when a website has already added this feature manually. Personally, I think the plus and minus buttons added by woocommerce are rather annoying. You'll notice that many e-commerce sites do not provide a plus and minus button. eBay, for example, has you type in the amount you want, whereas amazon provides a dropdown.

Woocommerce is making too many assumptions, in my opinion. In either event, opinions aside, you have two options:

  1. Use a solution such as @Drawrdesign provided in his link (Can I hide the HTML5 number input’s spin box?). This will mean overriding the user-interface behavior a person may expect from their browser.

  2. Change woocommerce to accomodate the browser variances better, either:

    • remove the plus and minus buttons (not easy because woocommerce adds them via javascript and overriding the template file wont remove them; a quick hack is to add the class buttons_added to your div.quantity you pasted), thus requiring your user to manually enter the amount in IE/Firefox, or
    • replace the input altogether with a drop down of quantities such as amazon does.
Community
  • 1
  • 1
birchbark
  • 185
  • 1
  • 11
1

to add to birchbark's answer,

You could also hide the javascript generated buttons using CSS. You'll want to fix the border and border radius of the box as well. Try adding this to your theme's stylesheet...

/* hide the plus and minus buttons */

.woocommerce .quantity .plus,
.woocommerce #content .quantity .plus,
.woocommerce-page .quantity .plus,
.woocommerce-page #content .quantity .plus,
.woocommerce .quantity .minus,
.woocommerce #content .quantity .minus,
.woocommerce-page .quantity .minus,
.woocommerce-page #content .quantity .minus
{
    display: none;
}

/* removed the fixed width on its container */

.woocommerce div.product form.cart div.quantity,
.woocommerce #content div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity,
.woocommerce-page #content div.product form.cart div.quantity
{
    width: auto;
}

/* make the quantity input look pretty */

.woocommerce .quantity input.qty,
.woocommerce #content .quantity input.qty,
.woocommerce-page .quantity input.qty,
.woocommerce-page #content .quantity input.qty
{
    text-align: left;
    padding: 0 5px;
    width: 50px;
    border: 1px solid #c7c0c7;
    border-radius: 2px;
}
Acorath
  • 111
  • 4
0

The following worked perfectly for me:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

(according to this post "display: none" on the quantity input can crash Chrome)

Community
  • 1
  • 1
S. Sifantus
  • 31
  • 3
0

Firefox

Hiding the native plus/minus in Firefox use this CSS:

input[type=number] {
    -moz-appearance: textfield;
}

If that dosen't work, try adding the !important rule

input[type=number] {
    -moz-appearance: textfield !important;
}

Chrome

In some cases Chrome is displaying native plus/minus's aswell. Use this CSS to hide it:

::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

::-webkit-outer-spin-button { 
    -webkit-appearance: none;
}
Unicco
  • 2,466
  • 1
  • 26
  • 30