Reading list Switch to dark mode

    Additional info after the checkout coupon code

    Updated 27 April 2023

    In this blog, we are going to add an additional info after the checkout coupon code. First of all, we need to create a custom module. you can create a module using this blog Click Here.

    This topic contains basic information about how you can add an extra field after the checkout coupon code in checkout page. In Magento , checkout is implemented using UI components. Let’s check it out how we can add an extra field after Apply discount code .You can customize each step by changing the JavaScript implementation or template for a component.

    Step 1 : – Firstly create a module using this blog Click Here.

    Step 2 :- After Creating the module , You need to create the following new file: <your_module_dir>/view/frontend/layout/checkout_index_index.xml

    Step 3 : – In this file Add the below code:

    Searching for an experienced
    Magento 2 Company ?
    Read More
    <?xml version="1.0"?>
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
    <page xmlns:xsi=""
            <script  src="" defer="defer" async="async" src_type="url"/>
            <referenceBlock name="checkout.root">
                    <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="couponcode-order-discount" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="couponcode-order-custom" xsi:type="array">
                                                                                <item name="component" xsi:type="string">Webkul_Custom/js/coupon/custom</item>
                                                                                <item name="displayArea" xsi:type="string">captcha</item>
                                                                                <item name="formId" xsi:type="string">couponcode-order-custom-request</item>
                                                                                <item name="configSource" xsi:type="string">checkoutConfig</item>
                                                                                <item name="customId" xsi:type="string">trunstile-checkout-coupon-apply</item>

    Note : – the <Magento_Checkout_module_dir>/view/frontend/layout/

    checkout_index_index.xml file, find the component that you want to customize. Copy that corresponding node and all parent nodes up to <argument>. There is no need to leave all the attributes and values of parent nodes, as you are not going to change them.

    Step 4:- Change the js file, template or any other property as per your need

    Step 5: – After this we need to create the following new file: <your_module_dir>/view/frontend/web/js/coupon/custom.js

    Step 6: – Add the following code in this file

     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
    /* global grecaptcha */
        ], function (Component, $) {
            'use strict';
            //add validation using additional valiator
            return Component.extend({
                defaults: {
                    template: 'Webkul_Custom/coupon/custom'
                initialize: function () {

    Step 7: – In this above code, we define the template where you need to add your custom code as per your need.

    Step 8 :- After this, we need to create the following new file: <your_module_dir>/view/frontend/web/template/coupon/custom.html and add the following code in this file

    <b>You can apply coupon from here</b>

    After completing all the steps it will look like this.

    apply discount code additional info

    If you want to add Additional info on the Checkout Payment Page you can checkout our this blog click here

    You can check it out the magento blog how you can Customize the view of a checkout step Click Here

    I hope you like this blog 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home