How to delete items using ajax from cart page in woocommerce woo_market theme

In woocommerce most of the free or premium theme there is no feature to delete items using ajax from the cart page. That can be the reason of loosing lots of business, users never like to reload page again after delete of each item. So a good and user friendly theme should have the ajax delete item and ajax add item feature. But often we see there is the ajax add feature available in most of the the but not have any delete using ajax available in the themes.

We can develop the ajax delete form our cart page using the custom code. it is very easy and it will take some chunks of lines to do this and after we have a user friendly ajax delete functionality. After this user want to stay more on your store and buy more items. And you will definitely glow every day.

To start before you have the access of file manager or ftp your hosted files. There are some simple steps you need to follow.

1. First open the 'cart.php' in the location '/wp-content/themes/wp_woo_market/woocommerce/cart/' and also backup of your file as well.

2. Find the product remove link location you can search of find

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

3. Before write new code to secure your code comment the above mention code and write new code instead of this.  this new code call a js function named (removePro) instead href link of delete cart. check below:

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 );

4. We need to write a client side script call the ajax to delete items. This ajax generate the delete url and on call it will delete the item. write this script in your 'cart.php' in the bottom of the file and should write within the script tag.

function removePro(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-site-name-come-here.com/wp-admin/admin-ajax.php?action=update_tini_cart',
success:function(response){
jQuery(".shopping-cart-wrapper").html(response);
}
});
}
}
});
}

5. Now time to write a another script to delete that html row of the item as well. Because the ajax delete the item from the database and from the server session as well. But this another script will remove the items client side. It should also within the script tag.

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. Now saving and uploading the custom script you can delete without loading page again and again.