6

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.

6

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

  • Thanks for your reply. Yes i know without shipping it will not process the order but what i have done is i have enabled free shipping and using observer i have freeshipping all the time. i want to remove shipping from checkout or hide and show my custom message. your code hide the shipping or remove it? – jack May 19 '17 at 6:46
  • In step 3 you keep html of shipping method if you want just hide add class to hide shipping method – Prince Patel May 19 '17 at 6:56
  • Hi @Prince Patel, I have followed the same as above but i am unable to get what is exptected. – Learing_Coder May 2 '18 at 13:10
  • I tried this code but it's not working – kiran Sep 27 '18 at 14:00
  • how can i use customer group wise display free shipping if you know please reply me – Rv Singh Nov 13 '18 at 14:35
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.