The templates for shipping address section are here :
vendor/magento/module-checkout/view/frontend/web/template/shipping-address/list.html
and
vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html
You can override the same in your theme like this app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-address/list.html
As you wish to list the addresses in select dropdown you need to change the code like this:
<div class="field field-select-shipping">
<div class="control" >
<select class="select" name="shipping_address_id" data-bind="
options: addressOptions,
optionsText: addressOptionsText,
optionsValue: addressOptionsValue,
value: selectedAddress,
selectedOptions: selectedAddress,
event: {change: selectAddress(selectedAddress())};
"></select>
</div>
</div>
The js files are located here:
vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/list.js
and
vendor/magento/module-checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js
You can override the same like this:
app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/shipping-address/list.js
You can refer to this file vendor/magento/module-checkout/view/frontend/web/js/view/billing-address.js
for writing functions like addressOptions
, addressOptionsText
etc.
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:
display:none
, due to Magento validation JS that will not be triggered whendisplay
isnone
).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!