0

I am trying to add custom headers to the checkout process to break the forms up into sensible sections.

I have already modified checkout_index_index.xml to alter the sort order of my form. It now looks like this

<?xml version="1.0"?>
<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="children" xsi:type="array">
                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="telephone" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">40</item>
                                                            </item>
                                                            <item name="company" xsi:type="array">
                                                                <item name="sortOrder" xsi:type="string">45</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

How do you go about adding headers in to break the form up in the following way

New H3 tags added above First Name Field and Address entry Point

In the attached image I have converted the labels to placeholders within the fields.

| improve this question | | | | |
0

Brother Try this

Create checkout_index_index.xml at

app/design/frontend/Package/theme/Magento_Checkout/layout/checkout_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="logo" destination="header-wrapper"/>
        <move element="catalog.topnav" destination="content" before="-"/>
        <move element="minicart" destination="header-wrapper"/>
        <referenceContainer name="header.panel" remove="false" />
        <referenceContainer name="footer-container"  remove="false"/>
    </body>
</page>

Now flush cache and try...!

| improve this answer | | | | |
0

@Speedingorange - Did you got answer for your query ? I am looking for the same . Kindly share if you have any info about this

| improve this answer | | | | |

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.