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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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