编辑 woocommerce 运费计算器

Question

我在 Woocommerce 结帐中添加了自定义城市，每个城市代表一个费率。但是，我想在运费计算器中显示城市的下拉列表，就像我在结帐页面中所做的那样。

运费计算器中的城市字段是一个文本字段。目前，我只能使用以下代码更改城市字段以在结帐时选择：

// 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;
}

我尝试使用this tutorial method，但没有成功

<?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>

感谢任何帮助。

Answer 1

要启用运费计算器中的城市字段，您需要使用：

add_filter( 'woocommerce_shipping_calculator_enable_city', '__return_true' );

这是在运费计算器中启用选择字段而不是城市输入文本字段的方法。现在，由于您已将自定义城市作为选择字段添加到结帐中，因此您将不得不重用您的自定义城市数组。

在 Woocommerce 模板 cart/shipping-calculator.php 中，您将替换：

        <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>

改用这段代码：

        <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>

测试了一个作品。

Answer 2

将代码放入您的“function.php”文件或插件中。无需操作 woocommerce 文件。 通过执行以下步骤，无需参与 WooCommerce 文件：

//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---------------------------------------------------