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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.