How to add new field before shipping methods in checkout page Magento 2?

Checkout Shipping Step page, You can display the input field between shipping address and shipping methods.

Magento 2, To display the Input field before shipping methods, you need to create a checkout_index_index.xml file to set the content of the file.

1) Use the “before-form” section of the shippingAddress children in the shipping step hierarchies. We want to display the shipping text area to add specific comments on the shipping step.


<?xml version="1.0"?>
<page xmlns:xsi="" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                    <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="before-form" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <item name="comments" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Jesadiya_ShippingComment/js/view/shipping/shipping-comment</item>

We have declared component as Jesadiya_ShippingComment/js/view/shipping/shipping-comment in the item tag in the given XML file.

2) Create a file to display comment text area using JS,
Path: app/code/Jesadiya/ShippingComment/view/frontend/web/js/view/shipping/comment.js

], function (ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Jesadiya_ShippingComment/shipping/comment'

3) Create a .html template file to display content,
Path: app/code/Jesadiya/ShippingComment/view/frontend/web/template/shipping/comment.html

<div class="comment-section">
    <div class="step-title">
        <span><!-- ko i18n: 'Delivery Instructions:'--><!-- /ko --></span>
    <form id="special-comments-form" class="form comments" data-role="special-comments-form">
        <fieldset class="fieldset special-comments">
            <div class="field field-special-comments required">
                <label for="comments" class="label">
                    <span class="label"><!-- ko i18n: 'Comments'--><!-- /ko --></span>
                <div class="control">
                    <textarea id="comments"
                              rows="5" cols="10"></textarea>

4) Now run the CLI command,

php bin/magento setup:upgrade
php bin/magento cache:flush
shipping method before form
Shipping step before shipping methods

Check the result, By Adding Items to the cart, go to the checkout page, you can see new text area field will be displayed before the shipping methods.