Add custom field to shipping zone form - Woocommerce

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.

Though I wasn't able to find a full answer to your problem, I have gotten really close. According to this link : https://github.com/woocommerce/woocommerce/issues/21964#issue-381983150. It is suggested to use, `woocommerce_shipping_zone_after_methods_table`. I was able to add field to the form. And use `woocommerce_before_shipping_zone_object_save` to save the value, which was blocker for me. Adding the field in a such a way that it starts getting posted back is tricky as this is an ajax request. I tried a lot but no matter what I do, the `zone_custom` field I created wasnt getting posted. — bhanu, Jun 05 '21 at 15:49
If you're only seeing the `echo`, it means that your `if` doesn't evaluate to true. Try `echo 'this runs for shipping_options and section is ' . $current_section;` to see what value you get for that. It may not be a string and it may not ever contain the value you think it should. — Stephan Samuel, Feb 05 '22 at 18:37

score 0 · Answer 1 · answered Jan 03 '23 at 11:30

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' );

Add custom field to shipping zone form - Woocommerce

1 Answers1