title: WooCommerce - change QTY triggers AJAX call in cart
body: <p>I would like to update and then reload my cart via AJAX when the quantity of an item in the cart is changed.</p>
  
  <p>I can already successfully load in my cart via AJAX.</p>
  
  <p>To load in my cart my php function looks like this. (in my functions.php)</p>
  
  <pre><code>function enqueue_cart_show_ajax() {
  
      wp_register_script( 'cart-show-ajax-js', get_template_directory_uri() . '/js/cart-show-ajax.js', array( 'jquery' ), '', true );
      wp_localize_script( 'cart-show-ajax-js', 'cart_show_ajax', array( 'ajax_url' =&gt; admin_url( 'admin-ajax.php' ) ) );
      wp_enqueue_script( 'cart-show-ajax-js' );
  
  }
  add_action('wp_enqueue_scripts', 'enqueue_cart_show_ajax');
  
  function ajax_show_cart() {
  
      echo do_shortcode( '[woocommerce_cart]' );
  
      die();
  
  }
  
  add_action('wp_ajax_show_cart', 'ajax_show_cart');
  add_action('wp_ajax_nopriv_show_cart', 'ajax_show_cart');
  </code></pre>
  
  <p>My Jquery code looks like this (in cart-show-ajax.js)</p>
  
  <pre><code>jQuery(function($) {
  
      //If view-cart is clicked, fill the view-cart-popup window with the cart
      $( '.view-cart' ).on('click', function(){
          show_cart(); 
      });
  
      //Main ajax function
      function show_cart() {
  
          $.ajax({
              type: 'GET',
              url: cart_show_ajax.ajax_url,
              data: {
                  action: 'show_cart',
              },
              beforeSend: function ()
              {
                  //You could show a loader here
              },
              success: function(data)
              {
                  //Hide loader here
                  $( '.view-cart-popup' ).html(data);
                  activateReturnToShop();
              },
              error: function()
             {
                  //If an ajax error has occured, do something here...
                  $(".product-container").html('&lt;p&gt;There has been an error&lt;/p&gt;');
              }
          });
  
      }
  
  });
  </code></pre>
  
  <p>The HTML for the cart is as follows</p>
  
  <pre><code>&lt;td class="product-quantity"&gt;
      &lt;div class="quantity"&gt;
          &lt;input type="number" step="1" min="0"
           name="cart[1e334311e1ef4cf849abff19e4237358][qty]"
           value="4" title="Qty" class="input-text qty text" size="4"&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>My best guess is that I can achieve this if when the input is changed I run a function that updates the cart, then simply runs the existing show_cart() function.</p>
  
  <p>I'm not sure about how to make a function that will detect the change to input, grab the new quantity of the product and update the amount in the cart...</p>
  
  <p>It could looks something like:</p>
  
  <pre><code>$( 'input.qty' ).on("change", function(){
      // Grab the new product quantity
      // Update the cart
      show_cart();
  });
  </code></pre>
  
  <p>Anyone know how to get the new quantity update the cart with it?</p>
  
  <p>Thank you for all your help!</p>