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.
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:
Follow this answer if you want to disable the particular shipping method
Follow this answer for use mixin for
checkout-data-resolver.js
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
- /vendor/magento/module-checkout/view/frontend/web/template/shipping.html
- /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
