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.

Wringer

did u find any solution? – Ec

Though I wasn't able to find a full answer to your problem, I have gotten really close. According to this link : 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. – Nerveracking

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. – Sandasandakan

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

Mantis

Answer 2

I think it might work if you woocommerce_get_settings_shipping filter. You can try hooking into the woocommerce_shipping_zones_settings filter to add fields to the Shipping Zones section.

// Hook into the 'woocommerce_shipping_zones_settings' filter
add_filter('woocommerce_shipping_zones_settings', 'add_custom_shipping_zone_field', 10, 2);

function add_custom_shipping_zone_field($settings, $zone_id) {
    // Add your custom field here
    $settings[] = array(
        'title'    => __('Zone City', 'woocommerce'),
        'type'     => 'title',
        'id'       => 'zone_city_title',
    );

    $settings[] = array(
        'title'    => __('Zone Cities', 'woocommerce'),
        'desc_tip' => __('Add all cities you want to apply this shipping region to.', 'woocommerce'),
        'id'       => 'wc_shipping_zone_cities_' . $zone_id, // Make the field unique for each zone
        'type'     => 'multiselect',
        'class'    => 'wc-enhanced-select',
        'css'      => 'width: 450px;',
        'options'  => array(
            'city1' => 'City 1',
            'city2' => 'City 2',
            'city3' => 'City 3',
            // Add more cities as needed
        ),
    );

    $settings[] = array(
        'type'     => 'sectionend',
        'id'       => 'zone_city_title',
    );

    return $settings;
}

The idea is to add a custom multiselect field for specifying cities to each shipping zone in the Shipping Zones section. You can customize the field options per your requirements. Simply copy and paste this code into your theme's functions.php file or a custom plugin. Hoping this works out for you!

Frugivorous