Time has become increasingly precious in the fast-paced of e-commerce. Simplifying the checkout process for your clients can significantly enhance their experience. One way to achieve this is by automatically selecting a shipping method when multiple options are available.
In this article, we’ll explore how to configure auto-select shipping methods in Magento 2 via 6 easy steps.
How to Auto Select Shipping Method in Magento 2
To auto-select a shipping method in Magento 2, you can achieve this by customizing the shipping logic using a small amount of custom JavaScript and PHP code. Here’s a step-by-step guide:
Step 1: Create a custom module
First, create a custom module if you don’t already have one. This involves creating the following directory structure:
Step 2: Register the module
Register the module by creating the registration.php file with the appropriate registration code below:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
Step 3: Define module configuration
Define your module configuration in the etc/module.xml file. Create the etc/module.xml file by running this code:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0"/>
</config>
Step 4: Frontend JavaScript
Create a view/frontend/requirejs-config.js file to map your custom JavaScript module.
var config = {
map: {
'*': {
'autoSelectShipping': 'Vendor_Module/js/auto-select-shipping'
}
}
};
Create a ``view/frontend/web/js/auto-select-shipping.js`` file:
define([
'jquery',
'Magento_Checkout/js/model/quote',
'Magento_Checkout/js/model/shipping-service'
], function ($, quote, shippingService) {
'use strict';
return function () {
shippingService.getShippingRates().subscribe(function (rates) {
if (rates.length > 0) {
var firstMethod = rates[0].carrier_code + '_' + rates[0].method_code;
quote.shippingMethod(firstMethod);
}
});
};
});
Step 5: Require the JavaScript on the Checkout Page
Create a view/frontend/layout/checkout_index_index.xml file
<?xml version="1.0"?>
<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">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-method" xsi:type="array">
<item name="children" xsi:type="array">
<item name="before-shipping-method-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="auto-select-shipping" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/auto-select-shipping</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 6: Enable and deploy the module
You need to run the following commands to enable the module and deploy the static content.
bin/magento module:enable Vendor_Module
bin/magento setup:upgrade
bin/magento setup:static-content:deploy -f
That’s all steps to auto-select the shipping method in Magento 2. This is the result which is shown in the frontend
This setup ensures that the first available shipping method is automatically selected when the shipping rates are loaded on the checkout page.
Conclusion
We hope that with 6 straightforward and easy-to-follow steps, you will be able to auto-select shipping methods in Magento 2 easily. By implementing auto-select shipping methods in Magento 2, you enhance user convenience and reduce friction during checkout.
Remember to test thoroughly after making any modifications to ensure a seamless experience for your customers. If you have any problems while following this tutorial, feel free to let us know.
