mageplaza.com
Get 15% off Mageplaza extensions & subscriptions! Use code HIMAY at checkout.

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

Vinh Jacker | 04-23-2024

The Most Popular Extension Builder for Magento 2

With a big catalog of 224+ extensions for your online store

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

Complicated checkout process statistics

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

Navigate to the Checkout section

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

After Adding a Product Redirect to Shopping Cart

  • 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.

Jacker

Hello, I'm the Chief Technology Officer of Mageplaza, and I am thrilled to share my story with you. My deep love and passion for technology have fueled my journey as a professional coder and an ultra-marathon runner. Over the past decade, I have accumulated extensive experience and honed my expertise in PHP development.



Related Post

Website Support & Maintenance Services

mageplaza services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.