{"id":1631,"date":"2021-03-08T23:34:30","date_gmt":"2021-03-08T23:34:30","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/show-popup-after-add-to-cart-action-in-magento-2\/"},"modified":"2025-07-17T09:39:55","modified_gmt":"2025-07-17T04:09:55","slug":"show-popup-after-add-to-cart-action-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/show-popup-after-add-to-cart-action-in-magento-2\/","title":{"rendered":"How to Show Popup After “Add to cart” Action in Magento 2"},"content":{"rendered":"\n

A good customer experience impacts brand loyalty and customer retention. A merchant can make the customers\u2019 purchase process easier and enhance the on-site experience.<\/p>\n\n\n\n

A good customer experience is always more persuasive than any good advertisement.<\/p>\n\n\n\n

Hence, I have come up with one such solution to show popup after \u201cadd to cart\u201d action in Magento 2 that will make it easy for the customers to proceed to checkout and speed up the conversion process.<\/p>\n\n\n\n

In the default\u00a0Magento 2\u00a0store, the customer only gets a small notice that says \u201cYou added Product to your shopping cart.\u201d at the top or bottom of the page when he\/she clicks on the add to cart button.<\/p>\n\n\n\n

Instead of that, offer your customers an immediate visual verification without having to scroll up or down by showing a popup when they add a product to the cart.<\/p>\n\n\n\n

An added benefit is that the popup enhances your store\u2019s design and layout!<\/p>\n\n\n\n

Hence, show popup on \u201cadd to cart\u201d action in your store using the method shown here:<\/p>\n\n\n\n

Method to Show Popup After \u201cAdd to cart\u201d Action in Magento 2<\/h2>\n\n\n\n

1. Copy catalog-add-to-cart.js<\/strong> to your theme from
vendor\/magento\/module-catalog\/view\/frontend\/web\/js\/catalog-add-to-cart.js <\/strong>to app\/design\/frontend\/Theme\/ThemeName\/Magento_Catalog\/web\/js\/catalog-add-to-cart.js
<\/strong>or override catalog-add-to-cart.js <\/strong>to your custom module.<\/p>\n\n\n\n

2. Create requirejs-config.js<\/strong> file in app\\code\\Vendor\\Module\\view\\frontend<\/strong><\/strong> and use the below code.<\/p>\n\n\n\n

var config =\n    {\n        map:\n        {\n           '*':\n               {\n                'Magento_Catalog\/js\/catalog-add-to-cart': 'Vendor_Module\/js\/catalog-add-to-cart'\n               }\n        }\n    };<\/pre>\n\n\n\n
3. Find ajaxSubmit:<\/strong> function and add below code after self.enableAddToCartButton(form);<\/strong><\/strong><\/p>\n\n\n\n
\/\/popup modal code\nvar popup = $('<div class=\"add-to-cart-modal-popup\"\/>').html($('.page-title span').text() + '<span> has been added to cart.<\/span>').modal({\n    modalClass: 'add-to-cart-popup',\n    title: $.mage.__(\"Popup Title\"),\n    buttons: [\n        {\n            text: 'Continue Shopping',\n            click: function () {\n                this.closeModal();\n            }\n        },\n        {\n            text: 'Proceed to Checkout',\n            click: function () {\n                window.location = window.checkout.checkoutUrl\n            }\n        }\n    ]\n});\npopup.modal('openModal');<\/pre>\n\n\n\n
Pass a popup title as per your requirement.
The popup with \u201cContinue Shopping\u201d and \u201cProceed to Checkout\u201d button will display like the below image:<\/p>\n\n\n
\n
\"Blog<\/figure>\n<\/div>\n\n\n
 Offer your customers a clear overview of the products they have added to the cart by using this method!<\/p>\n\n\n\n
That\u2019s all!<\/p>\n\n\n\n
Feel free to share the solution with Magento Community via social media.<\/p>\n\n\n\n
Thank You<\/p>\n","protected":false},"excerpt":{"rendered":"
A good customer experience impacts brand loyalty and customer retention. A merchant can make the customers\u2019 purchase process easier and enhance the on-site experience. A…<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1631","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1631"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1631\/revisions"}],"predecessor-version":[{"id":18183,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1631\/revisions\/18183"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}