How to Disable Ajax Add to Cart on Product page in Magento 2

Happy New Year Readers! 🥳 Let’s make a good start of the new year with a new Magento solution! 📖

Do your large number of customers abandon cart due to lengthy checkout process? Do you want to optimize the checkout process so that you never lose a chunk of users who could have been your potential customers?!

The default behavior of the Magento 2 “Add to Cart” button is on click, it uses an ajax to add the product to cart and keep the user on the product page.

Now, in order to boost the order process, you need to disable ajax add to cart on the product page in Magento 2 and redirect customers directly to the checkout page. This can help push your customers for the purchase and also save your customers’ time for completing the order.

Steps to Disable Ajax Add to Cart on Product Page in Magento 2:

1. Find the following code from vendor\magento\module-catalog\view\frontend\templates\product\view\addtocart.phtml file
   
   <script type="text/x-magento-init">     {         "#product_addtocart_form": {             "Magento_Catalog/product/view/validation": {                 "radioCheckboxClosest": ".nested"             }         }     } </script>

   1 2 3 4 5 6 7 8 9

   <script type="text/x-magento-init">     {         "#product_addtocart_form": {             "Magento_Catalog/product/view/validation": {                 "radioCheckboxClosest": ".nested"             }         }     } </script>

    
2. Go to app/design/frontend/[Vendor]/[Theme]/Magento_Catalog/templates/product/view/addtocart.phtml and replace the below code to add the bindsubmit event:
   
   <script type="text/x-magento-init">    {     "#product_addtocart_form": {         "Magento_Catalog/product/view/validation": {             "bindSubmit": true,             "radioCheckboxClosest": ".nested"         }     }    } </script>

   1 2 3 4 5 6 7 8 9 10

   <script type="text/x-magento-init">    {     "#product_addtocart_form": {         "Magento_Catalog/product/view/validation": {             "bindSubmit": true,             "radioCheckboxClosest": ".nested"         }     }    } </script>

    
3. To Redirect customers from cart page to the checkout page cart on click of add to cart button, Go to Stores > Configuration > Sales > Checkout > Shopping Cart and set “After Adding a Product Redirect to Shopping Cart” to Yes.

That’s all to disable ajax add to cart on Magento 2 product page and redirect customers directly to the checkout page.

Don’t forget to comment down your issues or queries in the comment section below, I would be happy to help 🙂

If you like the solution, don’t forget to share it with your Magento buddies!