Magento 2 How to remove shipping method in checkout page

magento.stackexchange https://magento.stackexchange.com/questions/331572

Question

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.

Was it helpful?

Solution

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

OTHER TIPS

As you want to remove shipping method section completely but magento must need to assign one specific shipping method. Please follow following steps to remove shipping method completely and assign automatically specific shipping method (magento 2.3.1)

Override these two files to your theme folder

  1. /vendor/magento/module-checkout/view/frontend/web/template/shipping.html
  2. /vendor/magento/module-checkout/view/frontend/web/js/model/checkout-data-resolver.js

On shipping.html file, remove entire code inside form except actions-toolbar div as it use for Next button. So your shipping.html file will be 

<li id="shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
<div class="step-title" translate="'Shipping Address'" data-role="title" />
<div id="checkout-step-shipping"
     class="step-content"
     data-role="content">

    <each if="!quoteIsVirtual" args="getRegion('customer-email')" render="" />
    <each args="getRegion('address-list')" render="" />
    <each args="getRegion('address-list-additional-addresses')" render="" />

    <!-- Address form pop up -->
    <if args="!isFormInline">
        <button type="button"
                class="action action-show-popup"
                click="showFormPopUp"
                visible="!isNewAddressAdded()">
            <span translate="'New Address'" />
        </button>
        <div id="opc-new-shipping-address"
             visible="isFormPopUpVisible()"
             render="shippingFormTemplate" />
    </if>

    <each args="getRegion('before-form')" render="" />

    <!-- Inline address form -->
    <render if="isFormInline" args="shippingFormTemplate" />
</div>
</li>

<!--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>

then, run s:s:d coomand and check checkout page, shipping method section should be removed.

Now, as magento must require shipping method, we can assign static shipping methods from checkout-data-resolver.js file

On checkout-data-resolver.js file, add following code on resolveShippingRates function

    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;
        }

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

You can also use LayoutProcessor to customize checkout page in Magento2. It simple and no need to override any template and layout files.

Please follow this answer How to disable "Pay with Store Credit" option from checkout page Magento Commerce

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top