6 Easy Steps to Auto Select Shipping Method in Magento 2
Vinh Jacker | 08-28-2024
The Most Popular Extension Builder for Magento 2
With a big catalog of 224+ extensions for your online store
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.
Configure shipping methods, rates, timeframe, & visibility based on weights, values, destination, SKU, and others
Check it out!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:
app/code/Vendor/Module/
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.
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Related Post
Top 10 Best Warehouse Management System for Shopify Stores
Explore how a WMS can enhance your Shopify store efficiency and customer satisfaction. This guide covers the top 10 WMS and how to choose the best for your business.
Understanding Shopify EDI Integration & How It Works
Optimize Shopify store with EDI integration. Learn how to streamline order processing, inventory management, and supplier communication for increased efficiency.
How To Integrate Shopify With Sage? Full Guide [2024]
Find out one of the best Shopify Sage Integration guides. Follow our easy steps and effective tips to integrate Shopify into Sage using a Shopify store app now!
MailerLite Shopify Integration: Improve Your Email Marketing
Integrate MailerLite with Shopify to streamline your marketing & boost performance. Get a setup guide & explore key features to enhance sales with this integration.
WordPress Website Maintenance: A Simple Guide for Non-Techies
Discover essential WordPress website maintenance steps to keep your site secure, fast, and efficient. Learn how to update, optimize, and protect your site effectively.
Top 10 Best Warehouse Management System for Shopify Stores
Explore how a WMS can enhance your Shopify store efficiency and customer satisfaction. This guide covers the top 10 WMS and how to choose the best for your business.
Understanding Shopify EDI Integration & How It Works
Optimize Shopify store with EDI integration. Learn how to streamline order processing, inventory management, and supplier communication for increased efficiency.
How To Integrate Shopify With Sage? Full Guide [2024]
Find out one of the best Shopify Sage Integration guides. Follow our easy steps and effective tips to integrate Shopify into Sage using a Shopify store app now!
MailerLite Shopify Integration: Improve Your Email Marketing
Integrate MailerLite with Shopify to streamline your marketing & boost performance. Get a setup guide & explore key features to enhance sales with this integration.
WordPress Website Maintenance: A Simple Guide for Non-Techies
Discover essential WordPress website maintenance steps to keep your site secure, fast, and efficient. Learn how to update, optimize, and protect your site effectively.
& Maintenance Services
Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.
Get Started