How can i change sort category view starting from child then parent, not alphabetically

I have created categories by city and districts.

On the archive page, it displays well.

The problem is, the views are sorted alphabetically.

As a example :

City (Jakarta)

Districts 1 (Tebet) Districts 2 (Cilandak) Districts 3 (Gambir)

Now displaying :

Cilandak Jakarta

Gambir Jakarta

Jakarta Tebet

I want :

Cilandak Jakarta

Gambir Jakarta

Tebet Jakarta

can anyone give me some help how to change it?

Sorry if my English is bad. thank you

I’ve created a snippet like this:

add_action('woocommerce_loop_add_to_cart_link','displaying_product_attributes',5); 

function displaying_product_attributes () { global $ product;

$  harga_val = $  product->get_attribute('pa_harga');  $  kt_val = $  product->get_attribute('pa_kt'); $  km_val = $  product->get_attribute('pa_km');  $  luas_bangunan_val = $  product->get_attribute('pa_luas-bangunan'); $  luas_tanah_val = $  product->get_attribute('pa_luas-tanah');        

$ terms = get_the_terms( $ product->get_id(),’product_cat’ ); if( $ terms ) { $ names = array(); foreach ( $ terms as $ term ) { $ names[] = $ term->name;

} 

}

echo "<p style='color:#1ebf41; text-align:left; text-indent: 3px; font-size:18px;line-height: 0.5; font-weight:bold'>".$  harga_val."</p>";   echo "<p style='color:#333; text-align:left; text-indent: 3px; font-size:14px;line-height: 0.1;'><i class='fas fa-bed'></i> &nbsp;".$  kt_val."&emsp;<i class='fas fa-shower'></i> &nbsp;".$  km_val."&emsp;<i class='fa fa-home'></i>&nbsp; ".$  luas_bangunan_val."m<sup>2</sup>&emsp;<i class='fas fa-expand-arrows-alt'></i>&nbsp; ".$  luas_tanah_val."m<sup>2</sup></p>";   print '<p style="color:#333; text-align:left; text-indent: 3px; font-size:14px;line-height: 1;"><i class="fas fa-map-marker-alt"></i> &nbsp; '.join( ', ', $  names ).'</p>'.PHP_EOL;; 

}