How to Customize Magento 2 Checkout Shipping Address Form?

Magento 2 is a robust platform that offers advanced eCommerce features. It wouldn’t be wrong to say that by selecting Magento as your eCommerce platform, you already gain an edge over your competitors. Despite it, there is one area where merchants often need to make considerable changes, and one such area is the checkout process.

More specifically, merchants need to tweak the shipping address form to ensure that it reflects the store’s unique needs. However, customising the Magento 2 shipping address form is not a straightforward process. As you may very well know, Magento has a steep learning curve.

Thus, making even minor changes can turn out to be a time-consuming and frustrating exercise. It is why most merchants opt for a Magento 2 Custom Checkout Fields Extension. It enables merchants to customise each aspect of the checkout form in a user-friendly and interactive manner.

In this article, we will walk you through how to customize Magento 2 Checkout Shipping Address Form.

Why Customize the Magento 2 Checkout Shipping Address Form?

There are several reasons merchants need to customise the checkout shipping address form, including:

Enhanced Customer Experience

The top reason to customise the shipping address form is to enhance the user experience. By using options such as the Magento 2 add custom validation in checkout shipping address, merchants can ensure that the customers make fewer mistakes. For instance, the customer cannot complete the checkout unless they enter the required information. Without the custom validations, the customer may submit an incomplete form, making it impossible to fulfil the order.

Improved Order Management

Likewise, by using the Magento 2 add new field in shipping address feature, merchants can order custom fields in the Magento 2 Shipping Address Form. The fields are helpful in obtaining specific information that improve order delivery. For instance, merchants can provide a preferred delivery time field to allow customers to select what time they prefer to receive the order. This way, there’s less risk of a failed delivery.

Compliance

In certain cases, businesses are mandated to collected certain information for regulatory purposes. For example, industrial chemical suppliers may need the customer to provide relevant permits.

Common Magento 2 Shipping Address Form Customisations

Magento 2 store owners are likely to make the following customisations:

New Custom Fields

This is the most common customisation. In most cases, merchants want to add a new field to the shipping address form. For instance, they may ask for precise delivery instructions such as preferred day and time. They may want the customer to share any additional information through a ‘More Information’ field that allows for seamless order fulfilment. For seamless Magento 2 add new field in shipping address, store admins need to be well-versed in customising Magento’s core files.

Custom Validations

Suppose you are selling tobacco products. In most countries, the minimum age for tobacco consumption is 18 years. It means you need to ensure that the person ordering the tobacco product is at least 18 years (21 in some countries). This would require you to set up a custom field for ‘Date of Birth’.

If a user does not meet the minimum age criterion, an error message will pop up such as ‘You do not meet the minimum age requirement to complete this purchase’. Setting up Magento 2 add custom validation checkout shipping address requires expert-level coding knowledge.

Custom Attributes

Similarly, merchants may need to add custom attributes to the shipping address, such as apartment number. The next time the customer places an order, the apartment number will be automatically retrieved. Similarly, merchants can add custom attributes for preferred delivery time. To utilise the Magento 2 add custom attribute to shipping address, you will need to create a new attribute in the Magento database.

You may be wondering what’s the difference between custom attributes and custom fields. On a basic level, the custom field applies only to a specific order and the information is not retrieved for future orders. In the case of custom attributes, the information is retrieved for all future orders. This saves the customer considerable time and effort, improving the user experience.

Ways to Customise the Magento 2 Checkout Shipping Address Form

There are two options to customise the form.

One is through custom development work, which involves making changes to Magento’s core files and other areas. This requires substantial coding knowledge. Additionally, the Magento 2 checkout process is quite complex. It uses a combination of Knockout.js and UI components.

Unless you are skilled in Magento 2, making changes to one component of the form can impact the others. Lastly, whenever you update Magento 2 to the latest version, you need to optimise the code to ensure compatibility. It is why most merchants shy away from custom development, preferring to use an extension.

However, if you wish to use custom development, follow the below instructions.

Step 1: Create a Custom Module to make the relevant changes.

Step 2: Override the checkout_index_index.xml layout file to add your own custom fields. Here’s how to do it.

First, create this directory structure:

app/code/[Vendor]/[Module]/view/frontend/layout

Now, inside this directory, create checkout_index_index.xml and add the below script:

<?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>

                                                </item>

                                            </item>

                                        </item>

                                    </item>

                                </item>

                            </item>

                        </item>

                    </item>

                </argument>

            </arguments>

        </referenceBlock>

    </body>

</page>

To add, remove, or edit fields, change the children array of the ShippingAddress section.

Step 3: Add a Custom Field. In this example, the custom field is titled ‘Delivery Instructions’.

    Magento_Ui/js/form/element/textarea
    
        shippingAddress
        ui/form/field
        ui/form/element/textarea
        custom-instructions
    
    shippingAddress.custom_instructions
    Delivery Instructions
    checkoutProvider
    true
    
        false
    
    100

Step 4: This step involves overriding Magento_Checkout/js/view/shipping-address/address-renderer/default. Follow this step only if there are custom JavaScript requirements for the new checkout field.

Step 5: You need to save the data entered in the custom checkout field. For this purpose, set up a plugin for Magento\Quote\Api\Data\AddressExtensionInterface. For this, you need to create plugin in the custom module. It adds field data to the shipping address model. Now, use an afterSave plugin on Magento\Quote\Api\CartRepositoryInterface to save the custom attribute with the quote.

Step 6: Update the database schema. This ensures that your store recognises the new field.

Step 7: Lastly, flush the cache and conduct a test transaction to ensure the module works as intended.

Using an Extension for Customising the Shipping Address Form

Indeed, selecting the right extension can save merchants considerable time and effort. For example, FME’s Magento 2 Custom Checkout Fields Extension allows merchants to add custom fields, validations, and attributes in a user-friendly way. Merchants can select from up to 12 different attributes as shown below.

As you can see, it supports text fields, drop down menus, checkboxes, and more. Similarly, the extension allows merchants to add dependable fields, ensuring data accuracy. For instance, you can set up a minimum phone number length and much more. You can see the below feature in action.

Apart from this, the extension is easy to use. Every feature is manageable from the admin panel, allowing even non-technical users to customise the form without any coding knowledge. Of course, good support is essential for setup. FME’s extension comes with a detailed user guide and live demo option.

Final Thoughts on Magento 2 Customising Checkout Shipping Address Form

This concludes our article on customising Magento 2 checkout shipping address form. Merchants can customise the form either through custom development work or an extension. FME offers both, custom development services and a dedicated Magento 2 Custom Checkout Fields Extension. To know which option is the right one for you, reach out to our support team to schedule a session.