Hello Magento Friends,
Magento 2 shows the Apply Discount Code (Coupon) section by default at the bottom of the Order Summary on the checkout page. But some store owners find it more user-friendly to have the coupon field in the sidebar, directly inside the Order Summary section. In this blog, we will guide you through the process of moving the Apply Coupon Code field to the sidebar in Magento 2 checkout.
Also read – How to Move Apply Coupon to Order Summary in Magento 2
Steps to Move Apply Coupon to Sidebar in Magento 2 Checkout Page:
Step 1: Create a checkout_index_index.xml file using the file path below.
{{magento_root}}\app\code\Vendor\Extension\view\frontend\layout\checkout_index_index.xml
Now add the code as follows
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="afterMethods" xsi:type="array">
<item name="children" xsi:type="array">
<item name="discount" 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 name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="discount" xsi:type="array">
<item name="component" xsi:type="string">Magento_SalesRule/js/view/payment/discount</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_SalesRule/js/view/payment/discount-messages</item>
<item name="displayArea" xsi:type="string">messages</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>Output:
Conclusion:
Customizing the Magento 2 checkout page layout improves the shopping process. Moving the coupon field to the sidebar brings it closer to the subtotal and discount fields, improving usability and increasing conversion rates. Through some layout tweaks and using a custom module, you are able to achieve a cleaner and friendlier checkout.
Happy Coding!
