Hello @seanleewir2662
Develop a custom layout for the checkout.
Create a custom module, or adjust your theme to modify.
app/design/frontend/[Vendor]/[Theme]/Magento_Checkout/layout/checkout_index_index.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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">
<!-- First Step: Shipping & Billing Addresses -->
<item name="shipping-step-address" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
<item name="sortOrder" xsi:type="string">1</item>
</item>
<!-- Second Step: Shipping Methods -->
<item name="shipping-step-methods" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/shipping-methods</item>
<item name="sortOrder" xsi:type="string">2</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Build a custom JavaScript component to handle shipping methods.
File: app/design/frontend/[Vendor]/[Theme]/web/js/view/shipping-methods.js
define([
'uiComponent',
'Magento_Checkout/js/model/step-navigator',
'Magento_Checkout/js/model/shipping-service',
'Magento_Checkout/js/model/shipping-rate-registry'
], function (Component, stepNavigator, shippingService, rateRegistry) {
'use strict';
return Component.extend({
defaults: {
template: 'Magento_Checkout/shipping-methods'
},
isVisible: ko.observable(false),
initialize: function () {
this._super();
stepNavigator.registerStep(
'shipping-methods',
null,
'Select Shipping Method',
this.isVisible,
_.bind(this.navigate, this),
15
);
return this;
},
navigate: function () {
this.isVisible(true);
shippingService.isLoading(true);
rateRegistry.set('');
},
navigateToNextStep: function () {
stepNavigator.next();
}
});
});
Create a KnockoutJS template for managing shipping methods.
File: app/design/frontend/[Vendor]/[Theme]/Magento_Checkout/templates/shipping-methods.html
<div class="step-content">
<h2 data-bind="i18n: 'Select Shipping Method'"></h2>
<each args="data: getRegion('shipping-method-list'), as: 'shippingMethodList'">
<render args="shippingMethodList"></render>
</each>
<button type="button" data-bind="click: navigateToNextStep, i18n: 'Next'"></button>
</div>Execute the following commands:
php bin/magento s:up
php bin/magento s:d:c
php bin/magento s:s:d -f
php bin/magento c:f
Hope it helps !
If you find our reply helpful, please give us kudos.
A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.
WebDesk Solution Support Team
Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789
