How to change field order in checkout and change label names

Question

I need to change magento 2 checkout field order and rename existing input field labels in default shipping address form.

How can I change field order in checkout page? I've tried from editing checkout_index_index.xml but have no luck. I need to change order fields like Name company, Street address, City. Have no luck with checkout_index_index.xml and also I couldn't find some fields like zip code, city fields in xml file. Is there any way for me to change the order and rename fields? my checkout_index_index.xml file is pasted below. Can someone help me?

xml file here

Update

I've renamed the corresponding labels using inline translation. (uing csv files per locale). I've put en_US.csv and en_GB.csv files with following content and following locations.

Locations

app/design/<custom_vendor_name>/<custom_theme-Name>/Magento_Checkout/i18n/en_US.csv
app/design/<custom_vendor_name>/<custom_theme-Name>/Magento_Theme//i18n/en_US.csv
app/design/<custom_vendor_name>/<custom_theme-Name>/i18n/en_US.csv

Content

State/Province,County
"Zip/Postal Code","Post Code"
"State/Province","County"
Zip/Postal Code,Post Code

• Abdul: you need to change "Shipping Address" form right?
• Joey: @Abdul yes, that's the one

Answer 1

You can add sortOrder item in your checkout_index_index.xml file like below.

<item name="postcode" xsi:type="array">
 <!-- post-code field has custom UI component -->
 <item name="component" xsi:type="string">Magento_Ui/js/form/element/post-code</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 <item name="sortOrder" xsi:type="string">1</item> <!-- YOUR ORDER FOR FIELD -->
</item>
<item name="company" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="min_text_length" xsi:type="number">0</item>
 </item>
 <item name="sortOrder" xsi:type="string">2</item> <!-- YOUR ORDER FOR FIELD -->
</item>
<item name="fax" xsi:type="array">
 <item name="validation" xsi:type="array">
 <item name="min_text_length" xsi:type="number">0</item>
 </item>
 <item name="sortOrder" xsi:type="string">3</item> <!-- YOUR ORDER FOR FIELD -->
</item>
<item name="country_id" xsi:type="array">
 <item name="sortOrder" xsi:type="string">4</item> <!-- YOUR ORDER FOR FIELD -->
</item>
<item name="telephone" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="tooltip" xsi:type="array">
 <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
 </item>
 </item>
 <item name="sortOrder" xsi:type="string">5</item> <!-- YOUR ORDER FOR FIELD -->
</item>

inside your shipping component.

<item name="shippingAddress" xsi:type="array">

• Abdul: how to change field label? I have tried <item name="telephone" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Phone Number</item> </item> <item name="sortOrder" xsi:type="string">15</item> </item> But it is not working
• Jaimin Sutariya: let me check if its possible with xml..
• Joey: @Abdul to change labels, check my update. I've done using that method
• Abdul: is it possible to xml file? where is your code for that method?