How To Remove Product From Cart In Woocommerce Using Ajax

How to Remove a Product from WooCommerce Cart Using AJAX (Even if You’re a Beginner!)

So, you’ve got a WooCommerce store. Awesome! But your customers are complaining about a clunky shopping cart experience. Removing items requires a full page refresh, which feels slow and outdated. Fear not! We’re going to tackle how to remove a product from the WooCommerce cart using AJAX – making the process smooth, fast, and user-friendly.

Think of it like this: Imagine ordering food online. You decide you don’t want the extra fries. Would you want the entire page to reload just to remove them? Of course not! You want a quick “remove” button that instantly updates your order. That’s what AJAX lets us do.

What is AJAX and Why Use It?

AJAX stands for Asynchronous JavaScript and XML. Don’t let the jargon intimidate you. Simply put, it allows your website to communicate with the server in the background *without* reloading the entire page.

Here’s why AJAX is a game-changer for your WooCommerce cart:

• Improved User Experience: Instant feedback when an item is removed. No more annoying page reloads.
• Faster Response Times: Only the cart summary updates, making the process much quicker.
• More Engaging Interface: Creates a more dynamic and modern feel for your online store.
• Reduced Server Load: Smaller data transfers mean less strain on your server, especially during peak shopping hours.

The Basic Steps to AJAX-ify Your WooCommerce Cart Removal

We’re going to break down the process into manageable steps. This requires editing your theme’s files, so always back up your website before making any changes! We’ll assume you have a basic understanding of how to access and edit files using FTP or your hosting provider’s file manager.

1. Create a Custom JavaScript File:

First, create a new JavaScript file in your theme’s directory (e.g., `wp-content/themes/your-theme/js/custom.js`). This file will contain the JavaScript code responsible for handling the AJAX request.

2. Enqueue the JavaScript File:

You need to tell WordPress to load your custom JavaScript file. Open your theme’s `functions.php` file (or create a child theme if you’re not already using one!) and add the following code:

function my_theme_enqueue_scripts() {
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );

// Pass the AJAX URL to the script

wp_localize_script( ‘custom-script’, ‘ajax_object’,

array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) )

);

}

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_scripts’ );

Explanation:

• `wp_enqueue_script()`: Registers and enqueues our JavaScript file.
• `get_stylesheet_directory_uri()`: Gets the URL of your theme’s directory.
• `array( ‘jquery’ )`: Specifies that our script depends on jQuery (which WooCommerce uses).
• `’1.0’`: A version number for your script (helps with caching).
• `true`: Loads the script in the footer (best practice for performance).
• `wp_localize_script()`: This is crucial! It makes the `admin-ajax.php` URL available to our JavaScript. `admin-ajax.php` is the WordPress endpoint for handling AJAX requests. We pass the variable `ajax_object` that can then be called from JavaScript.

3. Add the JavaScript Code (in `custom.js`):

Now, let’s add the JavaScript code to handle the AJAX request. Here’s an example that assumes your “remove from cart” links have a class like `remove_from_cart_button`:

jQuery(document).ready(function($) {

$(‘.remove_from_cart_button’).on(‘click’, function(e) {

e.preventDefault(); // Prevent the default link behavior

var product_id = $(this).data(‘product_id’); // Get the product ID

var cart_item_key = $(this).data(‘cart_item_key’); //Get Cart item key.

$.ajax({

type: ‘POST’,

url: ajax_object.ajax_url, // Use the AJAX URL we passed from PHP

data: {

action: ‘remove_from_cart’, // The action we’ll use in PHP

product_id: product_id,

cart_item_key: cart_item_key

},

success: function(response) {

// Handle the successful response (update the cart)

$( ‘.woocommerce-cart-form’ ).load( window.location.href + ‘ .woocommerce-cart-form > *’ ); // Refresh the Cart

$(‘.woocommerce-mini-cart__total’).load( window.location.href + ‘ .woocommerce-mini-cart__total > *’ ); // Refresh the mini cart totals

console.log(“Product removed successfully”);

},

error: function(error) {

console.log(error); // Handle errors

}

});

});

});

Explanation:

• `$(‘.remove_from_cart_button’).on(‘click’, function(e) { … });`: This sets up a click event listener on all elements with the class `remove_from_cart_button`.
• `e.preventDefault();`: Prevents the link from navigating to a new page.
• `var product_id = $(this).data(‘product_id’);`: Gets the product ID from the link’s `data-product_id` attribute. This is important! We’ll add this attribute to our “remove from cart” links in the next step.
• `$.ajax({…});`: This is the core of the AJAX request.
• `type: ‘POST’`: Specifies that we’re using a POST request (safer for data modification).
• `url: ajax_object.ajax_url`: Uses the AJAX URL we passed from `functions.php`.
• `data: { … }`: Sends data to the server. We’re sending:
• `action: ‘remove_from_cart’`: This is a custom action name that we’ll use in our PHP code.
• `product_id: product_id`: The ID of the product to remove.
• `cart_item_key: cart_item_key`: The cart item key is required to identify the specific item in the cart, especially if the same product is added multiple times.
• `success: function(response) { … }`: This function is called when the AJAX request is successful. Here, we’re refreshing the cart and mini-cart totals.
• `error: function(error) { … }`: This function is called if there’s an error.

