3

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.

Improve this question

2 Answers 2

Reset to default
1

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!

Improve this answer
2
  • Thank you for your suggestion. But can you give me an idea as to how to show the addresses in the checkout page. Like if we have multiple addresses different boxes for each.
    – Geethika Antony
    Mar 2, 2017 at 4:45
  • <select class="select" name="billing_address_id" data-bind=" options: addressOptions, optionsText: addressOptionsText, value: selectedAddress, event: {change: onAddressChange(selectedAddress())};"> </select> This is how the dropdown is rendered now.How can i change this to multiple boxes. I can see the data is coming from billing-address.js using knockout.
    – Geethika Antony
    Mar 2, 2017 at 5:10
0

Have you set custom design of billing address like shipping address? If you have set then post the solution here.

Improve this answer
1
  • That's not an answer to the question.
    – HelgeB
    Mar 12, 2019 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.