Need to create an interaction between two select type custom fields in the checkout form.

The options values for both are in a database table.

The first select includes the cities and the other one the locations of the whole country of a local courier service firm (Akis). When the city is selected on the first select field ("akiscity_woocommerce") the other one ("akisloc_woocommerce") should only include the corresponded locations in the city.

On page load this works for the first available city (as is it shown below), but obviously this should also work for any subsequent city selections. I would very much appreciate any help to setup this.

add_action( 'woocommerce_after_order_notes', 'akis_express' );
function akis_express($checkout) {

    global $wpdb;

    $resultscity = $wpdb->get_results( "SELECT akisid, akiscity FROM wp_akislocations GROUP BY akiscity" );
//    $otionscity  = array( '' => __('Selection of Akis City') );

    // Loop through the data query results
    foreach($resultscity as $result) {
        if($city=='') $city = $result->akiscity;
        $optionscity[$result->akisid] = $result->akiscity;

    $resultsloc = $wpdb->get_results( "SELECT akisid, akisloc FROM wp_akislocations WHERE akiscity = '".$city."'" );
//    $otionsloc  = array( '' => __('Selection of Akis Location') );

    // Loop through the data query results
    foreach($resultsloc as $result) {
        $optionsloc[$result->akisid] = $result->akisloc;

    echo '<div id="akiscity_woocommerce"><h4>' . __('Select Akis Express City') . '</h4>';
    woocommerce_form_field('akiscity', array(
        'type' => 'select',
        'class'=> array('akiscity form-row-first'),
//        'label' => __('Select Akis Express City'),
        'required' => true,
        'options'   =>  $optionscity, 
        'placeholder' => __('Pick City/Area')
    ), $checkout->get_value('akiscity') );
    echo '</div>';

    echo '<div id="akisloc_woocommerce"><h4>' . __('Select Akis Express Location') . '</h4>';
    woocommerce_form_field( 'akisloc', array(
        'type'          => 'select',
        'class'         => array('akisloc form-row-first'),
//        'label'         => __('Select Akis Express Location'),
        'required'      => true,
        'options'       => $optionsloc,
        'placeholder' => __('Pick Location')
    ),  $checkout->get_value( 'akisloc' ) );
    echo '</div>';

New contributor
Dimitrios Georgiadis is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • Questions about 3rd party plugins/products/themes are offtopic here and not in this stacks scope ( as indicated in the sidebar when you open the ask question page ). You need to ask this in a WooCommerce community, not on this stack
    – Tom J Nowell
    Mar 16 at 18:33