Move "Apply Discount Code" To Checkout Sidebar

In addition to the latest post about removing the "Apply Discount Code" from the checkout payment step, in this post we will see how can move it to the checkout sidebar instead of not showing at all. Let's see how you can do that!

What we will need to do this time, is the same checkout layout update we did on the previous post. Meaning to remove firstly the "Apply Discount Code" from the checkout payment step and then add the "discount" component to the sidebar. So the updated checkout xml layout will look like the one below.

As we use the same template with no any changing, you will see that the styling on frontend is broken plus by default the "Apply Discount Code" form is not opened. Exactly how it is by default on the checkout payment step.

So you can easily modify that template by copying it from /vendor/magento/module-sales-rule/view/frontend/web/template/payment/discount.html to your theme folder under app/design/frontend/VENDOR/THEME/Magento_SalesRule/web/templates/payment/discount.html, add any modification you need and also update your styles so it will look better.

Feel free to share this post and ask your questions in the comments below.

Till next time!

DigitalOcean Referral Badge