How to Move Apply Coupon to Sidebar in Magento 2 Checkout Page
The default Magento 2 checkout, though it is well developed, cannot be enough for every business requirements. There is always a room for improvement in checkout page to change its visual appeal and the flow.
So, whether it is for business requirements or improvements, you would want to try new things in Magento 2 checkout page.
One such example is to move apply coupon to side bar in Magento 2 checkout page.
Instead of offering the “apply coupon” in the payment section, the below solution lets you implement it in the shipping section as shown below:
Rearranging the apply coupon can be easily done with this programmatic method:
Steps to Move Apply Coupon to Side Bar in Magento 2 Checkout Page:
- Create registration.php file in app\code\[Vendor]\[Namespace]\
12345<?php\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,'[Vendor]_[Namespace]',__DIR__); - Create module.xml file in app\code\[Vendor]\[Namespace]\etc
12345<?xml version="1.0"?><config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"><module name="[Vendor]_[Namespace]" setup_version="1.0.0"/></config> - Create checkout_index_index.xml file in app\code\[Vendor]\[Namespace]\view\frontend\layout
123456789101112131415161718192021222324252627282930313233343536<?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="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>
That’s it.
Follow the above steps and you can offer the “Apply Coupon” button in the shipping section itself on the checkout page.
Please let me know if you have any doubts about the implementation. I’d be happy to help. Also, I would like to know how this solution helped you improve the checkout functionality in Magento 2 store.
I’d be grateful if you help me share this post to fellow developers via social media.
Thank you.
Related Articles:
8 Comments
The field works and discount is applied, but this error message is shown “The shipping address is missing. Set the address and try again.”
Hey Leoner,
Can you please check in the quote where the shipping address is saved or
is not saved and also verify if the issue came after you applied this solution ?
How change Apply Discount Code text and add custom test from checkout page
Hey, You need to check it in template file like :
vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html
Try it, and if still the error occurs let us know, Thank You.
Hello,
The code is working fine, but it is duplicating, showing on middle content and sidebar, is there a way to add only in sidebar and remove from middle content.
Thanks
Hello Raj,
Please try to add this code in checkout_index_index.xml just before <item name=”sidebar” 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>
Thank you
Sanjay thanks for this article!
Can you please advise how to move the “Apply Coupon” field to Sidebar int he basket (cart) page?
Thanks in advance.
Hello Rustam,
Thanks for the appreciation!
Please refer https://magento.stackexchange.com/questions/250035/magento2-move-coupon-code-inside-summary for your requirements.
Thanks