How to add custom field to shipping zone form?

Question

I am trying to add a select field to Woocommerce Shipping tab and to Shipping Zones section of it while creating a new shipping zone. I found this on official documentation of Woocommerce while searching for the solution.

What I've tried so far is:

// Fires on 'plugins_loaded' action of WordPress
public function plugins_loaded_action() {
    add_filter( 'woocommerce_get_settings_shipping', array( $this, 'shipping_zone_settings_add_city_field' ), 10, 2 );
}

public function shipping_zone_settings_add_city_field( $settings, $current_section ) {

    echo 'this runs only for shipping_options section';

    /**
     * Check the current section for shipping zone
     */
    if( $current_section === 'shipping_zones' ) {
        // Add city field to settings
        $settings[] = array(
            array( 
                'name' => __( 'Zone City', 'woocommerce' ),
                'type' => 'title',
                'desc' => __( 'Specify city names for current shipping region', 'woocommerce' ),
                'id' => 'shipping_zones',
            ),
            array(
                'name' => __( 'Zone Cities', 'woocommerce' ),
                'desc_tip' => __( 'Add all cities you want to be apply this shipping region for.', 'woocommerce' ),
                'id' => 'wc_shipping_zone_cities',
                'type' => 'multiselect',
                'desc' => __( 'Cities for this shipping region', 'woocommerce' ),
            ),
            array(
                'type' => 'sectionend',
                'id' => 'shipping_zones',
            ),
        );
    }
    return $settings;
}

But the hooked filter function only runs for shipping_options section as I am able to see the echo output at top in that section only.
The Woocommerce class for shipping settings has this method for getting settings.

Clearly, I'm doing something wrong here, may be hooking to incorrect filter or anything else. Please help.

Answer 1

Unfortunately, no hook has been defined for this section. You can use the following code to add the field. Another way is to delete the zone settings page and rebuild it yourself using WooCommerce admin settings templates, which is really time consuming.

function ywp_add_city_field_to_shipping_zone() {
    $cities = array(
        'city-1' => 'city one name',
        'city-2' => 'city two name',
        'city-3' => 'city three name',
        'city-4' => 'city four name',
    );

    $cities_opt = '';

    foreach ( $cities as $value => $name ) {
        $cities_opt .= sprintf(
            '<option value="%s">%s</option>',
            $value,
            $name,
        );
    }
    
    $field = '<br><select multiple="multiple" data-attribute="my-city" id="my-city" name="my-city" data-placeholder="Select cities from this location" class="wc-shipping-zone-region-select chosen_select">' . $cities_opt . '</select>';
    ?>
    <script>jQuery(function ($) {
            if ($('.wc-shipping-zone-postcodes-toggle').length) {
                beforeEl = $('.wc-shipping-zone-postcodes-toggle')
            } else {
                beforeEl = $('.wc-shipping-zone-postcodes')
            }

            beforeEl.before('<?php echo $field;?>')
            $('body').trigger('wc-enhanced-select-init')
        })
    </script>
    <?php
}

add_action( 'woocommerce_shipping_zone_after_methods_table', 'ywp_add_city_field_to_shipping_zone' );