How to successfully implement Ajax add to cart in WooCommerce

Full-page reloads can disrupt the shopping flow and frustrate your customers. In this in-depth tutorial, I'll show you three different methods (the default settings, plugins, and custom code) to enable WooCommerce AJAX add to cart in your online store.

If you're looking to add an AJAX add to cart function to WooCommerce, this guide is for you. Here, we'll explore three methods that you can use to enable AJAX add to cart in WooCommerce:

• WooCommerce's built-in AJAX add to cart setting.
• The best WooCommerce AJAX add to cart plugins - AJAX add to cart for WooCommerce, WooCommerce Product Table, WooCommerce Bulk Variations, and WooCommerce Fast Cart.
• Custom javascript and PHP AJAX add to cart code snippets.

I'll also outline the pros and cons of each method, and answer common questions about adding the AJAX add to cart feature to WooCommerce.

Quick verdict: best WooCommerce AJAX add to cart plugins

If you want the 10-second answer, here are the use-case picks:

• Top pick for catalog and wholesale stores WooCommerce Product Table for an AJAX order-form layout.
• Best free option AJAX add to cart for WooCommerce by QuadLayers for single product pages.
• Best for variable products (clothing, accessories) WooCommerce Bulk Variations for an AJAX variation grid.
• Best for the cart and checkout step WooCommerce Fast Cart for an AJAX popup cart.

How I evaluated the AJAX add to cart plugins

There are dozens of WooCommerce plugins that mention AJAX in their description. To narrow the field to the four covered below, I applied three criteria:

• The plugin fixes a real gap in WooCommerce's default AJAX setting. That means single product pages, variable products, bulk quantity selection, or the cart and checkout step itself.
• The plugin is actively maintained. AJAX code breaks easily when WooCommerce updates its core scripts, so an abandoned plugin is worse than no plugin.
• The plugin doesn't duplicate another pick. Each of the four covers a different stage of the customer journey, so you can combine them rather than choose between them.

What is WooCommerce AJAX add to cart?

WooCommerce AJAX add to cart is a feature that allows customers to add products to their shopping carts without requiring a full-page reload. AJAX communicates with your website's server in the background to update the cart contents dynamically. This creates a faster and smoother shopping experience by reducing friction in the purchase process.

To illustrate how this works: imagine you run an online clothing store. A customer is browsing on the T-shirt category page and they click the "Add to cart" button for one of the T-shirts.

Without AJAX

• Clicking "Add to Cart" triggers a full-page reload.
• The customer loses their place on the page.
• Loading time creates a frustrating user experience.

With AJAX

• The selected t-shirt is added to their cart instantly without reloading or redirecting them to the cart page.
• The header cart icon updates to reflect the added item.
• A success message appears confirming the action.

How to enable WooCommerce's native AJAX add to cart feature

WooCommerce includes a built-in AJAX add to cart feature that works on Product Archive pages. Product Archive pages are shop, category, and tag pages in WooCommerce. This updates the cart count instantly in the header when customers click the add to cart button. The AJAX request processes in the background without reloading the entire page.

Limitations of WooCommerce's default AJAX add to cart setting

The default WooCommerce AJAX implementation has three major limitations that impact the customer shopping experience:

These limitations slow down the shopping process. They create extra steps and friction for customers trying to complete purchases quickly. Many store owners use plugins or custom code to overcome these limitations.

How to enable WooCommerce's default AJAX add to cart setting

WooCommerce's built-in AJAX add to cart feature is disabled on Product Archive pages by default. Here's how to activate it:

1. In your WooCommerce site's admin, navigate to WooCommerce → Settings → Products → General.
   

   

   
   
2. Locate the "Add to cart behaviour" section and tick the "Enable AJAX add to cart buttons on archives" button.
3. Scroll down the page and press the Save Changes button.

That's it! The buttons on your site's Shop, Category, and Tag pages will use AJAX to add products to the cart. Feel free to head to your site's front end to test it out.

The best WooCommerce AJAX add to cart plugins

