2

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
2
  • you need to change "Shipping Address" form right?
    – Abdul
    Commented Nov 16, 2017 at 12:37
  • @Abdul yes, that's the one
    – Joey
    Commented Nov 16, 2017 at 13:05

1 Answer 1

2

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">
4
  • 1
    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
    – Abdul
    Commented Nov 16, 2017 at 13:49
  • let me check if its possible with xml.. Commented Nov 16, 2017 at 13:58
  • @Abdul to change labels, check my update. I've done using that method
    – Joey
    Commented Nov 16, 2017 at 18:34
  • is it possible to xml file? where is your code for that method?
    – Abdul
    Commented Nov 17, 2017 at 4:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.