6 Easy Steps to Auto Select Shipping Method in Magento 2
Vinh Jacker | 11-11-2024
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 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
Top 10 Shopify ERP Solutions to Improve Operation Efficiency
Discover the top 10 Shopify ERP solutions to streamline your business operations, improve efficiency, and automate inventory management & order fulfillment.
Set Up Subscriptions On Shopify In 3 Minutes
Easily set up subscriptions on Shopify! Follow our guide for adding subscription products, creating policies, and choosing the best apps for your store's needs.
How to Connect Your Shopify Store to ActiveCampaign?
Learn how to connect Shopify to ActiveCampaign and unlock automated marketing strategies. In no time, synchronize consumer data and develop customized email campaigns.
Magento 2 Vue Storefront: Power Up Your Online Business
Unlock your Magento 2 store’s potential with Vue Storefront, a modern PWA solution that enhances performance, flexibility, and customer experience across all devices
Magento Self-Hosted vs Managed Hosting: What’s the Different
Differentiate Magento Self-hosted and Managed Hosting, examine each option’s pros and cons, and find out which is the most suitable choice for your business.
& 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