WooCommerce Ajax Add to Cart: 3 Methods That Actually Work (2026)

WooCommerce Ajax add to cart lets shoppers add products without reloading the page. This reduces friction, speeds up the buying flow, and lowers cart abandonment.

By default, WooCommerce only enables Ajax on shop, category, and tag (archive) pages.

Single product pages and variable products still trigger a full page reload, which is where most stores lose conversions.

In this guide, we've covered all three ways to enable Ajax Add to Cart in WooCommerce:

• Built-in WooCommerce setting (archive pages only)
• A plugin (no code, plus side-cart UX out of the box, works on single + variable products)
• Custom PHP + JavaScript code (full control, works on single + variable products)

We’ve tested these methods across different stores to ensure speed, compatibility, and reliability. 

What Is WooCommerce Ajax Add to Cart?

A WooCommerce Ajax add-to-cart feature allows customers to add products to their shopping cart without triggering a page reload.

Instead of refreshing the entire page every time a product is added or its quantity is modified, Ajax updates the page dynamically in the background.

When a shopper clicks the "Add to Cart" button:

• Without Ajax

Reloads the entire page. The cart updates server-side, but the user sees a flash of white, a re-rendered page, and a brief delay.

• With Ajax

WooCommerce sends a request to the server via Ajax. Then, the cart updates instantly without reloading or redirecting shoppers to the cart page, ensuring a smooth experience.

The cart icon in the header updates to reflect the added item, and a success message pops up.

Method 1: Enable Ajax Add to Cart in WooCommerce Settings (Native)

Here’s how you can enable the Ajax add to cart functionality with WooCommerce native options.

Step 1: Go to WooCommerce product settings

Navigate to WooCommerce ⇨ Settings ⇨ Products ⇨ General.

Step 2: Enable Ajax add to cart buttons on archives

Under the Add to cart behavior section, check the box next to ‘Enable AJAX add to cart buttons on archives’.

Scroll down the page and hit the ‘Save changes’ button.

Step 3: Test it on your shop page

Make sure to head to the shop or category page in your store and add a product to your cart.

The Ajax implementation will kick in.

Limitations of the default WooCommerce Ajax Add to Cart Option 

Though the native Ajax feature is functional, it has several limitations that can impact the shopping experience in your store.

• Does not work on product pages: The default Ajax function only gets enabled on the archive pages. If a shopper clicks the ‘Add to Cart’ on single product pages, the whole page will reload.
  
• Does not support quantity selection: With the default Ajax function, customers can’t select product quantities directly on archive pages. Pressing ‘Add to Cart’ option only adds a single unit of an item. So if a shopper wants to add three chocolates, they’ll have to navigate to individual product pages or update the quantity on the cart page (introduction of extra steps).
  
• Does not work for variable products: Shoppers can’t add product variations like size or colors with the default Ajax implementation on archive pages. 
  
• No mini cart drawer: It does not show any mini cart drawer or visual feedback beyond a small 'View Cart' link.

If these limitations matter for your store and to fix them, continue to method 2 (plugin) or method 3 (code).

Method 2: Enable WooCommerce Ajax Add to Cart Using a WordPress Plugin

If you’re looking for a quick and hassle-free way to enable the Ajax add to cart feature in WooCommerce, using a plugin is the best approach.

We’ll use FunnelKit Cart (free version available on WordPress.org) because it ships with Ajax on by default and replaces the static WooCommerce cart page with a sliding side cart.

It doesn’t require any coding and provides additional customization options to enhance your cart experience.

Make sure to install and activate FunnelKit Cart on your WordPress website.

Here's the WooCommerce add to cart without page refresh tutorial:

Follow the step-by-step process below:

Step 1: Enable the side cart in WooCommerce

Navigate to FunnelKit ⇨ Cart and turn on the ‘Enable cart’ toggle.

Clicking on ‘Save’ will enable the WooCommerce sliding cart in your store.

Step 2: Configure the Ajax add to cart option

Configure the cart options:

