Cookies setting

Cookies help us enhance your experience on our site by storing information about your preferences and interactions. You can customize your cookie settings by choosing which cookies to allow. Please note that disabling certain cookies might impact the functionality and features of our services, such as personalized content and suggestions. Cookie Policy

Cookie Policy
Essential cookies

These cookies are strictly necessary for the site to work and may not be disabled.

Information
Always enabled
Advertising cookies

Advertising cookies deliver ads relevant to your interests, limit ad frequency, and measure ad effectiveness.

Information
Analytics cookies

Analytics cookies collect information and report website usage statistics without personally identifying individual visitors to Google.

Information
mageplaza.com

6 Easy Steps to Auto Select Shipping Method in Magento 2

Vinh Jacker | 10-01-2024

6 Easy Steps to Auto Select Shipping Method in Magento 2 6 Easy Steps to Auto Select Shipping Method in Magento 2

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.


SVG

Shipping Rules for Magento 2

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

Shipping method

Auto-select shipping result

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.

Table of content
    Jacker

    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

    Website Support
    & 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
    mageplaza services