Magento – Magento 2 Change Billing Address format from select dropdown to box as the Shipping address format

billing-addressknockoutjsmagento2shipping-address

I want to change the business address format shown in checkout page. By default it is select drop down.How can we change it to the format like shipping adddress is shown. I am new to knockout js.

enter image description here

This is the billing address

enter image description here
I need it to be formatted as above shipping address.

Best Answer

You need to override the knockout/html template in your own custom design. I believe the template in question is vendor/magento/module-checkout/view/frontend/web/template/billing-address/list.html.

But in my opinion, it's always best to keep the core functionality of Magento intact. If you want to replace the select with custom HTML, you must also keep in mind all the events that are bound to it. For example, if you select 'New Address ...' in the dropdown, knockout triggers the visibility of the new form (and probably some other parameters underneath the surface).

An approach that I like to use (but which is also frowned upon), is:

  • Create your (p)HTML template as well (so you have both your style and the dropdown on screen)
  • Use CSS to hide the dropdown (give it's wrapping container a height of 0px, not display:none, due to Magento validation JS that will not be triggered when display is none).
  • Use JavaScript to manipulate the value of the hidden dropdown when the user selects a different address (or wants to add a new one). Don't forget to dispatch your JavaScript event! ;-)

With this approach, the core JS/Knockout functionality of Magento stays intact, and your adjustments will be a layer above it.

A different approach of cours will be to overrule the Knockout html template in your design, but chances are you have to rewrite the JS UI Components as well then.

Good luck!

Related Topic