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

Your Answer

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

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