How to Enable Ajax Add to Cart in WooCommerce

Imagine a customer browsing your store and finding a perfect product. They add it to their cart—only to be met with a full-page reload, which can slow down the experience and create unnecessary friction.

As a result, they get frustrated, leave, and never return, causing you to lose sales.

This small issue can have a big impact in a world where speed matters.

The solution? WooCommerce Ajax add to cart!

By enabling Ajax add to cart in your WooCommerce store, you can make shopping seamless, improve user experience, and keep customers moving toward checkout.

In this article, we’ll show you three different methods to enable Ajax add to cart functionality in your WooCommerce store.

What is WooCommerce Ajax Add to Cart?

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

Instead of refreshing the entire page every time a product is added or its quantity is modified, Ajax (Asynchronous JavaScript and XML) dynamically updates it in the background.

How does it work?

A shopper is on the product page and clicks on the “Add to cart” button:

• Without Ajax

Hitting “Add to Cart” would reload the entire page, and the product would get added to the cart, which can be time-consuming and frustrating. 

• With Ajax

When a shopper clicks “Add to Cart”, 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 on the header updates with the added item, and a success message pops up.

Why Enable WooCommerce Ajax Add to Cart in Your Store?

If your WooCommerce store still uses the default add-to-cart method, you could lose sales without realizing it.

Here’s why you should enable the Ajax add-to-cart functionality:

• Faster shopping experience: No more annoying page reloads! Shoppers can add their favorite products to their cart instantly, keeping them engaged.
  
• High conversions: Even a 1-second delay can reduce conversions by 7%. Ajax eliminates unnecessary wait times, enabling quick checkout.
  
• Enhanced mobile experience: Mobile users hate slow, clunky interfaces. Implementing Ajax keeps everything snappy and reduces friction for mobile shoppers.
  
• More purchases: A seamless add-to-cart experience in your store encourages shoppers to keep browsing and adding products, increasing average order value.
  
• Improved site performance: Fewer page reloads mean less strain on your server, leading to a faster website experience.

If you want to reduce cart abandonment, increase sales, and improve the user experience, you should enable the Ajax add-to-cart feature in your WooCommerce store. 

Method 1: How to Enable Ajax Add to Cart Using WooCommerce Default Options?

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: Preview and test the default Ajax add to cart functionality

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 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.

• Doesn’t 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.
  
• Doesn’t 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).
  
• Doesn’t work for variable products: Shoppers can’t add product variations like size or colors with the default Ajax implementation on archive pages. 

To fix these issues, many WooCommerce store owners prefer using WordPress plugins or custom codes to implement Ajax add to cart in their stores.

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 cart plugins allow customers to add items to their cart without refreshing the page, providing a smooth and 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, which is an extra step leading to the direct 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 upsell and cross-sell product suggestions based on the items users have added to the cart to increase the revenue of each order in the cart itself.
  
• 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 attractive rewards on threshold-set cart values. Set up rewards like free shipping, discounts, and free gifts to incentivize your 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 multilingual languages to cater to shoppers from different countries to give them an enhanced shopping experience.

Pricing: FunnelKit Cart is available in the free (lite) and premium versions. Its Ajax option, customizations, direct checkout, etc., 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 as the added functionality inside 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 allows users to include single or variable products in the cart without having to reload 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 the page setting reloaded.

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.

Expert Recommendation: The Best WooCommerce Ajax Add to Cart Plugin

After evaluating the top options, FunnelKit Cart stands out as the best WooCommerce Ajax add to cart plugin for store owners who want a feature-rich, conversion-optimized solution.

FunnelKit Cart is designed with conversion rate optimization (CRO) in mind. It’s not just about adding products without page reloads—it’s about increasing average order value and reducing cart abandonment.

With all the features mentioned above, it has been widely trusted by over 20,000 active WooCommerce stores.

If you're serious about improving conversions and increasing revenue, this is the best choice for your WooCommerce store.

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

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

We’ll use FunnelKit Cart to implement Ajax. 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.

Step 1: Enable the WooCommerce side cart

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 WooCommerce Ajax cart

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, FunnelKit Cart slides out and that item is added without any page reload.

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

FunnelKit Cart’s Ajax implementation works on single product and archive pages.

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.

While plugins provide a quick and easy solution for enabling WooCommerce Ajax add to cart, some store owners prefer custom coding for full customization and control.

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

Follow the step-by-step process to set up Ajax add to cart implementation in WooCommerce with code snippets.

Step 1: Enable Ajax add to cart for simple products

