Create a custom quantity field in Woocommerce

Question

I'm currently working on an e-commerce site using wordpress, trying to change how the qty spinner looking on cart page, I've edited the template file quantity-input.php with the following code:

if ( $max_value && $min_value === $max_value ) {
    ?>
    <div class="quantity hidden">
        <input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" class="qty" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $min_value ); ?>" />
    </div>
    <?php
} else {
    ?>
    <div class="quantity">
        <div class="quantity-button quantity-up">+</div>
        <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
        <input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
        <div class="quantity-button quantity-down">-</div>
    </div>
    <?php

and the script attached to the page:

$('.quantity-up').html('<span>+</span>');
    $('.quantity-down').html('<span>-</span>');
    $('.quantity').each(function() {
        var spinner = $(this),
        input = spinner.find('input[type="number"]'),
        btnUp = spinner.find('.quantity-up'),
        btnDown = spinner.find('.quantity-down'),
        min = input.attr('min'),
        max = input.attr('max');

        btnUp.click(function() {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
              var newVal = oldValue;
            } else {
              var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
          });
      btnDown.click(function() {
        var oldValue = parseFloat(input.val());
        if (oldValue <= min) {
          var newVal = oldValue;
        } else {
          var newVal = oldValue - 1;
        }
        spinner.find("input").val(newVal);
        spinner.find("input").trigger("change");
      });
});

When I run this only the btnDown seems to work and not the btnUp, I have no clue what I'm doing wrong

oh yh the css:

.quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 32px;
    border: solid 1px red;
  }

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

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

  .quantity input {
    width: 35px;
    height: 32px;
    line-height: 1.65;
    display: block;
    padding: 0;
    margin: 0;
    border: none;
  }

  .quantity input:focus {
    outline: 0;
  }

  .quantity-button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 35px;
    height: 100%;
    text-align: center;
    color: #fff;
    line-height: 1.7;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background-color: rgba(0,0,0,0.7);
    border: solid 1px red;
  }
  .quantity-button span{
    font-size: 1.2em;
    font-weight: 900;
  }

  .quantity-button.quantity-up {
  }

  .quantity-button.quantity-down {
  }

screenshot

Answer 1

I have made some light changes in PHP and CSS and rewritten mostly the jQuery.

The PHP / HTML code:

<?php // Begin "Just For testing" (to be removed)

    $min_value = 0;
    $max_value = -1;
    $input_value = 1;
    $step = 1;
    $pattern = '';
    $inputmode = 'numeric';
    $input_id = 'quantity-custom';
    $input_name = 'quantity';

// -- End of "Just For testing"

## -- -- -- -- Real code start here below -- -- -- -- ## ?>

  <div class="quantity">
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
    <div class="quantity-button minus"><span>-</span></div>
    <input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>"
      value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
    <div class="quantity-button plus"><span>+</span></div>
  </div>

The jQuery code:

(function($){
    $('.quantity').on('click', '.quantity-button.minus',
        function(e) {
        $input = $(this).next('input.qty');
        var val = parseInt($input.val());
        var step = $input.attr('step');
        step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
        if (val > 0) {
            $input.val( val - step ).change();
        }
    });
    $('.quantity').on('click', '.quantity-button.plus', function(e) {
        $input = $(this).prev('input.qty');
        var val = parseInt($input.val());
        var step = $input.attr('step');
        step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
        $input.val( val + step ).change();
    });
})(jQuery);

The CSS changes only:

.quantity-button span {
  font-size: 1.2em;
  font-weight: 900;
  color: white;
}

.quantity-button.plus {}

.quantity-button.minus {}

Code goes in function.php file of your active child theme (or theme).

Tested and works.