{"id":581,"date":"2019-09-03T08:23:33","date_gmt":"2019-09-03T08:23:33","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/2019\/09\/03\/move-apply-coupon-to-sidebar-in-magento-2-checkout-page\/"},"modified":"2025-03-18T04:41:48","modified_gmt":"2025-03-18T04:41:48","slug":"move-apply-coupon-to-sidebar-in-magento-2-checkout-page","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/move-apply-coupon-to-sidebar-in-magento-2-checkout-page\/","title":{"rendered":"How to Move Apply Coupon to Sidebar in Magento 2 Checkout Page"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

So, whether it is for business requirements or improvements, you would want to try new things in Magento 2 checkout page.<\/p>\n\n\n\n

One such example is to move apply coupon to side bar in Magento 2 checkout page<\/strong><\/em>.<\/p>\n\n\n\n

Instead of offering the \u201capply coupon\u201d in the payment section, the below solution lets you implement it in the shipping section as shown below:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Rearranging the apply coupon can be easily done with this programmatic method:<\/p>\n\n\n\n

Steps to Move Apply Coupon to Side Bar in Magento 2 Checkout Page:<\/h2>\n\n\n\n

1. Create registration.php<\/strong>\u00a0file in\u00a0app\\code\\[Vendor]\\[Namespace]\\<\/strong><\/p>\n\n\n\n

<?php\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n'[Vendor]_[Namespace]',\n    __DIR__\n);<\/pre>\n\n\n\n
2. Create module.xml<\/strong>\u00a0file in\u00a0app\\code\\[Vendor]\\[Namespace]\\etc<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"[Vendor]_[Namespace]\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
3. Create checkout_index_index.xml<\/strong>\u00a0file in\u00a0app\\code\\[Vendor]\\[Namespace]\\view\\frontend\\layout<\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" layout=\"1column\"\n      xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\n    <body>\n        <referenceBlock name=\"checkout.root\">\n            <arguments>\n                <argument name=\"jsLayout\" xsi:type=\"array\">\n                    <item name=\"components\" xsi:type=\"array\">\n                        <item name=\"checkout\" xsi:type=\"array\">\n                            <item name=\"children\" xsi:type=\"array\">\n                                <item name=\"sidebar\" xsi:type=\"array\">\n                                    <item name=\"children\" xsi:type=\"array\">\n                                        <item name=\"summary\" xsi:type=\"array\">\n                                            <item name=\"children\" xsi:type=\"array\">\n                                                <item name=\"discount\" xsi:type=\"array\">\n                                                    <item name=\"component\" xsi:type=\"string\">Magento_SalesRule\/js\/view\/payment\/discount<\/item>\n                                                    <item name=\"children\" xsi:type=\"array\">\n                                                        <item name=\"errors\" xsi:type=\"array\">\n                                                            <item name=\"sortOrder\" xsi:type=\"string\">0<\/item>\n                                                            <item name=\"component\" xsi:type=\"string\">Magento_SalesRule\/js\/view\/payment\/discount-messages<\/item>\n                                                            <item name=\"displayArea\" xsi:type=\"string\">messages<\/item>\n                                                        <\/item>\n                                                    <\/item>\n                                                <\/item>\n                                            <\/item>\n                                        <\/item>\n                                    <\/item>\n                                <\/item>\n                            <\/item>\n                        <\/item>\n                    <\/item>\n                <\/argument>\n            <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
That\u2019s it.<\/p>\n\n\n\n
Follow the above steps and you can offer the \u201cApply Coupon\u201d button in the shipping section itself on the checkout page.<\/p>\n\n\n\n
Please let me know if you have any doubts about the implementation. I\u2019d be happy to help. Also, I would like to know how this solution helped you improve the checkout functionality in Magento 2 store.<\/p>\n\n\n\n
I\u2019d be grateful if you help me share this post to fellow developers via social media.<\/p>\n\n\n\n
Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","hentry","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=581"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/581\/revisions"}],"predecessor-version":[{"id":10047,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/581\/revisions\/10047"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}