WooCommerce's default AJAX add to cart feature provides basic functionality. These plugins extend AJAX capabilities to create a more comprehensive shopping experience:

• AJAX add to cart for WooCommerce - Enables AJAX add to cart buttons on product detail pages in WooCommerce.
• WooCommerce Product Table - Replaces the default Shop and Category page layout with an AJAX-powered order form layout.
• WooCommerce Bulk Variations - Lists variations in a user-friendly grid or matrix on product detail pages with AJAX add to cart buttons.
• WooCommerce Fast Cart - Upgrades the cart and checkout flow with a popup or modal cart featuring built-in checkout powered by AJAX.

Plugins 2 to 4 are developed and maintained by us at Barn2. We built them specifically to solve these problems and work hard to ensure their quality. The three are designed to combine rather than compete. A typical full-stack AJAX setup uses Product Table on the shop page, Bulk Variations on the product page, and Fast Cart for the cart and checkout step.

Quick comparison of your AJAX options

Legend: ✅ means full support. ○ means partial support. ❌ means not supported.

AJAX add to cart for WooCommerce

The AJAX add to cart for WooCommerce plugin extends WooCommerce's built-in AJAX functionality to single product pages. The plugin serves more than 20,000 WooCommerce stores and has multiple 5-star ratings. It prevents full-site reloads when customers add simple, variable, or grouped products to their shopping carts from product detail pages.

To use AJAX add to cart for WooCommerce, simply:

1. Head to Plugins → Add New Plugin in your site's admin panel.
2. Search for the AJAX add to cart for WooCommerce plugin by QuadLayers, then install and activate it.

That's it! Now you can head to product detail pages and test out the AJAX add to cart feature.

Note: AJAX add to cart for WooCommerce fixes the gap in WooCommerce's default AJAX functionality. The plugin does not add quality-of-life improvements or additional features to boost your store's sales and conversion rates. It does not enhance product presentation or remove friction from other parts of the customer journey.

Pros:

• Free.
• Plugs the single-product-page gap that WooCommerce's built-in setting leaves open.
• Two-click install with no settings to configure.

Cons:

• Only adds AJAX to the existing layout. Won't add quantity boxes to archive pages.
• Doesn't let customers buy multiple variations in one click.
• Doesn't change anything about the cart or checkout step.

WooCommerce Product Table

WooCommerce Product Table is a plugin that displays products in a table-like format with AJAX add to cart functionality. The table layout makes it easier for customers to browse, search, and purchase multiple items simultaneously.

Here's a brief overview of how it works:
WooCommerce Product Table replaces WooCommerce's default store layout with quick product order forms. Customers select products, variations, and quantities using checkboxes. They then use the "Add Selected to Cart" button to add all selected items to their carts using AJAX. The entire process happens without page reloads.

The product table layout benefits specific store types. Stores with large product catalogs like clothing retailers use it to display many items at once. Wholesalers use it for bulk ordering. Auto parts retailers use it when customers need to compare and select multiple products quickly.

The table layout simplifies the ordering process. It boosts conversion rates and improves overall user experience (UX) by reducing clicks and page loads.

WooCommerce Product Table's key features

• Customizable table layout. You can choose the columns and product data displayed in the table including name, price, image, SKU, stock status, and custom fields.
• AJAX-powered search and filters. Customers filter products by categories, tags, attributes, or custom taxonomies. AJAX powers instant filtering and displays relevant results without page reloads.
• Support for product variations. Customers select product variations like size, color, or material directly from the table. They add variations to the cart without opening individual product pages.
• Bulk add to cart. Customers select multiple products and add them to the cart in one click. This feature supports wholesale and bulk-quantity orders.
• Sorting and pagination. The plugin supports sorting by columns such as price or stock status. Pagination keeps the user interface clean for sites with large product catalogs.
• Quick product details. The quick view option shows additional product information without leaving the table.

Here's a Product Table customer talking about the plugin:

I have tried several other product tables but Barn2's product table is the one I stucked with. Endless possibilities of customization not to mention the outstanding support.

