Magento 2 – How to Remove Shipping Method in Checkout Page

checkoutmagento-2.1magento2shippingshipping-methods

I want to remove shipping method from the cart page and checkout page.

I am trying to remove the shipping method from checkout page but seems it's loading from the Knockout.js file.

How can i remove the shipping method from the checkout page or hide it and show my custom message "For shipping Call ME" instead of shipping method.
Also, my store is multi language so message should display in multi language.

Best Answer

Follow below steps:

Vendor: Vendor

ModuleName: CheckoutStep

1) Override checkout_index_index.xml in your module and define your own component in shipping step

app/code/Vendor/CheckoutStep/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="component" xsi:type="string">Vendor_CheckoutStep/js/view/custom-shipping</item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2) Create custom-shipping.js app/code/Vendor/CheckoutStep/view/frontend/js/view/custom-shipping.js and define your own shipping template

define(
    [
        'jquery',
        'ko',
        'Magento_Checkout/js/view/shipping'
    ],
    function(
        $,
        ko,
        Component
    ) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_CheckoutStep/shipping'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);

3) Copy shipping.html

From

vendor/magento/module-checkout/view/frontend/web/template/shipping.html

To

app/code/Vendor/CheckoutStep/view/frontend/web/template/shipping.html

Remove html code inside form(id="co-shipping-method-form") except actions-toolbar as it use for continue button. So your shipping.html file will be

<!--Shipping method template-->
<li id="opc-shipping_method"
    class="checkout-shipping-method"
    data-bind="fadeVisible: visible(), blockLoader: isLoading"
    role="presentation">
    <div class="checkout-shipping-method">
        <div id="checkout-step-shipping_method"
             class="step-content"
             data-role="content"
             role="tabpanel"
             aria-hidden="false">
            <form id="co-shipping-method-form"
                  class="form methods-shipping"
                  if="rates().length"
                  submit="setShippingInformation"
                  novalidate="novalidate">

                <div class="actions-toolbar" id="shipping-method-buttons-container">
                    <div class="primary">
                        <button data-role="opc-continue" type="submit" class="button action continue primary">
                            <span translate="'Next'" />
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</li>

4) Shipping method block removed from the checkout step with the above 3 steps. Now, We must need to assign one specific shipping method because Magento must need to assign one specific shipping method.

Now use mixin for 'Magento_Checkout/js/model/checkout-data-resolver.js' to override resolveShippingRates function.

Assign shipping method by passing ratesData[0] in selectShippingMethodAction()

So overridden resolveShippingRates function should look like this:

resolveShippingRates: function (ratesData) {
    var selectedShippingRate = checkoutData.getSelectedShippingRate(),
        availableRate = false;

    if (ratesData.length === 1) {
        //set shipping rate if we have only one available shipping rate
        selectShippingMethodAction(ratesData[0]);

        return;
    }

    if (ratesData.length > 1) {
        selectShippingMethodAction(ratesData[0]);
        
        return;
    }
    
    //Existing code
},

we can auto assign shipping method like ratesData[0], ratesData[1],ratesData[2] as per our requirement

Notes:

  1. Follow this answer if you want to disable the particular shipping method

  2. Follow this answer for use mixin for checkout-data-resolver.js

Related Topic