Edit woocommerce shipping calculator

3
votes

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.

2
phpwordpresstemplateswoocommercecart
@LoicTheAztec I have posted where users add custom select field to the calculator, why would the city field be complicated – Peter
@LoicTheAztec I know but please if you can assist, I will be grateful. Please see this guy's post wooshipping – Peter
It could be nice if you could add in your question the code you have use for your custom checkout field… It could be useful for others. Also as now you can do it, if you want like you could please upvote the answer. Thanks. – LoicTheAztec

2 Answers

1
votes

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.

0
votes

Put the code in your "function.php" file or plugin. No need to manipulate the woocommerce file. There is no need to get involved in the WooCommerce file by doing the following procedure:

//calc-------------------------------------------------------------

<script type="text/javascript">
  jQuery(function ($) {

$(document.body).on('change', 'select[name="calc_shipping_state"]', function() {
$('#calc_shipping_city').replaceWith(
  '<select id="calc_shipping_city" name="calc_shipping_city"
    class="hi_select address-field" autocomplete="address-level1"
    data-placeholder="salam" tabindex="-1">' +
 '<option value="" selected>- Select City -</option>' +
 '<option value="TEST1">TEST1</option>' +
 '<option value="TEST2">TEST2</option>' +
 '<option value="TEST3">TEST3</option>' +
 '<option value="TEST4">TEST4</option>' +
 '<option value="TEST5">TEST5</option>' +
'</select>');

  });
 });

  </script>

 //end:calc---------------------------------------------------