title: WooCommerce - Cart Widget - Fade out item on remove
body: <p>I am using WooCommerce for the first time on a project. I am just starting to learn JS and I never used AJAX before… </p>
  
  <p>Right now I have a Cart Widget in my header, which is updating the total count, etc. if I remove or add items. I am using <code>&lt;?php woocommerce_mini_cart() ?&gt;</code> for this.</p>
  
  <p>If items are removed from the cart widget, they just disappear. What I would like to have is this: </p>
  
  <ol>
  <li>User clicks on the remove link</li>
  <li>The product which will be removed fades out slowly</li>
  <li>If there are more items in the cart widget, these items move (using transitions) up. </li>
  <li>If there are no more items in the cart, the message "Your cart is empty" should fade in slowly.</li>
  <li>The total count should fade out and fade in again with the new price</li>
  </ol>
  
  <p>I am using the woocommerce_cart_item_remove_link from WooCommerce in my mini-cart.php, but changed <code>class="remove remove_from_cart_button"</code> to add my own script.</p>
  
  <pre><code>&lt;?php
  echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf(
      '&lt;a href="%s" class="sidecart-item-remove" aria-label="%s" data-product_id="%s" data-cart_item_key="%s" data-product_sku="%s"&gt;Aus dem Warenkorb entfernen&lt;/a&gt;',
      esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
      __( 'Remove this item', 'woocommerce' ),
      esc_attr( $product_id ),
      esc_attr( $cart_item_key ),
      esc_attr( $_product-&gt;get_sku() )
  ), $cart_item_key );
  ?&gt;
  </code></pre>
  
  <p>My products in the mini-cart are wrapped in this:</p>
  
  <pre><code>&lt;div id="sidecart-item-id-&lt;?php echo esc_attr( $cart_item_key ); ?&gt;" class="sidecart-item sidecart-item-&lt;?php echo esc_attr( $product_id ); ?&gt;" product-id="&lt;?php echo esc_attr( $product_id ); ?&gt;"&gt;
  &lt;div class="sidecart-item-wrapper sidecart-item-wrapper-&lt;?php echo esc_attr( $cart_item_key ); ?&gt;" data-cart_item_key="&lt;?php echo esc_attr( $cart_item_key ); ?&gt;"&gt;
  </code></pre>
  
  <p>What I have done so far:</p>
  
  <pre><code>/** 
   * Item removed from sidecart
   */
  
  $(document).on( 'click', '.sidecart-item-remove', function(e) {
  
      $.fade_out_subtotal();
      e.preventDefault();
  
      var cart_item_key = $(this).attr( 'data-cart_item_key' );
  
  
          setTimeout(function(){
              // Need a (AJAX?) function here to remove product
              $('#sidecart-item-id-'+cart_item_key).fadeOut(1000);
              $.fade_in_subtotal();
          },500);
  
      console.log('Item removed from sidecart');
  
  });
  
  
  /**
   * Fade in/out subtotal in sidecart
   */
  
  $.fade_out_subtotal = function(){
  
      $('.sidecart-subtotal-amount').fadeOut(1000);
  }
  $.fade_in_subtotal = function(){
  
      setTimeout(function(){
          $('.sidecart-subtotal-amount').fadeIn(1000);
      },1000);
  }
  </code></pre>
  
  <p>What is happening: Subtotal amount fades in and out, but there is a function missing to update the amount. The div for sidecart-item-id-* fades out and is removed. Well, it is not really removed. If I refresh the site. The products are back in the cart. Is the <code>cart_item_key</code> wrong? Where can I find the function WooCommerce is using to remove products?</p>
  
  <p>Can someone please give me a hint on how to achieve this. Thanks in advance. </p>