Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
How can I sort the form fields in the customer address book? For example: I need the zip code above the city.
I have already sorted the form fields in the checkout_index_index.xml for the checkout as in this post. That works great.
Does anyone have an idea?
You can try the below custom module and modify it according to your requirement.
app/code/Anshu/CustomerAddress/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Anshu_CustomerAddress',
__DIR__
);
app/code/Anshu/CustomerAddress/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Anshu_CustomerAddress" setup_version="1.0.0">
<sequence>
<module name="Magento_Customer"/>
</sequence>
</module>
</config>
app/code/Anshu/CustomerAddress/view/frontend/layout/customer_address_form.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="customer_address_edit" template="Anshu_CustomerAddress::address/edit.phtml" />
</body>
</page>
app/code/Anshu/CustomerAddress/view/frontend/templates/address/edit.phtml
<?php
/** @var \Magento\Customer\Block\Address\Edit $block */
/** @var \Magento\Customer\ViewModel\Address $viewModel */
/** @var \Magento\Framework\Escaper $escaper */
/** @var \Magento\Framework\View\Helper\SecureHtmlRenderer $secureRenderer */
$viewModel = $block->getViewModel();
?>
<?php $_company = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Company::class) ?>
<?php $_telephone = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Telephone::class) ?>
<?php $_fax = $block->getLayout()->createBlock(\Magento\Customer\Block\Widget\Fax::class) ?>
<?php $_country_id = $block->getAttributeData()->getFrontendLabel('country_id'); ?>
<?php $_street = $block->getAttributeData()->getFrontendLabel('street'); ?>
<?php $_city = $block->getAttributeData()->getFrontendLabel('city'); ?>
<?php $_region = $block->getAttributeData()->getFrontendLabel('region'); ?>
<?php $_selectRegion = 'Please select a region, state or province.'; ?>
<?php $_displayAll = $block->getConfig('general/region/display_all'); ?>
<?php $_vatidValidationClass = $viewModel->addressGetAttributeValidationClass('vat_id'); ?>
<?php $_cityValidationClass = $viewModel->addressGetAttributeValidationClass('city'); ?>
<?php $_postcodeValidationClass_value = $viewModel->addressGetAttributeValidationClass('postcode'); ?>
<?php $_postcodeValidationClass = $_postcodeValidationClass_value; ?>
<?php $_streetValidationClass = $viewModel->addressGetAttributeValidationClass('street'); ?>
<?php $_streetValidationClassNotRequired = trim(str_replace('required-entry', '', $_streetValidationClass)); ?>
<?php $_regionValidationClass = $viewModel->addressGetAttributeValidationClass('region'); ?>
<form class="form-address-edit"
action="<?= $escaper->escapeUrl($block->getSaveUrl()) ?>"
method="post"
id="form-validate"
enctype="multipart/form-data"
data-hasrequired="<?= $escaper->escapeHtmlAttr(__('* Required Fields')) ?>">
<fieldset class="fieldset">
<legend class="legend"><span><?= $escaper->escapeHtml(__('Contact Information')) ?></span></legend><br>
<?= $block->getBlockHtml('formkey') ?>
<input type="hidden" name="success_url" value="<?= $escaper->escapeUrl($block->getSuccessUrl()) ?>">
<input type="hidden" name="error_url" value="<?= $escaper->escapeUrl($block->getErrorUrl()) ?>">
<?= $block->getNameBlockHtml() ?>
<?php if ($_company->isEnabled()): ?>
<?= $_company->setCompany($block->getAddress()->getCompany())->toHtml() ?>
<?php endif ?>
<?php if ($_telephone->isEnabled()): ?>
<?= $_telephone->setTelephone($block->getAddress()->getTelephone())->toHtml() ?>
<?php endif ?>
<?php if ($_fax->isEnabled()): ?>
<?= $_fax->setFax($block->getAddress()->getFax())->toHtml() ?>
<?php endif ?>
</fieldset>
<fieldset class="fieldset">
<legend class="legend"><span><?= $escaper->escapeHtml(__('Address')) ?></span></legend><br>
<div class="field street required">
<label for="street_1" class="label"><span><?= /* @noEscape */ $_street ?></span></label>
<div class="control">
<div class="field primary">
<label for="street_1" class="label">
<span>
<?= $escaper->escapeHtml(__('Street Address: Line %1', 1)) ?>
</span>
</label>
</div>
<input type="text"
name="street[]"
value="<?= $escaper->escapeHtmlAttr($block->getStreetLine(1)) ?>"
title="<?= /* @noEscape */ $_street ?>"
id="street_1"
class="input-text <?= $escaper->escapeHtmlAttr($_streetValidationClass) ?>"/>
<div class="nested">
<?php for ($_i = 1, $_n = $viewModel->addressGetStreetLines(); $_i < $_n; $_i++): ?>
<div class="field additional">
<label class="label" for="street_<?= /* @noEscape */ $_i + 1 ?>">
<span><?= $escaper->escapeHtml(__('Street Address: Line %1', $_i + 1)) ?></span>
</label>
<div class="control">
<input type="text" name="street[]"
value="<?= $escaper->escapeHtmlAttr($block->getStreetLine($_i + 1)) ?>"
title="<?= $escaper->escapeHtmlAttr(__('Street Address %1', $_i + 1)) ?>"
id="street_<?= /* @noEscape */ $_i + 1 ?>"
class="input-text
<?= $escaper->escapeHtmlAttr($_streetValidationClassNotRequired) ?>">
</div>
</div>
<?php endfor; ?>
</div>
</div>
</div>
<?php if ($viewModel->addressIsVatAttributeVisible()): ?>
<div class="field taxvat">
<label class="label" for="vat_id">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('vat_id') ?></span>
</label>
<div class="control">
<input type="text"
name="vat_id"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getVatId()) ?>"
title="<?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('vat_id') ?>"
class="input-text <?= $escaper->escapeHtmlAttr($_vatidValidationClass) ?>"
id="vat_id">
</div>
</div>
<?php endif; ?>
<div class="field country required">
<label class="label" for="country">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('country_id') ?></span>
</label>
<div class="control">
<?= $block->getCountryHtmlSelect() ?>
</div>
</div>
<div class="field region required">
<label class="label" for="region_id">
<span><?= /* @noEscape */ $_region ?></span>
</label>
<div class="control">
<select id="region_id" name="region_id"
title="<?= /* @noEscape */ $_region ?>"
class="validate-select region_id"
<?= /* @noEscape */ !$_displayAll ? ' disabled="disabled"' : '' ?>>
<option value=""><?= $escaper->escapeHtml(__($_selectRegion)) ?></option>
</select>
<input type="text"
id="region"
name="region"
value="<?= $escaper->escapeHtmlAttr($block->getRegion()) ?>"
title="<?= /* @noEscape */ $_region ?>"
class="input-text validate-not-number-first
<?= $escaper->escapeHtmlAttr($_regionValidationClass) ?>"
<?= !$_displayAll ? ' disabled="disabled"' : '' ?>/>
</div>
</div>
<div class="field zip required">
<label class="label" for="zip">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('postcode') ?></span>
</label>
<div class="control">
<input type="text"
name="postcode"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getPostcode()) ?>"
title="<?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('postcode') ?>"
id="zip"
class="input-text validate-zip-international
<?= $escaper->escapeHtmlAttr($_postcodeValidationClass) ?>">
<div role="alert" class="message warning">
<span></span>
</div>
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag("display: none;", 'div.message.warning') ?>
</div>
</div>
<div class="field city required">
<label class="label" for="city">
<span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('city') ?></span>
</label>
<div class="control">
<input type="text"
name="city"
value="<?= $escaper->escapeHtmlAttr($block->getAddress()->getCity()) ?>"
title="<?= $escaper->escapeHtmlAttr(__('City')) ?>"
class="input-text <?= $escaper->escapeHtmlAttr($_cityValidationClass) ?>"
id="city">
</div>
</div>
<?php if ($block->isDefaultBilling()): ?>
<div class="message info">
<span><?= $escaper->escapeHtml(__("It's a default billing address.")) ?></span>
</div>
<?php elseif ($block->canSetAsDefaultBilling()): ?>
<div class="field choice set billing">
<input type="checkbox" id="primary_billing" name="default_billing" value="1" class="checkbox">
<label class="label" for="primary_billing">
<span><?= $escaper->escapeHtml(__('Use as my default billing address')) ?></span>
</label>
</div>
<?php else: ?>
<input type="hidden" name="default_billing" value="1" />
<?php endif; ?>
<?php if ($block->isDefaultShipping()): ?>
<div class="message info">
<span><?= $escaper->escapeHtml(__("It's a default shipping address.")) ?></span>
</div>
<?php elseif ($block->canSetAsDefaultShipping()): ?>
<div class="field choice set shipping">
<input type="checkbox" id="primary_shipping" name="default_shipping" value="1" class="checkbox">
<label class="label" for="primary_shipping">
<span><?= $escaper->escapeHtml(__('Use as my default shipping address')) ?></span>
</label>
</div>
<?php else: ?>
<input type="hidden" name="default_shipping" value="1">
<?php endif; ?>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button type="submit"
class="action save primary"
data-action="save-address"
title="<?= $escaper->escapeHtmlAttr(__('Save Address')) ?>">
<span><?= $escaper->escapeHtml(__('Save Address')) ?></span>
</button>
</div>
<div class="secondary">
<a class="action back" href="<?= $escaper->escapeUrl($block->getBackUrl()) ?>">
<span><?= $escaper->escapeHtml(__('Go back')) ?></span>
</a>
</div>
</div>
</form>
<script type="text/x-magento-init">
{
"#form-validate": {
"addressValidation": {
"postCodes": <?= /* @noEscape */ $block->getPostCodeConfig()->getSerializedPostCodes() ?>
}
},
"#country": {
"regionUpdater": {
"optionalRegionAllowed": <?= /* @noEscape */ $_displayAll ? 'true' : 'false' ?>,
"regionListId": "#region_id",
"regionInputId": "#region",
"postcodeId": "#zip",
"form": "#form-validate",
"regionJson": <?= /* @noEscape */ $viewModel->dataGetRegionJson() ?>,
"defaultRegion": "<?= (int) $block->getRegionId() ?>",
"countriesWithOptionalZip": <?= /* @noEscape */ $viewModel->dataGetCountriesWithOptionalZip(true) ?>
}
}
}
</script>
Here, In my custom module Anshu_CustomerAddress, I have created the layout file and overridden the phtml file to make the desired changes.
You can override the vendor/magento/module-customer/view/frontend/templates/address/edit.phtml as follow,
app/code/Vendor/Module/registration.xml
<?php
use Magento\Framework\Component\ComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Vendor_Module', __DIR__);
app/code/Vendor/Module/etc/module.xml
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0">
<sequence>
<module name="Magento_Customer"/>
</sequence>
</module>
</config>
app/code/Vendor/Module/view/frontend/layout/customer_address_form.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="customer_address_edit" >
<action method="setTemplate">
<argument name="template" xsi:type="string">
Vendor_Module::address/edit.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
app/code/Vendor/Module/view/frontend/templates/address/edit.phtml
copy the content of vendor/magento/module-customer/view/frontend/templates/address/edit.phtml and change the div block order.
after end of <div class="field zip required"> then placed to the
<div class="field city required">
<label class="label" for="city"><span><?php echo $block->escapeHtml(__('City')) ?></span></label>
<div class="control">
<input type="text" name="city" value="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($block->getAddress()->getCity()) ?>" title="<?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr(__('City')) ?>" class="input-text <?php echo $this->helper(\Magento\Framework\EscapeHelper::class)->escapeHtmlAttr($this->helper(\Magento\Customer\Helper\Address::class)->getAttributeValidationClass('city')) ?>" id="city">
</div>
</div>
then after,
php bin/magento setup:di:compile
php bin/magento setup:upgrade
php bin/magento cache:flush
Hope this answer helpful for you !!
If you are using a custom theme, you can simply copy:
vendor/magento/module-customer/view/frontend/templates/address/edit.phtml
to:
app/design/frontend/[NameSpace]/[ThemeName]/Magento_Customer/templates/address/edit.phtml
and edit as needed.
