Hide existing fields in checkout. (Location Field)

[Areesh]

Hi, I am transfering my custom code in checkout.js to my custom app for customizing my checkout. Currently I created 3 fields which is “Province, City, Barangay”. This fields are dropdown, the behaviour of this is when this fields are selected, the other field will showcase options related to the selected field.

The pattern will be Province > City > Barangay.

Now the nextstep will be: I need to hide the existing fields in checkout which is the "Region & City".

See Below image for reference:

And also I want the result structure to be like this:

How will I able to achieve this?

Thank you!

[Liam]

Hi Areesh,

From your description, it sounds like you’ll need to create a checkout UI extension using the purchase.checkout.delivery-address.render-before target. There is a video here that shows how to get started building these out.

[Areesh]

Hi Liam,

Thank you for this, I have applied the checkout UI Extension and purchase.checkout.deliver-address-render-before target. But is it possible to put my custom fields between the pre-defined fields of checkout?

is this possible? Thank you