Remove Variable Products from Mini Cart with Ajax in Woocommerce

Hello guys welcome back to my blog. Today in this blog post, I am going to tell you how to Remove Variable Products from Mini Cart with Ajax in Woocommerce?

Guys for more WordPress and WooCommerce tutorials please follow the below links:

WordPress Tricks

WordPress Hooks

Guys here is the working code snippet and please use carefully:

1. Guys we need to modify below code inside our theme/woocommerce/cart/cart.php file:

we will add data-cart_item_key=”‘.$cart_item_key.'” attribute inside link:

...
<td class="product-remove">
                
              <?php
                echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                  'woocommerce_cart_item_remove_link',
                  sprintf(
                    '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-cart_item_key="'.$cart_item_key.'" data-product_sku="%s">&times;</a>',
                    esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                    esc_html__( 'Remove this item', 'woocommerce' ),
                    esc_attr( $product_id ),
                    esc_attr( $_product->get_sku() )
                  ),
                  $cart_item_key
                );
              ?>
            </td>
...

2. Guys here is our ajax code on remove item button click and we can add inside header.php or footer.php file:

...
<script>
  jQuery(document).ready(function($)
  {
      
  
    //remove item
    $(".woocommerce-cart-form__cart-item.cart_item .product-remove a").each(function()
    {
      $(this).on("click", function(e)
      {
        
                e.preventDefault();
        var dataproductid = $(this).attr("data-cart_item_key");
        
         /* Act on the event */
        var formData = new FormData();
        formData.append('action', 'foobar');
        formData.append('id', dataproductid);
        $.ajax({
          url: '<?php echo admin_url('admin-ajax.php'); ?>',
          type: 'post',
          contentType: false,
          processData: false,
          data: formData,
          success: function (response) {
            //Get Ajax request response
            console.log("success")
            
            
          
            
          },
          error: function (response) {
          console.log("error")
          
          }
        });
      })
    })
});
</script>
...

2. Guys finally here is our hook to remove variable product from cart or mini cart and we will add this inside our theme’s functions.php file:

<?php
...
add_action( 'wp_ajax_foobar', 'my_ajax_foobar_handler' );
    add_action('wp_ajax_nopriv_foobar', 'my_ajax_foobar_handler'); 
    function my_ajax_foobar_handler() {
       
        global $wpdb, $woocommerce;
    
        $cart = WC()->instance()->cart;
        $cart_id = $_POST['id']; // This info is already the result of generate_cart_id method now
    
        $cart_item_id = $cart->find_product_in_cart($cart_id);
        if($cart_item_id){
           $cart->set_quantity($cart_item_id,0);
        }
       die();
    }
...

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below. There are lots of WordPress hooks and filters  and I will share into my future posts and we should use them rather then do custom code in theme core files or in plugins files.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post. Nothing matters if your views will good or bad.

Jassa

Thanks