Commerce: adding +/- buttons to the Quantity field I am working on a site that uses the Commerce module for a web store. The design specifies that the user's cart overview page should allow them to increase and decrease the quantity of a particular item using plus/minus buttons. However, as far as I can see the only option for a quantity field is a bare text field (in commerce/config/line-items/product/fields). I've searched for solutions online, but apart from the Commerce Extra module (which is in alpha, and does not allow for vertically-stacked buttons as per the design) I'm coming up blank.

Is there an 'accepted' way to add these buttons to the quantity field, or am I missing something in my configuration?
Commerce Kickstart has that.

We use the jquery_ui_spinner library, extracted in our libraries folder.

We declare the library in a hook_library implementation:

/**
 * Implements hook_library().
 */
function commerce_kickstart_product_ui_library() {
  $libraries['jquery_ui_spinner'] = array(
    'title' =&gt; 'jQuery Spinner',
    'website' =&gt; 'http://github.com/btburnett3/jquery.ui.spinner/',
    'version' =&gt; '1.8',
    'js' =&gt; array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.min.js' =&gt; array(),
    ),
    'css' =&gt; array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.css' =&gt; array(),
    ),
    'dependencies' =&gt; array(
      array('system', 'ui.widget'),
    ),
  );
  return $libraries;
}


Then in our hook form alter we attach the library:

function commerce_kickstart_product_ui_form_alter(&amp;$form, &amp;$form_state, $form_id) {
  if (strstr($form_id, 'commerce_cart_add_to_cart_form')) {
    $form['#attached']['library'][] = array('commerce_kickstart_product_ui', 'jquery_ui_spinner');
  }
}


and finally in our JS file we do:

(function ($) {

  // Add a spinner on quantity widget.
  Drupal.behaviors.quantityWidgetSpinner = {
    attach: function ( context, settings ) {
      $('.form-item-quantity input').spinner({
        min: 1,
        max: 9999,
        increment: 'fast'
      });
    }
  }
})(jQuery);