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
Is there a way to reorder/sort magento 2 checkout form fields from admin. In admin I just find to display/hide fields for checkout form.
I want to sort like ( Move firstname to bottom or move any other field to another place )
So is there any option to sort the checkout form fields in magento admin or I have to go with coding.
Magento 2 didn't provide the checkout reorder/sort checkout fileds at admin side, you can reorder/sort checkout fields using code.
Try the below solution,
First way:
Override the checkout_index_index.xml file in your custom module or theme, and add the below code.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="component" xsi:type="string">MilkJarCookies_OrderDeliveryDate/js/view/shipping</item>
<item name="children" xsi:type="array">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="lastname" xsi:type="array">
<item name="sortOrder" xsi:type="string">20</item>
</item>
<item name="firstname" xsi:type="array">
<item name="sortOrder" xsi:type="string">21</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
You can set the sortOrder as per your requirement for particular fileds.
Second Way:
create a plugin for the function process() of the class LayoutProcessor, which is responsible of bringing the fields in checkout.
declare your plugin in di.xml file
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor">
<plugin name="custom_checkout_address_fields_order" type="Vendor\Module\Plugin\Checkout\Block\LayoutProcessor" />
</type>
</config>
And the afterProcess() function
<?php
namespace Vendor\Module\Plugin\Checkout\Block;
class LayoutProcessor {
/**
* Position the telephone field after address fields
*
* @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject
* @param array $jsLayout
*
* @return array
*/
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
//Shipping Address
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']
['children']['shippingAddress']['children']['shipping-address-fieldset']
['children']['firstname']['sortOrder'] = 100;
//Billing Address on payment method
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children']
)) {
$paymentList = $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'];
foreach ($paymentList as $key => $payment) {
/* firstname */
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['payments-list']['children'][$key]['children']['form-fields']['children']
['firstname']['sortOrder'] = 100;
}
}
//Billing Address on payment page
if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']
)) {
/* firstname */
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['firstname']['sortOrder'] = 100;
}
return $jsLayout;
}
}
