Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
mageplaza.com

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

Vinh Jacker | 10-01-2024

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

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.

Table of content
    Jacker

    With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.



    Related Post

    Website Support
    & Maintenance Services

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

    Get Started
    mageplaza services