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.


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

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

4) Now run the CLI command,

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.