0

kindly help me with moving shipping information (Ship To and Shipping Method) below payment method.

enter image description here

Improve this question

2 Answers 2

Reset to default
0

Override the checkout_index_index.xml layout file In your custom theme or module, create the following directory structure if it doesn't exist already:

app/design/frontend//<your_theme>/Magento_Checkout/layout/

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<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-information" xsi:type="array">
                                        <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information</item>
                                        <item name="config" xsi:type="array">
                                            <item name="deps" xsi:type="string">checkout.steps.shipping-step.shippingAddress</item>
                                        </item>
                                        <item name="displayArea" xsi:type="string">shipping-information</item>
                                        <item name="children" xsi:type="array">
                                            <item name="ship-to" xsi:type="array">
                                                <item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-information/list</item>
                                                <item name="displayArea" xsi:type="string">ship-to</item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

for Remove component please check how to remove component

Improve this answer
0

To move the shipping information section below the payment method in the payment page on the Luma theme in Magento 2.4, you'll need to override the default layout by creating or modifying layout files in your custom theme or module. Follow these steps:

Create a custom theme (if you haven't already) If you haven't created a custom theme yet, follow the official Magento 2 guide to create one: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html

Override the checkout_index_index.xml layout file In your custom theme or module, create the following directory structure if it doesn't exist already:

app/design/frontend/<Vendor>/<your_theme>/Magento_Checkout/layout/

Create or edit the checkout_index_index.xml file Inside the layout directory, create or edit the checkout_index_index.xml file and add the following code:

<?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>
        <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="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="renders" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="default" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="shipping-address" xsi:type="array">
                                                                            <item name="config" xsi:type="array">
                                                                                <item name="componentDisabled" xsi:type="boolean">true</item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

This code will disable the shipping address component inside the payment method section.

Move the shipping information section below the payment method Next, you need to move the shipping information section below the payment method. In the same checkout_index_index.xml file, add the following code:

<move element="checkout.steps.shipping-step.shippingAddress" destination="checkout.steps.billing-step.payment.payments-list" after="-"/>

Clear the cache Finally, clear the cache by running the following command in your Magento 2 root directory:

bin/magento cache:clean

Now, the shipping information section should appear below the payment method on the payment page of your Luma theme.

Improve this answer

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.