Edit woocommerce shipping calculator

Question

I have added custom cities to Woocommerce checkout and each city represents a rate. However, I would like to have a dropdown of cities in the shipping calculator as I have done with the checkout page.

The city field in the shipping calculator is a text field. Currently, I have been only able to change the city field to select at the checkout using this code below:

// Change "city" checkout billing and shipping fields to a dropdown
add_filter('woocommerce_checkout_fields', 'override_checkout_city_fields');

function override_checkout_city_fields($fields) {
  // Define here in the array your desired cities (Here an example of cities)
  $option_cities = array(
    '' => __('Select your city'),
    'City A' => 'City A',
    'City B' => 'City B'
  );

  $fields['shipping']['shipping_city']['type'] = 'select';
  $fields['shipping']['shipping_city']['options'] = $option_cities;

  return $fields;
}

I tried using this tutorial method but it didn't work

<?php
    // Ensure to get the correct value here. This __get( 'shipping_area' ) is based on how the Advanced Checkout Fields plugin would work
    $current_area = WC()->customer->__get( 'shipping_area' );
    ?>
    <p>
        <select name="calc_shipping_area" id="calc_shipping_area">
            <option value=""><?php _e( 'Select a area&hellip;', 'woocommerce' ); ?></option>
            <option value="alpha" <?php selected( $current_area, 'alpha' ); ?>>Alpha</option>
            <option value="beta" <?php selected( $current_area, 'beta' ); ?>>Beta</option>
            <option value="charlie" <?php selected( $current_area, 'charlie' ); ?>>Charlie</option>
        </select>
    </p>

Any hep is appreciated.

Answer 1

To enable the city field in the shipping calculator you need to use:

add_filter( 'woocommerce_shipping_calculator_enable_city', '__return_true' );

Here is the way to enable a select field instead of an input text field for cities in the shipping calculator. Now as you have added custom cities to checkout as a select field you will have to reuse your custom array of cities.

In the Woocommerce template cart/shipping-calculator.php, you will replace:

        <p class="form-row form-row-wide" id="calc_shipping_city_field">
            <input type="text" class="input-text" value="<?php echo esc_attr( WC()->customer->get_shipping_city() ); ?>" placeholder="<?php esc_attr_e( 'City', 'woocommerce' ); ?>" name="calc_shipping_city" id="calc_shipping_city" />
        </p>

By this code instead:

        <p class="form-row form-row-wide" id="calc_shipping_city_field">
            <?php
                // HERE <===== define your array of cities
                $cities = array('Paris','Lyon','Marseille','Nice');

                $current_city = esc_attr( WC()->customer->get_shipping_city() );
                ?>
            <select name="calc_shipping_city" id="calc_shipping_city">
                <option value=""><?php _e( 'Select a City&hellip;', 'woocommerce' ); ?></option>
                <?php foreach( $cities as $city ):
                echo '<option value="'.$city.'" '.selected( $current_city, $city ).'>'.$city.'</option>';
                endforeach; ?>
            </select>
        </p>

Tested an works.