Add AJAX based “Add to cart” button on WooCommerce Product Page

WooCommerce provides a really nice ajax feature when we add products to the cart. So the page does not reload and the cart counts get updated immediately. But it is limited to the Product Listing/Archive page only. On the single product page (product details page), it doesn’t use the ajax based add to cart button. So every time you click it, it reloads the page and adds the item to the cart.

Good thing, that there is a way to use the same ajax based button on a single product page. We can do it by simply using woocommerce_single_product_summary hook. Below is a small code snippet.

Below code will simply remove the old Add to cart button on a single product page :

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

And below code will add the ajax based Add to cart button on a single product page :

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_loop_add_to_cart', 30 );

Hope you find it useful.

Share it with others and leave your comments if any queries.

Update: This solution will not work for variable products and also it does not show the quantity textbox. If you are looking for ajax support on a Variable product, please check this tutorial.