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

According to research conducted by Baymard, 22% of respondents assumed that a lengthy or complicated checkout process makes them uncomfortable and abandon carts.

If you don’t want to lose customers for this reason, it’s best to start optimizing your checkout process right away.

To do so, first, you need to understand how the Magento 2 “Add to Cart” works on the product page. It uses AJAX to add products to shopper’s carts and keep them right on the product pages. This kept customers thinking about other products and just browsing around your site instead of making quick decisions and going straight to the checkout page.

So, redirecting the clients to the checkout page will help boost conversion significantly. In order to implement this strategy, you need to disable AJAX Add to Cart on the product page in Magento 2.

Let’s dive in!

3 Steps to Disable AJAX Add to Cart

Step 1: Locate the code that needs to be changed

• Open the vendor\magento\module-catalog\view\frontend\templates\product\view\addtocart.phtml file
• Find this code:

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

Step 2: Replace with the following code

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

Step 3: Configure to redirect shoppers from the cart page to the checkout page right after they click on the Add to Cart button

• Navigate to Stores > Settings > Configuration > Sales > Checkout

• Expand the Shopping Cart section
• Choose Yes in the After Adding a Product Redirect to Shopping Cart field

• Then, save your configuration by pressing the Save Config button on the top-right corner.

And that’s it! With just 3 basic steps, you can quickly disable AJAX Add to Cart. Now, whenever your shoppers click on the Add to Cart button on the product page, they will immediately be redirected to the checkout page.