// Enable AJAX add to cart for single product pages
add_filter( 'woocommerce_is_sold_individually', '__return_false' );
add_action( 'wp_footer', 'woocommerce_ajax_add_to_cart_script' );
function woocommerce_ajax_add_to_cart_script() {
// Only on single product pages
if ( ! is_product() ) {
return;
}
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Handle AJAX add to cart on single product page
$('form.cart').on('submit', function(e) {
e.preventDefault();
var $form = $(this);
var $button = $form.find('.single_add_to_cart_button');
var formData = new FormData($form[0]);
// Add action for AJAX
formData.append('add-to-cart', $form.find('[name=add-to-cart]').val());
// Disable button and show loading
$button.removeClass('added').addClass('loading');
$button.prop('disabled', true);
// Store original button text
var originalText = $button.text();
$button.text('Adding...');
$.ajax({
type: 'POST',
url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
data: formData,
processData: false,
contentType: false,
success: function(response) {
if (response.error && response.product_url) {
window.location = response.product_url;
return;
}
// Success
$button.removeClass('loading').addClass('added');
$button.text('Added to cart');
// Update cart fragments
if (response.fragments) {
$.each(response.fragments, function(key, value) {
$(key).replaceWith(value);
});
}
// Trigger added to cart event
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $button]);
// Show success message
if (response.notices) {
$('.woocommerce-notices-wrapper').html(response.notices);
}
// Reset button after 2 seconds
setTimeout(function() {
$button.removeClass('added');
$button.text(originalText);
$button.prop('disabled', false);
}, 2000);
},
error: function() {
// Error handling
$button.removeClass('loading');
$button.text(originalText);
$button.prop('disabled', false);
// Show error message
alert('Something went wrong. Please try again.');
}
});
});
// Handle quantity changes
$('.quantity input[type=number]').on('change', function() {
var $button = $('.single_add_to_cart_button');
$button.removeClass('added');
});
});
</script>
<?php
}
How to Use Ajax Add to Cart Button Snippet
Copy the PHP code snippet to your clipboard. Paste the snippet to your functions.php file and press Update File.
For using a Code Snippets Manager: paste the code into a PHP file and assign the title (Ajax Add to Cart Button for Single Products) and save your file. Optionally, if your snippets manager offers conditions, you can execute this code for Single Product types on the front-end.
Why Should I Use This Code?
By default, WooCommerce disables the AJAX functionality when the user is viewing an individual Product page. When the user clicks “Add to Cart” the page refreshes and takes the user to the top of the page, while displaying a popup message that the Product has been added to the cart. This is not an ideal user experience and seems counter-intuitive when using AJAX in other areas of the website.
Users will get a smoother experience when enabling AJAX for individual product pages. Especially if you have a side cart or popup that opens once the button is clicked.