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?

  • To be honest, that image just looks like a styled select box to me. Have you got confirmation that it needs to be a +/- box?
    – Chapabu
    Commented Apr 24, 2013 at 9:33
  • Unfortunately, yes; I checked with the designer. They thought it was trivial to do. Commented Apr 24, 2013 at 9:36

2 Answers 2


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' => 'jQuery Spinner',
    'website' => 'http://github.com/btburnett3/jquery.ui.spinner/',
    'version' => '1.8',
    'js' => array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.min.js' => array(),
    'css' => array(
      libraries_get_path('jquery_ui_spinner') . '/ui.spinner.css' => array(),
    'dependencies' => array(
      array('system', 'ui.widget'),
  return $libraries;

Then in our hook form alter we attach the library:

function commerce_kickstart_product_ui_form_alter(&$form, &$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'
  • Your method isn't working for me. Spinner is not applying to my quantity input, though all libraries connected well. Commented Mar 1, 2014 at 19:25

This functionality is also provided by the Commerce Extra module, it works just right.

  • it not working via composer for drupal 9 Commented Oct 21, 2021 at 17:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.