By default, WooCommerce uses AJAX to add products to the cart on archive pages without a page reload. However, the add-to-cart button on single product pages triggers a full page refresh.
This guide shows how to enable AJAX add-to-cart on single WooCommerce product pages using custom JavaScript and a template override.
If you do not understand what Ajax is, for the purpose of this explanation it means adding the product to the cart without refreshing the page.
Note: Starting with WooCommerce 7.8, cart fragments are disabled by default and only load when a Cart Widget is rendered on the page. Make sure your theme includes a cart widget or that the wc-cart-fragments script is enqueued. Also note that this approach works for simple products. Variable products require additional handling for attribute selection.
Step 1: AJAX Add to Cart JavaScript
First, define the fragment refresh configuration, then attach the form submit handler. Make sure to enqueue this script with wc-cart-fragments as a dependency:
// Fragment refresh configuration
var $warp_fragment_refresh = {
url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'),
type: 'POST',
success: function (data) {
if (data && data.fragments) {
$.each(data.fragments, function (key, value) {
$(key).replaceWith(value);
});
$(document.body).trigger('wc_fragments_refreshed');
}
}
};
// AJAX add to cart on single product page
$('.entry-summary form.cart').on('submit', function (e) {
e.preventDefault();
var this_button = $('.single_add_to_cart_button');
this_button.block({
message: null,
overlayCSS: {
background: '#fff', opacity: 0.6
}
});
var product_url = window.location,
form = $(this);
$.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result) {
var cart_dropdown = $('.widget_shopping_cart', result);
// Update dropdown cart
$('.widget_shopping_cart').replaceWith(cart_dropdown);
// Refresh cart fragments
$.ajax($warp_fragment_refresh);
this_button.unblock();
}).fail(function () {
this_button.unblock();
});
});Add this code to a JavaScript file and enqueue it in your theme with wc-cart-fragments as a dependency:
wp_enqueue_script( 'ajax-add-to-cart', get_stylesheet_directory_uri() . '/js/ajax-add-to-cart.js', array( 'jquery', 'wc-cart-fragments' ), '1.0', true );Step 2: Override the Add to Cart Template
The second step is to override the template responsible for the add-to-cart button. This moves the add-to-cart value to a hidden input so the form submission can be intercepted by JavaScript.
Copy the file from:
plugins/woocommerce/templates/single-product/add-to-cart/simple.phpTo your theme at the following location:
themes/your theme name/woocommerce/single-product/add-to-cart/simple.phpThis is the standard process for overriding WooCommerce templates. After each WooCommerce update, compare your overridden file with the original to ensure compatibility. The template version is noted at the top of each file.
Now replace the line:
<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>With the following code:
<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" />
<button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>FAQs
Summary
Enabling AJAX add-to-cart on single WooCommerce product pages requires two steps: a JavaScript handler that intercepts the form submission and refreshes cart fragments, and a template override that moves the product ID to a hidden input field.
Remember to enqueue your script with wc-cart-fragments as a dependency, and always check your template overrides after WooCommerce updates. For more on customizing WooCommerce behavior, see our guide on WooCommerce hooks.