4. Modify Your Theme’s Cart Template ( `cart.php` )

Now we need to:

• Add the product ID to the remove link.
• Add the cart item key to the remove link.

Locate the cart template in your theme (`woocommerce/cart/cart.php`). Find the area in the template that displays the remove link. Replace the existing remove link with the following. The exact code will vary depending on your theme, but you’re looking for something similar to ` `.

cart->get_cart() as $cart_item_key => $cart_item ) {
$_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
$product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

if ( $_product && $_product->exists() && $cart_item[‘quantity’] > 0 && apply_filters( ‘woocommerce_cart_item_visible’, true, $cart_item, $cart_item_key ) ) {

?>

<?php

echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

‘woocommerce_cart_item_remove_link’,

sprintf(

‘ב,

esc_url( wc_get_cart_remove_url( $cart_item_key ) ),

esc_attr__( ‘Remove this item’, ‘woocommerce’ ),

esc_attr( $product_id ),

esc_attr( $cart_item_key ),

esc_attr( $_product->get_sku() )

),

$cart_item_key

);

?>

<?php

}

}

?>

Explanation:

• In the PHP cart template, find the HTML anchor tag (``) that represents the remove link.
• Ensure that the HTML remove link has the class `remove_from_cart_button`.
• Assign the current `product_id` to the `data-product_id` attribute.
• Assign the cart item key `$cart_item_key` to the `data-cart_item_key` attribute.

5. Add the PHP Function to Handle the AJAX Request:

Finally, we need to add the PHP function that will actually remove the product from the cart. Add the following code to your theme’s `functions.php` file (or a custom plugin):

add_action( 'wp_ajax_remove_from_cart', 'remove_from_cart' );
add_action( 'wp_ajax_nopriv_remove_from_cart', 'remove_from_cart' ); // For non-logged-in users

function remove_from_cart() {

$product_id = apply_filters( ‘woocommerce_cart_item_product_id’, $_POST[‘product_id’] );

$cart_item_key = sanitize_text_field($_POST[‘cart_item_key’]);

if ( WC()->cart->remove_cart_item( $cart_item_key ) ) {

WC()->cart->calculate_totals();

WC()->cart->maybe_set_cart_cookies();

wp_send_json_success(‘Product removed from cart.’);

} else {

wp_send_json_error(‘Failed to remove product from cart.’);

}

wp_die(); // Required for AJAX functions

}

Explanation:

• `add_action( ‘wp_ajax_remove_from_cart’, ‘remove_from_cart’ );` and `add_action( ‘wp_ajax_nopriv_remove_from_cart’, ‘remove_from_cart’ );`: These lines tell WordPress to call the `remove_from_cart()` function when an AJAX request with the `action` parameter set to `remove_from_cart` is received. The second line is necessary for users who are not logged in (guests).
• `$_POST[‘product_id’]`: Retrieves the product ID from the POST data sent by the AJAX request.
• `WC()->cart->remove_cart_item( $cart_item_key )`: This is the magic line! It removes the product from the cart using the `$cart_item_key`.
• `wp_die();`: Important! This stops WordPress from outputting anything else, ensuring a clean AJAX response.
• `WC()->cart->calculate_totals()`: Updates totals after product is removed from the cart
• `WC()->cart->maybe_set_cart_cookies()`: Update cart cookies to sync the change across sessions.
• `wp_send_json_success()` and `wp_send_json_error()`: Send response status back to javascript.

Testing and Troubleshooting

1. Clear Your Cache: Clear your browser and WordPress cache to ensure you’re seeing the latest changes.

2. Check Your Browser’s Console: Open your browser’s developer tools (usually by pressing F12) and go to the “Console” tab. Look for any JavaScript errors. These errors can provide valuable clues about what’s going wrong.

3. Verify AJAX URL: Make sure the `ajax_object.ajax_url` is correct in your JavaScript. You can log it to the console to check: `console.log(ajax_object.ajax_url);`

4. Inspect the AJAX Request: In your browser’s developer tools, go to the “Network” tab. When you click the “remove from cart” button, you should see an AJAX request to `admin-ajax.php`. Click on the request to see the data being sent and the server’s response.

5. Debugging: If you have any issues, use `console.log()` statements in your JavaScript to track the values of variables, and use `error_log()` in your PHP code to log errors.

6. Incorrect Cart Item Key: Confirm that your cart template is correctly passing cart item key. An incorrect key results in failure to remove an item from the cart.

Real-Life Examples and Considerations

• Visual Feedback: Consider adding a loading spinner or a “removing…” message while the AJAX request is in progress to provide visual feedback to the user.
• Error Handling: If the AJAX request fails, display an error message to the user. This is much better than simply having the item not remove without any explanation.
• Quantity Updates: This same AJAX approach can be used to update quantity. Instead of removing a product, you’d update the `quantity` field in the cart using similar logic.
• Mini-Cart Updates: Be sure to update the mini-cart (the small cart summary that usually appears in the header) to reflect the changes after the item is removed.
• Security: Always sanitize and validate data received via AJAX requests to prevent security vulnerabilities. Use `sanitize_text_field()` and `intval()` functions when appropriate.