Currently, the only states of the ATC button (used in PDP, but also in the product grid) are active/disabled/hover/clicked. But none of them indicate if this product has already been added to the cart or not. This can lead to accidental "Add to Cart" (followe by "Remove from Cart") events and lead to a confusing shopper journey and possibly increased churn - in particular on stores with a large inventory and average baskets with many items.
In contrast, Walmart created an ATC that is aware of the level of this variant currently in the cart, and allows the shopper to check (to an extent) the products already added to the cart without actually having to look into the cart. This also allows increasing the number of times this product in the cart, or removing the product from cart without having to go into the cart.
I'm aware of at least one Premium Shopify theme that supports this more complex ATC button: Canopy by CleanCanvas (only drawback is that it reacts rather slow)
Describe the enhancement you'd like
Currently, the only states of the ATC button (used in PDP, but also in the product grid) are active/disabled/hover/clicked. But none of them indicate if this product has already been added to the cart or not. This can lead to accidental "Add to Cart" (followe by "Remove from Cart") events and lead to a confusing shopper journey and possibly increased churn - in particular on stores with a large inventory and average baskets with many items.
In contrast, Walmart created an ATC that is aware of the level of this variant currently in the cart, and allows the shopper to check (to an extent) the products already added to the cart without actually having to look into the cart. This also allows increasing the number of times this product in the cart, or removing the product from cart without having to go into the cart.
Additional context/screenshots
Walmart: Empty cart
Walmart: This product is already in the cart