🔥 Just Launched! Werra Premium Template for HyväSee it in Action

How to Show Custom Popup on click of “Proceed to Checkout” Button From Minicart in Magento 2

By Sanjay JethvaUpdated on Jul 17, 2025 3 min read

The default Magento 2 redirects a customer to the checkout page when the Proceed to Checkout button is clicked as shown below:

Default-Behaviour-.gif

However, depending on the business requirements, one may want to show popup on the mini cart when “Proceed to checkout” button is clicked in Magento 2.

The popup may show a custom sales message or further instructions or any offer related details on the mini cart that may be important for the business or customer to know at that stage of the purchase cycle.

Here, I have shared the programmatic solution to show custom popup on click of “Proceed to Checkout” button from minicart in Magento 2.

Method to Show Custom Popup on click of “Proceed to Checkout” Button From Minicart in Magento 2:

1. Create file requirejs-config.js under app\code\Vendor\Module\view\frontend

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/minicart': {
                'Vendor_Module/js/checkout/view/minicart': true
            }
        }
    }
};

2. Create file minicart.js under app\code\Vendor\Module\view\frontend\web\js\checkout\view

<pre class="lang:default decode:true">define([
    'jquery',
    'Magento_Customer/js/customer-data'
], function ($, customerData) {
    'use strict';
    return function (Component) {
        return Component.extend({
            /**
             * @override
             */
            getCartParam: function (name) {
                var self = this;
                if (name === 'possible_onepage_checkout') {
                    $('#top-cart-btn-checkout').click(function (event) {
                        var customer = customerData.get('customer');
                        if (!customer().firstname) {
                            event.preventDefault();
                            $('.custom-popup').modal('openModal'); /* Here you can put your message or call your popup */
                            return false;
                        }
                    });
                }
                return this._super(name);
            },
        });
    }
});
</pre>

3. Run the below commands:

php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

That’s it.

Once you implement the above solution, the frontend shows the custom popup as shown below:

Custom-popup.gif

Do consider sharing this post with Magento Community via social media.

Thank you.

Sanjay Jethva Full Image
Article bySanjay Jethva

Sanjay is the co-founder and CTO of Meetanshi with hands-on expertise with Magento since 2011. He specializes in complex development, integrations, extensions, and customizations. Sanjay is one the top 50 contributor to the Magento community and is recognized by Adobe. His passion for Magento 2 and Shopify solutions has made him a trusted source for businesses seeking to optimize their online stores. He loves sharing technical solutions related to Magento 2 & Shopify.