WooCommerce has built-in Ajax add to cart support on archives, but for single products, enable it manually with this code.

Add this to your functions.php file or a WPCode snippet plugin:

function enable_ajax_add_to_cart() { ?> <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: wc_add_to_cart_params.ajax_url, data: formData + '&action=woocommerce_ajax_add_to_cart', beforeSend: function(){ button.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'); } }); }); }); </script> <?php } add_action('wp_footer', 'enable_ajax_add_to_cart');

Step 2: Handle Ajax request in WooCommerce

Make sure to create a function that handles the Ajax request when an item is added to the cart using this code (add it to functions.php file):

function woocommerce_ajax_add_to_cart() { $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['add-to-cart'])); $quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']); $variation_id = isset($_POST['variation_id']) ? absint($_POST['variation_id']) : '';$passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity); $product_status = get_post_status($product_id);if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { do_action('woocommerce_ajax_added_to_cart', $product_id); WC_AJAX::get_refreshed_fragments(); } else { $data = array( 'error' => true, 'product_url' => get_permalink($product_id) ); echo wp_send_json($data); } wp_die(); } add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart'); add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');

Step 3: Update cart fragments for mini cart

To ensure the cart updates dynamically, add the following code to refresh the cart fragments:

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

Step 4: Add Ajax support to archive pages

To ensure the Ajax support is working on archives with these snippets, use the following code:

function add_ajax_to_archive_add_to_cart() { ?> <script> jQuery(function($){ $(document).on('click', '.add_to_cart_button', function(e){ e.preventDefault(); var button = $(this); var product_id = button.data('product_id');$.ajax({ type: 'POST', url: wc_add_to_cart_params.ajax_url, data: { action: 'woocommerce_ajax_add_to_cart', 'add-to-cart': product_id }, beforeSend: function(){ button.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'); } }); }); }); </script> <?php } add_action('wp_footer', 'add_ajax_to_archive_add_to_cart');

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

Limitations Of Using Code Snippets to Set Up WooCommerce Ajax Add to Cart

Here are some limitations and potential drawbacks of using this 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 like WP Rocket, LiteSpeed Cache, etc., cache WooCommerce pages, potentially breaking Ajax requests. This may cause the cart not to update dynamically after adding products.

WooCommerce Ajax Add to Cart: Frequently Asked Questions (FAQs)

In this section, we’ve answered some frequently asked questions related to Ajax add to cart functionality in WooCommerce:

1. How can I customize the Ajax add to cart button?

You can customize the text, color, size, and behavior of the Ajax add-to-cart button using WordPress appearance options.

You can even customize your buttons using CSS or custom JavaScript for advanced modifications.

FunnelKit Cart lets you customize your cart style and icon the way you want.

2. Does Ajax add to cart work on mobile devices?

Yes, Ajax functionality makes mobile shopping more seamless by enabling shoppers to add products to their cart without navigating away from the page.

To set up Ajax implementation on mobile devices, you can use FunnelKit Cart which seamlessly integrates with WooCommerce add to cart functionality along with smart customization options.

3. How to disable WooCommerce Ajax add to cart functionality?

You can disable the Ajax add to cart feature by simply unchecking the option if you use WooCommerce’s default functionality.

However, if you use FunnelKit Cart, you can just turn off the Ajax add to cart toggle with one click.

4. What to do if my Ajax add to cart stops working on my website?

If the Ajax add to cart is not working, you can try:

• Disabling conflicting plugins (some caching or security plugins may block Ajax requests)
• Switching to a default theme and checking if your theme is causing any issues
• Checking JavaScript errors using the browser console
• Using a reliable plugin like FunnelKit Cart for smooth integration

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 through custom coding or a dedicated plugin, Ajax ensures seamless product additions without any 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 mobile-friendly design—all 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

March 19, 2025

How to Build a Sales Funnel for Physical Products (Step by Step) 

Ever wondered why some physical product stores easily turn visitors into customers while others struggle? Your product’s solid, and your marketing’s sharp—but conversions stay low. Why?  Because typical website pages...

Editorial Team

March 18, 2025

How to Add a WooCommerce Mini Cart to Your Store (Step-by-Step)

Let’s say a shopper adds a product, excited to buy… then, nothing. They got distracted, second-guess their decision, or struggle to find the cart. And like that, another sale goes...

Editorial Team

March 14, 2025

How to Set Up WooCommerce Stripe Integration in 5 Simple Steps

Does your WooCommerce store offer enough payment options? If not, you could be losing up to 13% of sales. [According to Baymard]. WooCommerce’s default payment options don’t always meet customer...