Skip to content

Add a div class to all the fields in shipping form in magento2

I want to customize my shipping and billing form in magento one page checkout process and for that I have to add a custom CSS class/div class to shipping and billing form.If anyone have any leads, Please help

code of checkout_index_index.xml
 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">
                                        <!-- Shipping step -->

                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <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">Ship here</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">10</item>
                                                    <item name="listingOrder" xsi:type="string">10</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">
                                                                <item name="country_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                </item>
                                                                <item name="postcode" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">2</item>
                                                                </item>
                                                                <item name="firstname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">3</item>
                                                                </item>
                                                                <item name="lastname" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">4</item>
                                                                </item>
                                                                <item name="street" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">5</item>
                                                                </item>
                                                                <item name="city" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">6</item>
                                                                </item>
                                                                <item name="region_id" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">7</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>