Magento2 add estimate shipping button on cart page

Question

Magento2 by default automatically calculates the shipping rates and shows on the frontend if the user enters the data in the cart sidebar.

I need to add a button so once the user enters the details like Country, zip code, and then click on the apply button shipping method should be shown.

Answer 1

I hope this code help you add below html/js file to your theme and apply changes.

1. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/layout/checkout_cart_index.xml

<referenceBlock name="checkout.cart.shipping">
    <arguments>
        <argument name="jsLayout" xsi:type="array">
            <item name="components" xsi:type="array">                        
                <item name="block-summary" xsi:type="array">
                    <item name="children" xsi:type="array">
                        <item name="block-shipping" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="address-fieldsets" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="city" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <item name="country_id" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="visible" xsi:type="boolean">false</item>
                                            </item>
                                        </item>
                                        <item name="region_id" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <!-- The following items override configuration of corresponding address attributes -->
                                        <item name="region" xsi:type="array">
                                            <item name="config" xsi:type="array">
                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                            </item>
                                        </item>
                                        <item name="postcode" xsi:type="array">
                                            <!-- post-code field has custom UI component -->
                                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                            <item name="dataScope" xsi:type="string">shippingAddress.postcode</item>
                                            <item name="sortOrder" xsi:type="string">114</item>
                                            <item name="provider" xsi:type="string">checkoutProvider</item>
                                            <item name="placeholder" xsi:type="string">Test placeholder</item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>

2. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/web/template/cart/shipping-estimation.html

<form method="post" id="shipping-zip-form">
    
    <!-- ko foreach: getRegion('address-fieldsets') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="actions-toolbar">
        <div class="primary">
            <button class="action apply primary" type="button" data-bind="click: showShippingMethods()">
                <span data-bind="text: $t('Get Estimate') "></span>
            </button>
        </div>
    </div>
</form>

3. app/design/frontend/{Vendor)/{theme}/Magento_Checkout/web/js/view/cart/shipping-estimation.js

<!-- Comment field change event for auto estimation -->
initElement: function (element) {
    this._super();

    // uncomment if need estimate on change
    /*if (element.index === 'address-fieldsets') {
        shippingRatesValidator.bindChangeHandlers(element.elems(), true, 500);
        element.elems.subscribe(function (elems) {
            shippingRatesValidator.doElementBinding(elems[elems.length - 1], true, 500);
        });
    }*/

    return this;
},

<!-- Add this new function after getEstimationInfo() -->
showShippingMethods: function () {
     this.getEstimationInfo();
}