WooCommerce 在结帐时使用 Optgroup 选择下拉菜单

我在用着WordPress 5.0.2 with WooCommerce 3.5.3我在结帐页面上创建了一个选择下拉菜单，效果很好，但是我想在其中添加一些选项组来组织选择选项

这是我的代码函数.php :

add_action('woocommerce_before_order_notes', 'add_select_checkout_field');
function add_select_checkout_field( $checkout ) {
  echo '<p>New Select Dropdown</p>';
  woocommerce_form_field( 'region', array(
      'type'          => 'select',
      'class'         => array( 'region-dropdown' ),
      'label'         => __( 'Select your region' ),
      'options'       => array(
          'region1'   => __( 'Region 1', 'woocommerce' ),
          'region2' => __( 'Region 2', 'woocommerce' ),
          'region3' => __( 'Region 3', 'woocommerce' ),
          'region4'   => __( 'Region 4', 'woocommerce' )
      )
 ),
  $checkout->get_value( 'region' ));
}

我想要的结果是这样输出的：

<select>
    <optgroup label="North Region">
        <option>Region 1</option>
        <option>Region 2</option>
    </optgroup>
    <optgroup label="South Region">
        <option>Region 3</option>
        <option>Region 4</option>
    </optgroup>
</select>

我不知道为什么 woocommerce 不实现此功能，但我希望有办法做到这一点。

任何帮助，将不胜感激

您可以通过两种方式做到这一点：

1) 启用<optgroup>在 Woocommerce 中选择表单字段，您可以从 GitHub 使用：

• 这个新的新鲜话题：lomars - Woocommerce 选择带有选项组的表单字段

• 这个旧线程：QWp6t - 将 optgroup 支持添加到 WooCommerce 选择表单字段

2）启用<optgoup>手动在选择字段中，例如：

add_action('woocommerce_before_order_notes', 'custom_checkout_select_field_with_optgroup', 10, 1 );
function custom_checkout_select_field_with_optgroup( $checkout ) {
    $domain  = 'woocommerce';
    $title   = __("Region", $domain);
    $slug    = sanitize_title($title);
    $default = __("Select your region", $domain);
    $value   = $checkout->get_value($slug);

    // Region option data array with optgroup
    $options = array(
        __("North Region", $domain) => array(
            'region1' => __("Region 1", $domain),
            'region2' => __("Region 2", $domain),
        ),
        __("South Region", $domain) => array(
            'region3' => __("Region 3", $domain),
            'region4' => __("Region 4", $domain),
        )
    );

    // The field
    echo '<p class="form-row form-row-wide '.$slug.'-dropdown" id="'.$slug.'_field" data-priority="">
    <label for="'.$slug.'" class="">'.$title.'</label>
    <span class="woocommerce-input-wrapper">
    <select name="'.$slug.'" id="'.$slug.'" class="select " data-placeholder="" autocomplete="'.$slug.'">
    <option value="">'.$default.'</option>';

    // Loop through "optgroup"
    foreach( $options as $optgroup_label => $optgroup_options ) {
        echo '<optgroup label="'.$optgroup_label.'">';
        // Loop through "options" in the "optgroup"
        foreach( $optgroup_options as $key => $label ) {
            $selected = $value === $key ? ' selected="selected"': '';
            echo '<option value="'.$key.'"'.$selected.'>'.$label.'</option>';
        }
        echo '</optgroup>';
    }

    echo '</select></span></p>';
}

代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并有效。

相关主题：在 Woocommerce Checkout 中的帐单国家/地区下方添加自定义字段