• Icon Visibility: Choose whether you want to display the cart icon on the entire website, WooCommerce pages, or nowhere (place it in the website header).
  
• Icon Position: Display the icon on the bottom left or right of your screen.
  
• Cart Heading: Customize the title on top of your WooCommerce side cart
  
• Hide Cart Icon: It keeps the cart icon hidden until a shopper adds the product to their cart.
  
• Ajax Add To Cart: This setting enables Ajax functionality, allowing users to add products to their carts without a page reload.
  
• Auto Open Side Cart: Configure this setting to automatically open the cart when a user adds a product.

You can further configure the coupon field, cart summary, checkout section, and more on your side cart the way you want.

Once done, hit the ‘Save’ button to lock your changes.

Step 3: Style your WooCommerce Ajax cart

Customize your dynamic WooCommerce shopping cart and icon from the ‘Style’ tab.

You can set the cart preview width on desktop and mobile, text color, button color, upsell box, animation speed, icon style, size, etc.

Save the changes when done.

Step 4: Preview the WooCommerce Ajax add to cart functionality

Go to the shop page of your website. Now, as soon as you add a product to the cart, the side cart slides out and that item is added without any page reload.

Even if you increase or decrease the product quantity, the Ajax support works like a charm.

Its Ajax implementation works on single product and archive pages without coding.

Plus, it supports all kinds of products, such as simple, variable, grouped, subscription, and more.

This is how you can effortlessly enable the WooCommerce Ajax add-to-cart feature with FunnelKit Cart. That too, without any custom code.

Method 3: Enable WooCommerce Ajax Add to Cart Using Code Snippets

This method works on every page type (single, variable, archive) and gives you full control. It requires PHP and JavaScript knowledge.

Always test on a staging site first. Add these snippets to your child theme's functions.php or a code snippet plugin like WPCode.

Step 1: Enqueue the script and localize the nonce

Before anything else, we need to make wc_add_to_cart_params available and create a security nonce that the handler can verify.

This is the step most tutorials skip and it’s why their snippets fail security audits.

