title: Custom plus and minus quantity buttons in Woocommerce 3
body: <p>I’m building custom WordPress and WooCommerce theme and adding custom plus and minus buttons to <strong>Product page quantity field</strong>. The buttons do update quantity input's value and I also receive "Item has been added to your cart" notification (on Product page) when I submit Add to Cart. But the cart page doesn’t show any items, neither says the cart is empty.</p>
  
  <p>I can not work out which WooCommerce JS function I’m suppose to hook into, neither how to hook into it. Could I ask for help please?!
  Thanks in advance!</p>
  
  <p>My HTML layout:</p>
  
  <pre><code>&lt;div class="quantity"&gt;
      &lt;label class="quantity__label" for="&lt;?php echo esc_attr( $input_id ); ?&gt;"&gt;&lt;?php esc_html_e( 'Quantity:', 'woocommerce' ); ?&gt;&lt;/label&gt;
      &lt;div class="quantity__wrapper"&gt;
          &lt;input type="button" value="-" class="quantity__button quantity__remove js-qty-remove" /&gt;
          &lt;input
              type="text"
              id="&lt;?php echo esc_attr( $input_id ); ?&gt;"
              class="input-text qty text quantity__input"
              step="&lt;?php echo esc_attr( $step ); ?&gt;"
              min="&lt;?php echo esc_attr( $min_value ); ?&gt;"
              max="&lt;?php echo esc_attr( 0 &lt; $max_value ? $max_value : '' ); ?&gt;"
              name="&lt;?php echo esc_attr( $input_name ); ?&gt;"
              value="&lt;?php echo esc_attr( $input_value ); ?&gt;"
              title="&lt;?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?&gt;"
              size="4"
              pattern="&lt;?php echo esc_attr( $pattern ); ?&gt;"
              inputmode="&lt;?php echo esc_attr( $inputmode ); ?&gt;"
              aria-labelledby="&lt;?php echo esc_attr( $labelledby ); ?&gt;" /&gt;
          &lt;input type="button" value="+" class="quantity__button quantity__add js-qty-add" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My custom jQuery function:</p>
  
  <pre><code>function quantityButtons() {
      var $qtyAdd = $('.js-qty-add'),
          $qtyRemove = $('.js-qty-remove'),
          $qtyInput = $('.quantity__input');
  
      $qtyAdd.on('click', addQty);
      $qtyRemove.on('click', removeQty);
  
      function addQty() {
          var $qtyInput = $('.quantity__input'),
          $qtyRemove = $('.js-qty-remove'),
          $i = $qtyInput.val();
  
          $i++;
          $qtyRemove.attr("disabled", !$i);
          $qtyInput.val($i);
      }
  
      function removeQty() {
          var $qtyInput = $('.quantity__input'),
          $qtyRemove = $('.js-qty-remove'),
          $i = $qtyInput.val();
  
          if ($i &gt;= 1) {
              $i--;
              $qtyInput.val($i);
          } else {
              $qtyRemove.attr("disabled", true);
          }
      }
  
      $qtyRemove.attr("disabled", !$qtyInput.val());
  }
  
  quantityButtons();
  </code></pre>