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

2 Answers 2

Reset to default
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
2
  • Unfortunately not, I have a dev working on the site currently and will add a snippet to explain if it works.
    – Speedingorange
    Oct 17, 2019 at 15:18
  • I got this one usefull - It not perfectly suite the requirment but we can group the element in wrapper magento.stackexchange.com/questions/186805/…
    – Raviraj
    Oct 17, 2019 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.