function fk_enqueue_ajax_atc_script() {
    if ( is_admin() ) {
        return;
    }

    // wc_add_to_cart_params is already localized by WooCommerce on the front end.
    // We just need to add our own nonce.
    wp_register_script( 'fk-ajax-atc', '', array( 'jquery', 'wc-add-to-cart' ), null, true );
    wp_enqueue_script( 'fk-ajax-atc' );

    wp_localize_script( 'fk-ajax-atc', 'fk_ajax_atc', array(
        'wc_ajax_url' => WC_AJAX::get_endpoint( '%%endpoint%%' ),
        'nonce'       => wp_create_nonce( 'fk_ajax_atc_nonce' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'fk_enqueue_ajax_atc_script' );

Step 2: Add the JavaScript handler for single product pages

This script intercepts the form submission, sends an AJAX request to our custom wc-ajax endpoint, and triggers WooCommerce’s built-in added_to_cart event so the mini-cart updates automatically.

function fk_ajax_atc_single_product_script() {
    if ( ! is_product() ) {
        return;
    }
    ?>
    <script>
    jQuery( function( $ ) {
        $( 'form.cart' ).on( 'submit', function( e ) {
            e.preventDefault();

            var $form    = $( this );
            var $button  = $form.find( 'button[type="submit"]' );
            var formData = $form.serialize();

            $.ajax({
                type: 'POST',
                url: fk_ajax_atc.wc_ajax_url.toString().replace( '%%endpoint%%', 'fk_add_to_cart' ),
                data: formData + '&security=' + fk_ajax_atc.nonce,
                beforeSend: function() {
                    $button.removeClass( 'added' ).addClass( 'loading' );
                },
                success: function( response ) {
                    // FIXED: This used to be `response.error & response.product_url`
                    // (bitwise AND). Use `&&` (logical AND) here, or validation
                    // failures fall through silently.
                    if ( response.error && response.product_url ) {
                        window.location = response.product_url;
                        return;
                    }
                    $( document.body ).trigger( 'added_to_cart', [
                        response.fragments,
                        response.cart_hash,
                        $button
                    ] );
                },
                complete: function() {
                    $button.removeClass( 'loading' ).addClass( 'added' );
                }
            });
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'fk_ajax_atc_single_product_script' );

Step 3: Register the PHP handler with nonce verification

This is the server-side endpoint that receives the AJAX request, validates it, adds the product to the cart, and returns refreshed fragments.

function fk_ajax_add_to_cart_handler() {

    // 1. Verify nonce — this prevents CSRF attacks.
    check_ajax_referer( 'fk_ajax_atc_nonce', 'security' );

    // 2. Sanitize inputs.
    $product_id   = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['add-to-cart'] ) );
    $quantity     = empty( $_POST['quantity'] ) ? 1 : wc_stock_amount( wp_unslash( $_POST['quantity'] ) );
    $variation_id = isset( $_POST['variation_id'] ) ? absint( $_POST['variation_id'] ) : 0;
    $variations   = isset( $_POST['variation'] ) ? wc_clean( wp_unslash( $_POST['variation'] ) ) : array();

    // 3. Run WooCommerce's own validation.
    $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity );
    $product_status    = get_post_status( $product_id );

    if ( $passed_validation && 'publish' === $product_status && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variations ) ) {
        do_action( 'woocommerce_ajax_added_to_cart', $product_id );
        WC_AJAX::get_refreshed_fragments(); // This calls wp_send_json + wp_die internally.
    } else {
        wp_send_json( array(
            'error'       => true,
            'product_url' => get_permalink( $product_id ),
        ) );
    }

    wp_die();
}
// Hook into the modern wc-ajax endpoint (preferred — bypasses page caching).
add_action( 'wc_ajax_fk_add_to_cart',         'fk_ajax_add_to_cart_handler' );
add_action( 'wc_ajax_nopriv_fk_add_to_cart',  'fk_ajax_add_to_cart_handler' );

Step 4: Update cart fragments for the mini cart

If you have a custom cart count element in your header (like <span class="cart-count">), this filter keeps it in sync.

function fk_update_cart_count_fragment( $fragments ) {
    ob_start();
    ?>
    <span class="cart-count"><?php echo esc_html( WC()->cart->get_cart_contents_count() ); ?></span>
    <?php
    $fragments['.cart-count'] = ob_get_clean();
    return $fragments;
}
add_filter( 'woocommerce_add_to_cart_fragments', 'fk_update_cart_count_fragment' );

Step 4: Add Ajax support to archive pages

This handles the click on archive (shop, category, tag) pages.

function fk_ajax_atc_archive_script() {
    if ( ! ( is_shop() || is_product_category() || is_product_tag() ) ) {
        return;
    }
    ?>
    <script>
    jQuery( function( $ ) {
        $( document ).on( 'click', '.add_to_cart_button:not(.product_type_variable):not(.product_type_grouped)', function( e ) {
            e.preventDefault();

            var $button    = $( this );
            var product_id = $button.data( 'product_id' );
            var quantity   = $button.data( 'quantity' ) || 1;

            $.ajax({
                type: 'POST',
                url: fk_ajax_atc.wc_ajax_url.toString().replace( '%%endpoint%%', 'fk_add_to_cart' ),
                data: {
                    'add-to-cart': product_id,
                    'quantity': quantity,
                    'security': fk_ajax_atc.nonce
                },
                beforeSend: function() {
                    $button.removeClass( 'added' ).addClass( 'loading' );
                },
                success: function( response ) {
                    if ( response.error && response.product_url ) {
                        window.location = response.product_url;
                        return;
                    }
                    $( document.body ).trigger( 'added_to_cart', [
                        response.fragments,
                        response.cart_hash,
                        $button
                    ] );
                },
                complete: function() {
                    $button.removeClass( 'loading' ).addClass( 'added' );
                }
            });
        });
    });
    </script>
    <?php
}
add_action( 'wp_footer', 'fk_ajax_atc_archive_script' );

Step 6: Handle variable products

Variable products need extra handling because the user selects a variation before clicking “Add to Cart.” The Step 2 script already supports this via formData = $form.serialize().

variation_id and the variation[attribute_pa_color] style fields are included automatically when the form contains them.

But WooCommerce’s default variations script must finish updating the form before AJAX fires. If you’re seeing variation IDs come through as 0, listen for found_variation first:

jQuery( function( $ ) {
    var selected_variation = null;
    $( '.variations_form' ).on( 'found_variation', function( e, variation ) {
        selected_variation = variation;
    });
    $( '.variations_form' ).on( 'reset_data', function() {
        selected_variation = null;
    });
});

Step 7: Add to cart programmatically (advanced)

If you need to trigger an AJAX add-to-cart from JavaScript without a form click. For example, from a “quick view” modal, a recommended product widget, or a one-click upsell, use the wc-ajax endpoint directly:

function fk_programmatic_add_to_cart( productId, quantity ) {
    quantity = quantity || 1;

    return $.ajax({
        type: 'POST',
        url: fk_ajax_atc.wc_ajax_url.toString().replace( '%%endpoint%%', 'fk_add_to_cart' ),
        data: {
            'add-to-cart': productId,
            'quantity': quantity,
            'security': fk_ajax_atc.nonce
        }
    }).done( function( response ) {
        if ( response.error && response.product_url ) {
            window.location = response.product_url;
            return;
        }
        jQuery( document.body ).trigger( 'added_to_cart', [
            response.fragments,
            response.cart_hash,
            null
        ] );
    });
}

// Usage:
// fk_programmatic_add_to_cart( 42, 2 );

Well done! This is how you can set up WooCommerce Ajax add to cart programmatically​ using custom code snippets.

Limitations of the code method

• No validation for custom fields: If you have custom fields on the product page, Ajax may bypass their validation. You must manually handle these in JavaScript and the Ajax function.
  
• Limited support for variable products: For variable products, extra coding work is needed to retrieve selected attributes and variation IDs before sending the Ajax request.
  
• Requires JavaScript and PHP coding knowledge: You should have a deep understanding of both PHP and JavaScript for Ajax requests and DOM manipulation. If you make even a small error in the syntax, the entire script can break.
  
• Does not work well with caching plugins: Some caching plugins, such as WP Rocket, LiteSpeed Cache, etc., cache WooCommerce pages, potentially breaking Ajax requests. This may cause the cart not to update dynamically after adding products.

Ajax Add to Cart with WooCommerce Blocks (Cart and Checkout Blocks)

WooCommerce is steadily replacing the legacy shortcode-based cart and checkout pages with Cart Block and Checkout Block counterparts. As of WooCommerce 8.3, these are the default in new installs.

However, the good news is that Ajax add to cart works with Blocks out of the box, but with some differences you should know about.

What changes with Blocks

1. Add to Cart buttons in Blocks themes use the wc-block-add-to-cart-form script, not the legacy wc-add-to-cart. The button element is <button class='wp-block-button__link wc-block-components-product-button__button">.
2. The cart updates via the Store API, not the legacy AJAX endpoints. This means custom snippets that listen for added_to_cart events still fire, but fragment updates flow through a different mechanism.
3. Fragments are still respected for backwards compatibility, but Blocks themes typically use the Store API’s useStoreCart() hook for cart state.

Quick compatibility check

• If you’re using the Cart and Checkout Blocks, the native WooCommerce 'Enable AJAX add to cart buttons on archives' setting still works.
• Custom code snippets like the ones above still work for the legacy add-to-cart forms (most product pages still use them).
• Side-cart plugins like FunnelKit Cart are Blocks-compatible.

If you’ve replaced your product page template with a custom Block layout that uses the Block-based Add to Cart button, the legacy form.cart selector in our Method 3 code won’t match.

Adjust the JS selector to .wp-block-add-to-cart-form or hook into the Block's own event:

document.addEventListener( 'wc-blocks_added_to_cart', function( e ) {
    // Block-based add-to-cart fired. e.detail contains product info.
    console.log( 'Block add to cart:', e.detail );
});

Top 3 Best WooCommerce Ajax Add to Cart Plugins

Adding products to the cart should be a seamless experience for shoppers. And that’s where WooCommerce Ajax add to cart plugins come in!

These WooCommerce cart plugins let customers add items to their cart without refreshing the page, providing a smooth, interactive shopping experience.

Out of hundreds of plugins that we tested, let’s explore the top 3 WooCommerce Ajax add to cart plugins, their features, and why they stand out.

1. FunnelKit Cart for WooCommerce

FunnelKit Cart is an advanced WooCommerce side cart solution that instantly updates the cart (simple, variable, or subscription products) with Ajax.

It lets you offer in-cart product upsells and set up smart rewards that help improve your store’s average order value (AOV).

Features of FunnelKit Cart:

• Slide-in Ajax cart: Displays a dynamic sliding cart that replaces the default WooCommerce cart page and lets shoppers go straight to checkout. Its Ajax cart functionality lets you instantly add or modify products to the cart without any page reload.
  
• Smart upsells and cross-sells: Recommend product suggestions based on items users have added to the cart to increase revenue per order.
  
• One-click express checkout: FunnelKit Cart lets you purchase directly from the cart without going to the checkout page using express payment options like Apple Pay and Google Pay.
  
• Attractive rewards: Gamify the shopping experience by offering rewards for threshold-based cart values. Set up rewards such as free shipping, discounts, and free gifts to incentivize shoppers’ purchases.
  
• Fully customizable: Customize and style your WooCommerce side cart along with its icon, including the color, background, animation, checkout button, and more.
  
• Multilingual support: Customize your cart for multiple languages to cater to shoppers from different countries and enhance their shopping experience.

Pricing: FunnelKit Cart is available in the free (lite) and premium versions. The Ajax option, customizations, direct checkout, and more are available in the free version.

To unlock advanced features such as in-cart product recommendations and smart rewards, upgrade to the premium version.

It comes with added functionality in FunnelKit Funnel Builder, allowing you to set up optimized sales funnels and high-converting checkout pages.

2. Ajax Add to Cart for WooCommerce

This WooCommerce plugin lets users add single or variable products to the cart without reloading the site each time.

Features of Ajax Add to Cart for WooCommerce:

• Instant add-to-cart without page reloads: Customers stay on the product page while adding items to their shopping carts without any page reloads.
  
• Customizable add to cart button behavior: Enable or disable the Ajax add to cart function for different pages.
  
• Support for shop and archive pages: Users can add items to their cart directly from the archives (shop and category pages) without reloading the page settings.

It’s a simple plugin with limited customization options, meaning you cannot make it on-brand. Plus, you cannot offer upsells or set up rewards inside the cart.

Furthermore, it doesn’t provide an interactive sliding cart or upsell popup.

Pricing: This Ajax Add to Cart for WooCommerce plugin is available for free in the WordPress repository.

3. WPC Ajax Add to Cart for WooCommerce

This add to cart plugin allows shoppers to add items to their carts immediately without reloading the site to view changes.

Features of WPC Ajax Add to Cart for WooCommerce: 

• Supports all WooCommerce product types: Works with simple, variable, grouped, and even external items.
  
• Ajax powered cart and checkout updates: It lets you dynamically update the cart contents and totals.
  
• Works on shop, archive, and single product pages: Apply Ajax add-to-cart functionality everywhere in your WooCommerce store.

Unlike solutions like FunnelKit Cart, this plugin doesn’t include in-cart recommendations. The cart behavior and mini cart appearance are fixed without deep customization options.

Pricing: The WPC Ajax Add to Cart for WooCommerce plugin is available for free.

7 Best Practices to Optimize WooCommerce Ajax Add to Cart

Enabling Ajax Add to Cart is just the start. You should optimize it to ensure your cart runs smoothly, loads quickly, and delivers a high-converting shopping experience.

Follow these best practices to get the best performance out of your WooCommerce Ajax Add to Cart setup:

1. Use a lightweight and well-coded theme

Choose a WooCommerce-optimized theme that supports Ajax natively. Themes like Astra, GeneratePress, or Blocksy come with built-in Ajax compatibility and fast-loading scripts.

Avoid heavy, script-bloated themes that slow down add-to-cart requests.

2. Minimize Ajax request load time

Every Ajax request communicates with your server, so optimize your hosting environment.

Use a high-performance hosting provider (e.g., Cloudways, WP Engine, or SiteGround) and enable object caching and PHP OPcache.

Optimize your database tables regularly to speed up cart operations.

3. Avoid plugin conflicts

Too many plugins running Ajax scripts can cause duplicate requests or slowdowns. Therefore, it's a must to deactivate unnecessary WooCommerce plugins that alter the cart or checkout.

Check your browser console for Ajax errors and resolve any 404 or 500 responses.

If you’re using a caching plugin, make sure it excludes WooCommerce’s Ajax endpoints like /wc-ajax=add_to_cart.

4. Optimize cart fragments

WooCommerce uses cart fragments (wc-cart-fragments.js) to update mini-carts dynamically. While useful, they can impact performance.

To optimize:

• Use a plugin like Disable Cart Fragments if your theme handles Ajax updates separately.
• Or switch to FunnelKit Cart, which replaces default fragments with a faster, optimized system.

5. Test on mobile devices

Ajax performance can vary by device. Test your add-to-cart flow on mobile, tablet, and desktop to ensure consistency.

Focus especially on network-heavy environments where slow 3G or 4G connections can expose script inefficiencies.

6. Measure and monitor

Use tools like Chrome DevTools, GTmetrix, or PageSpeed Insights to analyze Ajax request timing and JavaScript execution.

Track how Ajax improvements affect metrics such as conversion rate, page load speed, cart abandonment, bounce rate, and more.

These analytics give you measurable proof of performance gains.

7. Enhance UX with visual feedback

When users click “Add to Cart,” show instant feedback like a success message, loader animation, or a slide-in cart popup. It reassures customers their action worked.

Plugins like FunnelKit Cart make this effortless with built-in animations and real-time cart updates.

Frequently Asked Questions (FAQs)

Elevate Your WooCommerce Shopping Experience with Ajax Add to Cart

Enabling WooCommerce Ajax add to cart is crucial for improving user experience, reducing cart abandonment, and streamlining the shopping process.

Whether you implement it with custom code or a dedicated plugin, Ajax ensures seamless product additions without page reloads. 

For the best experience, using a feature-rich plugin like FunnelKit Cart can provide advanced functionalities, including a dynamic side cart, upsell recommendations, and a mobile-friendly design with everything optimized for speed and performance.

By integrating Ajax add to cart into your WooCommerce store, you create a fast, frictionless, and conversion-optimized shopping experience that keeps customers coming back for more.

Related Blogs

Editorial Team

May 25, 2026

WooCommerce Variable Products: How To Set Up And Manage Stock

WooCommerce variable products let you sell different versions of the same item from one product page. Sizes, colors, materials, styles, etc. Instead of a separate listing for each option, customers...

Editorial Team

May 22, 2026

FunnelKit vs CheckoutWC: Which WooCommerce Checkout Plugin Wins in 2026?

If you sell on WooCommerce, the checkout page is what makes or breaks conversions in your store. A clunky checkout leaks revenue. A clean one keeps customers moving from cart...

Editorial Team

May 13, 2026

IconicWP's Flux Checkout & Sales Booster: What Happened and What to Do Next

If you recently went looking for the IconicWP product pages and couldn’t find them, you’re not imagining things. In 2026, Liquid Web restructured its WordPress plugin portfolio, consolidating several products...