Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Add Billing Address Step on Checkout Magento2

    Here we will learn, How to Add Billing Address Step on Magento2 Checkout page

    1. Create new file Webkul/BillingStep/view/frontend/web/js/view/billing-address-step.js

    2. Now we need to create html template file (billing-step.html) defined in above file.
    File: Webkul/BillingStep/view/frontend/web/template/billing-step.html

    3. Create Webkul/BillingStep/view/frontend/layout/checkout_index_index.xml

    4. Create Webkul/CheckoutCustomization/Block/Checkout/LayoutProcessor.php to insert Billing Address form in the xml.


    Lets call our custom Webkul/CheckoutCustomization/Block/Checkout/LayoutProcessor Block.
    5. create file# Webkul/CheckoutCustomization/etc/frontend/di.xml.

    6. Now overwrite file to stop Payment Page Step before our Billing Address Step

    Create File Webkul/BillingStep/view/frontend/requirejs-config.js

    Now create this file in our BillingStep Module.
    #File: Webkul/BillingStep/view/frontend/web/js/view/payment.js

    7. Finally copy directory and place in our Billing Step Module

    Now Clear the cache.
    It will look like this:


    . . .

    Comments (5)

    Add Your Comment

  • Hemansu Umariya
    How to Move Billing Address On First Step ??
  • Dnyaneshwar Chavan
    we are using this extension but this extension is not working configurable products and its working fine with simple products. whats the issue.??
  • kavya
    Hi, I tried all the above steps but the checkout page is loading.
    • Mahesh Singh
      Hi @kavya, Above code is working you can download sample code from
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again