Saturday, April 20, 2024
WordpressWordpress HooksWordpress Tricks

Remove Variable Products from Mini Cart with Ajax in Woocommerce

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?

Working Demo
Remove Variable Products from Mini Cart with Ajax in WooCommerce
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">
                echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                    '<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() )

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

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

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:

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

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.



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.