Magento 2 How to remove shipping method in checkout page
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:
Follow this answer if you want to disable the particular shipping method
Follow this answer for use mixin for
checkout-data-resolver.js