Attila JákiVerified WooCommerce Product Table customer

Pros:

• Replaces the default product loop with a true order-form layout.
• AJAX-powered search, filters, sorting, and add-to-cart all on one page.
• Bulk add to cart with one click across multiple products.

Cons:

• Premium plugin (no free version).
• The table layout is a big change from the default WooCommerce look. Not the right fit for stores that want a traditional grid of product cards.
• Quick view requires the separate WooCommerce Quick View Pro plugin.

WooCommerce Bulk Variations

WooCommerce Bulk Variations is a plugin that presents multiple product variations in a table or grid format on WooCommerce product detail pages. Stores selling products with several variations use it to simplify ordering. Common use cases include clothing, accessories, sporting equipment, and wholesale goods.

WooCommerce Bulk Variations' key features

• Variation grid display. The plugin displays variations in a grid or matrix format instead of dropdowns. Customers see all attribute combinations at a glance. A clothing store can display a grid with sizes as rows and colors as columns.
• Bulk quantity selection. Customers enter quantities for multiple variations directly in the grid. They add all selected variations to the cart with one click after selecting quantities.
• Customizable content and display options. Store owners control which attributes display and how the grid is styled. The plugin pulls descriptions, images, stock levels, and prices automatically. It displays this information in the grid to provide additional details for each variation.
• AJAX-powered add to cart buttons. WooCommerce Bulk Variations uses AJAX to update stock quantities, pricing, and availability dynamically within the grid. The variation grids are fully responsive across all device sizes.

The wholesale and clothing use case in particular is what most customers buy this for:

WooCommerce Bulk Variations + WooCommerce Private Store are a perfect combo for my wholesale-only business. I saved a lot of time and it's working perfectly. Support is fast and super kind. I'm totally satisfied!

JasmineVerified WooCommerce Bulk Variations customer

Pros:

• Grid layout shows every variation in one view instead of cycling through dropdowns.
• Per-cell quantity inputs let customers buy several variations at once.
• AJAX-powered stock and price updates inside the grid.

Cons:

• Premium plugin (no free version).
• Only useful on product pages with multiple variations. Adds nothing to simple-product or single-variation stores.
• The grid format won't suit stores where each variation needs a lot of explanatory copy or imagery.

WooCommerce Fast Cart

WooCommerce Fast Cart is a plugin that replaces WooCommerce's default checkout flow with a streamlined AJAX-powered process. The plugin allows customers to view their cart and complete checkout without leaving the current page.

A pop-up or slide-in modal window appears when customers add items to their cart from any page. Customers review items, adjust quantities, and proceed to checkout without navigating away. This eliminates the need to search for the cart page to initiate checkout.

WooCommerce Fast Cart's key features

• Quick cart with built-in checkout. The modal popup or slide-in panel allows customers to view carts, make adjustments, and complete checkout on the same page. This reduces checkout steps and lowers cart abandonment rates.
• AJAX-powered cart updates. The cart updates dynamically when customers adjust quantities, remove products, or apply coupon codes. No full-page reloads occur during these actions.
• Compatibility with shipping and payment providers. The plugin integrates with WooCommerce shipping methods and payment gateways. Customers see accurate order totals and select preferred payment methods within the cart.
• Cross-sells and upsell integration. Store owners display relevant cross-sell or upsell suggestions directly in the cart. A customer adding a smartphone sees recommendations for cases, screen protectors, and accessories.
• Customizable design. Store owners customize the cart layout, colors, and fonts to match store branding. This creates a seamless ordering experience.

Here's a Fast Cart customer who switched specifically because the default cart was costing sales:

I'm happy with this solution as Woocommerce out-of-the-box cart was losing me sales because it was so slow. Install was easy, in 20 minutes with testing. The videos were very helpful in making the decision to go with Fast Cart.

Linda LeeVerified WooCommerce Fast Cart customer

Pros:

• Removes the navigation step between adding a product and viewing the cart.
• Built-in AJAX checkout keeps shoppers on the same page through to payment.
• Cross-sell and upsell slots in the cart popup.

Cons:

• Premium plugin (no free version).
• Popup carts won't suit every brand. If your design language is calm and minimal, the slide-in animation may feel intrusive.
• Heavily customized checkouts (with many fields or complex shipping rules) may need the standard checkout page instead.

WooCommerce AJAX add to cart code snippet

Custom PHP and JavaScript snippets enable AJAX add to cart buttons on your site if you have development skills. Custom code requires maintenance with WooCommerce updates. WooCommerce hooks or scripts may change during updates, causing the feature to stop working. Small code errors can break your site or disrupt the user experience.

(If you're not confident in maintaining custom code, skip this section and use the plugin options above.)

Here are the steps to enable the AJAX function on the WooCommerce single product page without triggering a full-page reload.

1. Create the JavaScript File (ajax-add-to-cart.js) in your child theme's /js folder

The JavaScript file may be located in your child theme's /assets folder instead. Create the /js folder if it doesn't exist. Write the exact path to this js file when enqueuing it in PHP in step 2.

This file listens for the "Add to Cart" button click and prevents the default page reload. It triggers an AJAX call to add the product to the cart. The cart updates without reloading the page.

Code snippet:

jQuery(document).ready(function ($) {
    // Trigger on the "Add to Cart" button click
    $("form.cart").on("submit", function (e) {
        e.preventDefault(); // Prevent form submission

        var $this = $(this),
            product_id = $this.find("[name=add-to-cart]").val(),
            quantity = $this.find("input.qty").val() || 1,
            variation_id = $this.find("input[name=variation_id]").val() || 0,
            data = {
                action: "woocommerce_ajax_add_to_cart",
                product_id: product_id,
                quantity: quantity,
                variation_id: variation_id,
            };

        // Show a loading spinner (optional)
        $this
            .find(".single_add_to_cart_button")
            .after('<span class="loading">Loading...</span>');

        // AJAX call
        $.ajax({
            type: "POST",
            url: woocommerce_params.ajax_url || '/wp-admin/admin-ajax.php',
            data: data,
            success: function (response) {
                if (response.error && response.product_url) {
                    window.location = response.product_url;
                } else {
                    // Update fragments, including mini cart
                    if (response.fragments) {
                        $.each(response.fragments, function (key, value) {
                            $(key).replaceWith(value);
                        });
                        $(document.body).trigger('wc_fragments_refreshed');
                    }
                    $(document.body).trigger("added_to_cart", [
                        response.fragments,
                        response.cart_hash,
                    ]);
                    $(".loading").remove();
                    alert("Product added to cart!");
                }
            },
            error: function () {
                $(".loading").remove();
                alert("There was an error. Please try again.");
            },
        });
    });
});

2. Enqueue the JavaScript

Open your child theme's functions.php file. Use wp_enqueue_script() to load the JavaScript code on your single product pages. This code handles the AJAX request.

Code snippet:

function custom_woocommerce_ajax_add_to_cart_js() {
    if (is_product()) { // Only load the script on single product pages
        wp_enqueue_script(
            'ajax-add-to-cart',
            get_stylesheet_directory_uri() . '/assets/js/ajax-add-to-cart.js',
            array('jquery'),
            null,
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'custom_woocommerce_ajax_add_to_cart_js');

Modify the path ('/assets/js/ajax-add-to-cart.js') according to where you created your js file.

3. Handle the AJAX Request with PHP

Define a function in your child theme's functions.php file to process the incoming AJAX request. This PHP function adds the product to the WooCommerce cart. It sends back updated cart fragments such as the cart total or number of items. These fragments refresh the cart section in the user's view.

Code snippet:

function custom_ajax_add_to_cart_handler() {
    $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
    $variation_id = empty($_POST['variation_id']) ? 0 : absint($_POST['variation_id']);
    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);

    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id)) {
        do_action('woocommerce_ajax_added_to_cart', $product_id);

        if ('yes' === get_option('woocommerce_cart_redirect_after_add')) {
            wc_add_to_cart_message(array($product_id => $quantity), true);
        }

        WC_AJAX::get_refreshed_fragments();
    } else {
        wp_send_json(array(
            'error' => true,
            'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id),
        ));
    }

    wp_die();
}
add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'custom_ajax_add_to_cart_handler');
add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'custom_ajax_add_to_cart_handler');

