{"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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-581","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_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}]}}