Commerce: adding +/- buttons to the Quantity field
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);