Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-marketplace-mod

    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 https://github.com/magento/magento2/blob/2.1.9/app/code/Magento/Checkout/view/frontend/web/js/view/payment.js 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 https://github.com/magento/magento2/tree/2.1.9/app/code/Magento/Checkout/view/frontend/web/js/view/payment directory and place in our Billing Step Module
    Webkul/BillingStep/view/frontend/web/js/view

    Now Clear the cache.
    It will look like this:

    Thanks

    . . .

    Comments (5)

    Add Your Comment

  • Hemansu Umariya
    Hi,
    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
      Github
  • Back to Top
    css.php
    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
    Close