How to Disable Ajax Add to Cart on Product Page in Magento 2
Vinh Jacker | 3 days ago
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.
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 theAfter 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.