Magento 2.4.2 - Addtocart Button Disabled

Question

Is anyone using Magento 2.4.2 version?.

In list page,list.phtml file Add to Cart button is disabled.

How we can enable the Add to Cart button. Kindly confirm.

Thanks.

Answer 1

In Magento 2.4.2 "Add to Cart" button is disabled in template and is being enabled using js post initialization

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

in _create function

_create: function () {
    if (this.options.bindSubmit) {
        this._bindSubmit();
    }
    $(this.options.addToCartButtonSelector).attr('disabled', false);
}

You need to debug if it is overridden in custom theme or in any third party plugin you are using, because it works as expected on fresh Magento 2.4.2 installation. This change is added in Magento 2.4.2, it wasn't there in Magento 2.4.1.

Answer 2

Go to this file path

vendor/magento/module-catalog/view/frontend/templates/product/list.phtml

Click ctrl+F and search for action tocart primary

<button type="submit" title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"class="action tocart primary">
<span><?= $escaper->escapeHtml(__('Add to Cart')) ?>
</span></button>

Just replace button tag with this code and run (As you mentioned in comments disabled is there just remove or replace the button tag with above code)

For ubuntu

sudo rm -rf generated/* var/* && sudo bin/magento cache:flush

For windows

rm -rf generated/* var/* && php bin/magento cache:flush

Answer 3

It appears there was an issue with invalid form key errors when add to cart was clicked before the page was fully loaded.

The change ensures that the add to cart button is enabled only when the page is fully loaded and catalog-add-to-cart.js has been processed.

The commit from August 2020 can be seen here https://github.com/magento/magento2/commit/95859dc036a6076423f30409f224a6b5d6f5ac84

This change will cause problems if you are extending catalog-add-to-cart.js in your custom theme or modules. You should update your custom/extended js to activate the add to cart button.

$(this.options.addToCartButtonSelector).attr('disabled', false);

Answer 4

Just upgraded from 2.4.1 to 2.4.2, got the same problem. The "add to cart" is grey in the product listing page. I have a very simple theme installed, no 3rd party addons. Even if changed back to original Luma theme, still same problem.

Answer 5

This bug was introduce in Magento 2.4.2.

To make it work, you can change the After Adding a Product Redirect to Shopping Cart to No

More info:

• Issue #32232 - Add to Cart broken on lists view with redirect to cart enabled · magento/magento2 · GitHub
• Add to Cart broken on lists view with redirect to cart enabled. by engcom-Kilo · Pull Request #32301 · magento/magento2 · GitHub

If you need to keep After Adding a Product Redirect to Shopping Cart to Yes, you can apply this patch:

• 32301.patch · magento/magento2 · GitHub