Woocommerece header cart menu deleting item using ajax

In my previous tutorial i wrote about how to delete item using ajax in the 'CART PAGE'. But in this tutorial i'll teach you how to delete the item from the header cart menu. It will enhance the website functionality if a user can delete the items without going on cart page, it mean user can delete items from any page of website. But it will be more user friendly if deleting from the cart menu using ajax. In the 98% themes there is full page load after deleting the cart ajax men. There is custom made code for you to use and enhance your site functionality.

Here some easy steps for you to develop this script and apply on your website:

1. One is open a PHP file named 'woo-cart.php' from the place '/wp-content/themes/wp_woo_market/framework/functions/' this is the source file of the woocommerce cart menu in the header of the theme in the website.

2. Find the source code of the delete button or icon it is a anchor tag with the href attribute stored the delete script source file for the particular item query strings or url parameters. you can check this:

echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="%s" class="remove" title="%s">&times;</a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Remove this item', 'wpdance' ) ), $cart_item_key );

This is the delete icon code in Woo Market theme. in your theme you can find this or something similar.

3. By commenting this we can backup of this code and write new code for the ajax delete button.

echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="javascript:void(0);" class="remove" onclick=removePro(this,"%s"); title="%s">&times;</a>', esc_url( WC()->cart->get_remove_url( $cart_item_key ) ), __( 'Remove this item', 'wpdance' ) ), $cart_item_key );

This is new delete button code to delete the item with js method that call the ajax to delete item.

4. Now open the 'footer.php' file of the your woo theme now the jquery ajax code should be written in the footer because this script should be on whole the site to call any page. so footer is the best location to place or write this script. And this script should be within the <script> start and end </script> tags. check this script:

function deleteItemCart(e,href){
//alert(href);
jQuery('<img src="<?php echo bloginfo('stylesheet_directory'); ?>/images/ajax-loader.gif">').appendTo(e);
jQuery.ajax({
url:href,
success:function(response){
if(response){
jQuery(e).parent().parent().remove();
jQuery.ajax({
url:'http://www.your-woo-cart-site-name.com/wp-admin/admin-ajax.php?action=update_tini_cart',
success:function(response){
jQuery(".shopping-cart-wrapper").html(response);
}
});
}
}
});
}

5. We need to more script to remove the html elements of item. After ajax delete the page will not reload so we use the client side script to remove the UI of deleted item. This script also written within the script tags.

jQuery(document).ready(function(){
jQuery(document).on("mouseenter",".cart_size",function(){
jQuery(".cart_dropdown").css("display","block");
});
jQuery(document).on("mouseenter",".cart_dropdown",function(){
jQuery(".cart_dropdown").css("display","block");
});
jQuery(document).on("mouseleave",".cart_size",function(){
jQuery(".cart_dropdown").css("display","none");
});
jQuery(document).on("mouseleave",".cart_dropdown",function(){
jQuery(".cart_dropdown").css("display","none");
});
});

6. After uploading this updated script the ajax delete from the cart header menu will work. And user can access this feature.