If Adding AJAX add-to-cart functionality to your WooCommerce store can significantly enhance the shopping experience by allowing users to add products to their cart without refreshing the page. In this guide, we’ll walk you through three practical methods to implement AJAX add-to-cart in WooCommerce.
1. Use WooCommerce’s Built-in AJAX Add to Cart Option
WooCommerce comes with a built-in AJAX feature for product archives and shop pages. To enable it:
- Go to your WordPress dashboard.
- Navigate to WooCommerce > Settings > Products.
- Under Add to cart behaviour, enable “Enable AJAX add to cart buttons on archives.”
This method is simple and effective for most use cases. It works well for stores that don’t require a customized cart experience and want a quick setup without coding or additional plugins.
Pros:
- Easy to enable.
- Built-in and maintained by WooCommerce.
- No extra plugins or code required.
Cons:
- Limited to archive/shop pages.
- Doesn’t support AJAX on single product pages.
2. Use WooCommerce AJAX Add to Cart Plugin
For stores needing more flexibility or AJAX support on single product pages, plugins are a great solution. Here are some top-rated options:
● AJAX Add to Cart for WooCommerce
This lightweight plugin enhances both product pages and archive views with AJAX functionality. It supports variable products and offers customization options.
● WooCommerce Product Table
Primarily a table layout plugin, it also includes it. Great for wholesale or B2B stores.
● WooCommerce Bulk Variations
Allows customers to select and add multiple product variations to the cart in one go — all with AJAX.
● WooCommerce Fast Cart
Replaces the standard cart and checkout with a slide-in AJAX cart, boosting conversions by streamlining the process.
Pros:
- Quick setup with no coding.
- More control over UI/UX.
- Supports all product types and pages.
Cons:
- May add bloat if not optimized.
- Some features are locked behind paid versions.
3. Custom AJAX Add to Cart Plugin with JavaScript and PHP
For advanced users or developers who want full control, creating a custom its solution using code is a powerful option.
Sample PHP (in functions.php):
phpCopyEditadd_action('wp_ajax_custom_add_to_cart', 'custom_ajax_add_to_cart');
add_action('wp_ajax_nopriv_custom_add_to_cart', 'custom_ajax_add_to_cart');
function custom_ajax_add_to_cart() {
$product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
$quantity = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
WC()->cart->add_to_cart($product_id, $quantity);
wp_send_json_success(array('cart_count' => WC()->cart->get_cart_contents_count()));
}
JavaScript (enqueue separately):
jsCopyEditjQuery(document).on('click', '.ajax-add-to-cart', function(e) {
e.preventDefault();
let productId = jQuery(this).data('product_id');
jQuery.post(ajaxurl, {
action: 'custom_add_to_cart',
product_id: productId
}, function(response) {
if (response.success) {
alert('Product added! Cart count: ' + response.data.cart_count);
}
});
});
Pros:
- Fully customizable.
- Ideal for custom product flows or themes.
Cons:
- Requires coding knowledge.
- Needs maintenance during WooCommerce updates.
Final Thoughts
Each method for enabling its in WooCommerce offers unique benefits. Beginners may prefer the built-in setting or plugins, while developers can harness the flexibility of custom coding. Choose the approach that best fits your store’s needs, and watch your user experience improve dramatically.
