{"id":160,"date":"2022-05-10T18:41:39","date_gmt":"2022-05-10T13:11:39","guid":{"rendered":"https:\/\/magecurious.com\/blog\/?p=160"},"modified":"2024-11-18T13:33:38","modified_gmt":"2024-11-18T08:03:38","slug":"magento-2-how-to-add-custom-field-to-shipping-address-section-on-the-checkout-page","status":"publish","type":"post","link":"https:\/\/magecurious.com\/blog\/magento-2-how-to-add-custom-field-to-shipping-address-section-on-the-checkout-page\/","title":{"rendered":"Magento 2 How to Add Custom Field to Shipping Address Section on The Checkout page"},"content":{"rendered":"\n

Hello Guys! \ud83d\udc4b <\/p>\n\n\n\n

In this blog, we learn how to add a custom field to the shipping address section on the checkout page.<\/p>\n\n\n\n

Sometimes store owners need to add a custom field to get additional data from customer from checkout shipping address, so this blog is helpful.<\/p>\n\n\n\n

Please follow the below step to add this functionality.<\/p>\n\n\n\n

STEP 1: Add di.xml<\/strong> in following path<\/code><\/pre>\n\n\n\n
app\\code\\Vendor\\Extension\\etc\\frontend\n<\/code><\/pre>\n\n\n
\n<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n    <type name="Magento\\Checkout\\Block\\Checkout\\LayoutProcessor">\n        <plugin name="add_custom_field_checkout" type="Vendor\\Extension\\Plugin\\Checkout\\LayoutProcessor" sortOrder="100"\/>\n    <\/type>\n<\/config>\n\n<\/pre><\/div>\n\n\n
STEP 2: Add LayoutProcessor.php<\/strong> in following path<\/code><\/pre>\n\n\n\n
app\\code\\Vendor\\Extension\\Plugin\\Checkout<\/code><\/pre>\n\n\n
\n<?php\n\nnamespace Vendor\\Extension\\Plugin\\Checkout;\n\nclass LayoutProcessor\n{\n    public function afterProcess(\n        \\Magento\\Checkout\\Block\\Checkout\\LayoutProcessor $subject,\n        array  $jsLayout\n    ) {\n\n        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']\n        ['shippingAddress']['children']['shipping-address-fieldset']['children']['gst_number_field'] = [\n            'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n            'config' => [\n                'customScope' => 'shippingAddress.custom_attributes',\n                'template' => 'ui\/form\/field',\n                'elementTmpl' => 'ui\/form\/element\/input',\n                'options' => [],\n                'id' => 'gst-number-field'\n            ],\n            'dataScope' => 'shippingAddress.custom_attributes.gst_number_field',\n            'label' => 'GST Number',\n            'provider' => 'checkoutProvider',\n            'visible' => true,\n            'validation' => [],\n            'sortOrder' => 250,\n            'id' => 'gst-number-field'\n        ];\n        return $jsLayout;\n    }\n}\n\n<\/pre><\/div>\n\n\n
<\/div>\n\n\n\n
Hope! It will help you<\/p>\n\n\n\n
Thank you \ud83d\ude0a<\/p>\n\n\n\n
<\/div>\n\n\n
      
          
        How useful was this post?      <\/p>              
        Click on a star to rate it!      <\/p>        
      
                      
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>                  
  •               <\/i>          <\/li>              <\/ul>    <\/div>    
    <\/p>