4. Ensure cart fragments are refreshed

WooCommerce automatically handles cart refreshing when products are added via AJAX. Enable WooCommerce's wc-cart-fragments script if the mini-cart or cart fragments are not updating after adding products.

In your child theme's functions.php, add this code:

function enqueue_wc_cart_fragments() {
    if (is_product()) {
        wp_enqueue_script('wc-cart-fragments');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_wc_cart_fragments');

FAQs about WooCommerce AJAX add to cart

Here are answers to common questions about adding AJAX add to cart buttons in WooCommerce.

How does AJAX add to cart impact site performance?

AJAX add to cart impacts WooCommerce site performance in two key ways:

• Reduced server load from full-page reloads. AJAX eliminates full-page reloads. Each full-page reload forces the server to process requests for all static assets including CSS, JavaScript, and images. AJAX only processes relevant cart data, which means quicker responses and less strain on website bandwidth.
• Enhanced site usability. AJAX makes the shopping experience more intuitive and responsive on the front end. Customers receive immediate feedback when adding items to their cart. Updates include mini cart changes, notifications, or cart total adjustments. This eliminates confusion and keeps customers engaged in shopping.

What are the benefits of adding WooCommerce AJAX add to cart?

AJAX add to cart provides technical improvements and business benefits for your WooCommerce store.

It lowers bounce rates

Every second counts in e-commerce. Long delays from page reloads or clunky interactions frustrate customers. Frustrated customers bounce off without completing purchases. AJAX keeps the ordering experience smooth. It reduces the likelihood of customers abandoning their carts.

It increases conversions

An effortless shopping process increases purchase completion rates. AJAX speeds up ordering with instant cart updates. It provides clear visual feedback for customers to take further steps. Customers can add more products or initiate checkout quickly. This keeps customers engaged until checkout and leads to higher conversion rates.

It improves user experience (UX)

Adding products to the cart from Product Archive pages without AJAX takes customers back to the top of the page. AJAX keeps customers in their current position when adding products. They continue browsing and adding products without losing their place. This saves time and improves your site's user experience.

How can I implement AJAX add to cart without a plugin?

Two methods enable AJAX functionality in WooCommerce without plugins:

• WooCommerce's native AJAX add-to-cart feature enables AJAX for Product Archives including Shop, Category, and Tag pages.
• Custom PHP and JavaScript code adds custom AJAX add to cart buttons throughout WooCommerce.

Upgrade your store with WooCommerce AJAX add to cart

Adding multiple products to a shopping cart without AJAX creates a frustrating customer experience. Full-page reloads cause shopping to feel slow and disruptive, especially in large WooCommerce stores. Even if customers complete purchases, the experience impacts their perception of your store.

This guide explored three methods to enable AJAX add to cart in WooCommerce. We covered WooCommerce's built-in AJAX setting, the best AJAX add to cart plugins, and custom PHP and JavaScript code snippets.

To recap, these are the best plugins to add AJAX add to cart in WooCommerce:

• AJAX add to cart for WooCommerce - Adds AJAX add to cart buttons to individual product pages in WooCommerce.
• WooCommerce Product Table - Replaces the default Shop and Category page layout with an AJAX-powered quick order form.
• WooCommerce Bulk Variations - Presents variations in a user-friendly grid or price matrix on product pages with AJAX add to cart buttons.
• WooCommerce Fast Cart - Upgrades WooCommerce's cart and checkout flow with a popup or modal cart featuring built-in checkout and AJAX add to cart buttons.

Get started with these options and enable AJAX add to cart in your WooCommerce store today!