0

Any Magento Expert Developer Can Help Me In Modify Magento Checkout Page. I Want To Change Checkout Form Default To Like That Showing In Picture.enter image description here

Here's The Code Of checkout_index_index.xml

public_html/vendor/magento/module-checkout/view/frontend/layout

        <referenceContainer name="content">
            <block class="Magento\Checkout\Block\Onepage" name="checkout.root" template="Magento_Checkout::onepage.phtml" cacheable="false">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="types" xsi:type="array">
                            <item name="form.input" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                <item name="config" xsi:type="array">
                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                    <item name="deps" xsi:type="array">
                                        <item name="0" xsi:type="string">checkoutProvider</item>
                                    </item>
                                    <item name="template" xsi:type="string">ui/form/field</item>
                                    <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                </item>
                            </item>
                        </item>
                        <item name="components" xsi:type="array">
                            <item name="checkout" xsi:type="array">
                                <item name="component" xsi:type="string">uiComponent</item>
                                <item name="config" xsi:type="array">
                                    <item name="template" xsi:type="string">Magento_Checkout/onepage</item>
                                </item>
                                <item name="children" xsi:type="array">
                                    <item name="errors" xsi:type="array">
                                        <item name="sortOrder" xsi:type="string">0</item>
                                        <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
                                        <item name="displayArea" xsi:type="string">messages</item>
                                    </item>
                                    <item name="authentication" xsi:type="array">
                                        <item name="sortOrder" xsi:type="string">1</item>
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication</item>
                                        <item name="displayArea" xsi:type="string">authentication</item>
                                        <item name="children" xsi:type="array">
                                            <!--Additional authentication fields-->
                                            <item name="errors" xsi:type="array">
                                                <item name="sortOrder" xsi:type="string">0</item>
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/authentication-messages</item>
                                                <item name="displayArea" xsi:type="string">messages</item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="progressBar" xsi:type="array">
                                        <item name="sortOrder" xsi:type="string">0</item>
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/progress-bar</item>
                                        <item name="displayArea" xsi:type="string">progressBar</item>
                                        <item name="config" xsi:type="array">
                                            <item name="deps" xsi:type="array">
                                                <item name="0" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
                                                <item name="1" xsi:type="string">checkout.steps.billing-step.payment</item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="estimation" xsi:type="array">
                                        <item name="sortOrder" xsi:type="string">10</item>
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/estimation</item>
                                        <item name="displayArea" xsi:type="string">estimation</item>
                                        <item name="config" xsi:type="array">
                                            <item name="template" xsi:type="string">Magento_Checkout/estimation</item>
                                            <item name="deps" xsi:type="array">
                                                <item name="0" xsi:type="string">checkout.sidebar</item>
                                            </item>
                                        </item>
                                    </item>
                                    <item name="steps" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <item name="displayArea" xsi:type="string">steps</item>
                                        <item name="children" xsi:type="array">
                                            <item name="shipping-step" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="sortOrder" xsi:type="string">1</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="step-config" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="shipping-rates-validation" xsi:type="array">
                                                                <item name="children" xsi:type="array">
                                                                    <!--Step configuration components-->
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    <item name="shippingAddress" xsi:type="array">
                                                        <item name="config" xsi:type="array">
                                                            <item name="deps" xsi:type="array">
                                                                <item name="0" xsi:type="string">checkout.steps.shipping-step.step-config</item>
                                                                <item name="1" xsi:type="string">checkoutProvider</item>
                                                            </item>
                                                            <item name="popUpForm" xsi:type="array">
                                                                <item name="element" xsi:type="string">#opc-new-shipping-address</item>
                                                                <item name="options" xsi:type="array">
                                                                    <item name="type" xsi:type="string">popup</item>
                                                                    <item name="responsive" xsi:type="boolean">true</item>
                                                                    <item name="innerScroll" xsi:type="boolean">true</item>
                                                                    <item name="title" xsi:type="string" translate="true">Shipping Address</item>
                                                                    <item name="trigger" xsi:type="string">opc-new-shipping-address</item>
                                                                    <item name="buttons" xsi:type="array">
                                                                        <item name="save" xsi:type="array">
                                                                            <item name="text" xsi:type="string" translate="true">Save Address</item>
                                                                            <item name="class" xsi:type="string">action primary action-save-address</item>
                                                                        </item>
                                                                        <item name="cancel" xsi:type="array">
                                                                            <item name="text" xsi:type="string" translate="true">Cancel</item>
                                                                            <item name="class" xsi:type="string">action secondary action-hide-popup</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping</item>
                                                        <item name="provider" xsi:type="string">checkoutProvider</item>
                                                        <item name="sortOrder" xsi:type="string">1</item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="customer-email" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                                <item name="displayArea" xsi:type="string">customer-email</item>
                                                                <item name="tooltip" xsi:type="array">
                                                                    <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                                </item>
                                                                <item name="children" xsi:type="array">
                                                                    <item name="before-login-form" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">before-login-form</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <!-- before login form fields -->
                                                                        </item>
                                                                    </item>
                                                                    <item name="additional-login-form-fields" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">additional-login-form-fields</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <!-- additional login form fields -->
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                            <item name="before-form" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">before-form</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- before form fields -->
                                                                </item>
                                                            </item>
                                                            <item name="before-fields" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">before-fields</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- before fields -->
                                                                </item>
                                                            </item>
                                                            <item name="address-list" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/list</item>
                                                                <item name="displayArea" xsi:type="string">address-list</item>
                                                            </item>
                                                            <item name="address-list-additional-addresses" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">address-list-additional-addresses</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- address-list-additional-addresses -->
                                                                </item>
                                                            </item>
                                                            <item name="before-shipping-method-form" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="displayArea" xsi:type="string">before-shipping-method-form</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- address-list-additional-addresses -->
                                                                </item>
                                                            </item>
                                                            <item name="shipping-address-fieldset" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="deps" xsi:type="array">
                                                                        <item name="0" xsi:type="string">checkoutProvider</item>
                                                                    </item>
                                                                </item>
                                                                <item name="displayArea" xsi:type="string">additional-fieldsets</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- The following items override configuration of corresponding address attributes -->
                                                                    <item name="region" xsi:type="array">
                                                                        <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
                                                                        <item name="visible" xsi:type="boolean">false</item>
                                                                    </item>
                                                                    <item name="region_id" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
                                                                        <item name="config" xsi:type="array">
                                                                            <item name="template" xsi:type="string">ui/form/field</item>
                                                                            <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
                                                                            <item name="customEntry" xsi:type="string">shippingAddress.region</item>
                                                                        </item>
                                                                        <item name="validation" xsi:type="array">
                                                                            <item name="required-entry" xsi:type="boolean">true</item>
                                                                        </item>
                                                                        <!-- Value of region_id field is filtered by the value of county_id attribute -->
                                                                        <item name="filterBy" xsi:type="array">
                                                                            <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
                                                                            <item name="field" xsi:type="string">country_id</item>
                                                                        </item>
                                                                    </item>
                                                                    <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">false</item>
                                                                        </item>
                                                                    </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>
                                                                    <item name="fax" xsi:type="array">
                                                                        <item name="validation" xsi:type="array">
                                                                            <item name="min_text_length" xsi:type="number">0</item>
                                                                        </item>
                                                                    </item>
                                                                    <item name="country_id" xsi:type="array">
                                                                        <item name="sortOrder" xsi:type="string">115</item>
                                                                    </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>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                            <item name="billing-step" xsi:type="array">
                                                <item name="component" xsi:type="string">uiComponent</item>
                                                <item name="sortOrder" xsi:type="string">2</item>
                                                <item name="children" xsi:type="array">
                                                    <item name="payment" xsi:type="array">
                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/payment</item>
                                                        <item name="config" xsi:type="array">
                                                            <item name="title" xsi:type="string" translate="true">Payment</item>
                                                        </item>
                                                        <item name="children" xsi:type="array">
                                                            <item name="renders" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- merge payment method renders here -->
                                                                </item>
                                                            </item>
                                                            <item name="additional-payment-validators" xsi:type="array">
                                                                <item name="component" xsi:type="string">uiComponent</item>
                                                                <item name="children" xsi:type="array">
                                                                    <!-- merge payment validators here -->
                                                                    <item name="email-validator" xsi:type="array">
                                                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                            <item name="customer-email" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/form/element/email</item>
                                                                <item name="displayArea" xsi:type="string">customer-email</item>
                                                                <item name="tooltip" xsi:type="array">
                                                                    <item name="description" xsi:type="string" translate="true">We'll send your order confirmation here.</item>
                                                                </item>
  • Add what you have tried so far. Magento 2 checkout, is a big customization area. So please divided the section on a small parts and it will help the user to answer this sectionm – Amit Bera Jan 15 at 13:45

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.