WooCommerce结账页国家下拉框重排后恢复Select2功能方法

问题 #

在WooCommerce结账页面自定义账单/配送地址的国家下拉菜单排序时，使用woocommerce_checkout_fields过滤器修改国家选项顺序后，原本的Select2增强下拉功能失效。实现代码如下：

add_filter( 'woocommerce_checkout_fields', 'customize_country_dropdown_order' );
function customize_country_dropdown_order( $fields ) {

    $first_countries = array(
        'DE' => 'Germany',
        'AT' => 'Austria',
        'CH' => 'Switzerland',
    );

    $rest_countries = array_diff( WC()->countries->get_allowed_countries(), $first_countries );

    // Combine the first countries and the rest with a separator
    $custom_country_list = array_merge( $first_countries, array( '-' => '------------' ), $rest_countries );

    // Update the order of the billing and shipping country dropdowns
    $fields['billing']['billing_country']['type'] = 'select';
    $fields['billing']['billing_country']['options'] = $custom_country_list;

    $fields['shipping']['shipping_country']['type'] = 'select';
    $fields['shipping']['shipping_country']['options'] = $custom_country_list;

    return $fields;
}

需要解决：自定义国家排序后，重新激活账单/配送地址国家下拉框的Select2功能。

解决方法 #

方法1：保留原字段核心属性，仅替换选项 #

原字段本身已是select类型，手动设置type会覆盖WooCommerce添加的Select2关联标识。只需直接替换options，保留其他属性即可：

add_filter( 'woocommerce_checkout_fields', 'customize_country_dropdown_order' );
function customize_country_dropdown_order( $fields ) {

    $first_countries = array(
        'DE' => 'Germany',
        'AT' => 'Austria',
        'CH' => 'Switzerland',
    );

    $rest_countries = array_diff( WC()->countries->get_allowed_countries(), $first_countries );
    $custom_country_list = array_merge( $first_countries, array( '-' => '------------' ), $rest_countries );

    // 仅替换选项，不修改type，保留原字段的Select2关联属性
    $fields['billing']['billing_country']['options'] = $custom_country_list;
    $fields['shipping']['shipping_country']['options'] = $custom_country_list;

    return $fields;
}

方法2：手动触发Select2初始化 #

如果方法1无效，可通过JavaScript在结账页面手动初始化Select2：

add_action( 'wp_footer', 'reinitialize_country_select2' );
function reinitialize_country_select2() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        ?>
        <script>
            jQuery(document).ready(function($) {
                $('#billing_country, #shipping_country').select2({
                    placeholder: '<?php esc_attr_e( 'Select a country / region', 'woocommerce' ); ?>',
                    width: '100%',
                    minimumResultsForSearch: 5 // 和WooCommerce默认逻辑一致
                });
            });
        </script>
        <?php
    }
}

方法3：使用专门的国家排序过滤器（推荐） #

WooCommerce提供woocommerce_countries_allowed_countries过滤器，直接修改全局允许国家列表，不会破坏原生Select2功能：

add_filter( 'woocommerce_countries_allowed_countries', 'customize_allowed_countries_order' );
function customize_allowed_countries_order( $countries ) {
    $first_countries = array(
        'DE' => 'Germany',
        'AT' => 'Austria',
        'CH' => 'Switzerland',
    );

    // 移除优先列表中的国家，避免重复
    foreach ( $first_countries as $code => $name ) {
        unset( $countries[ $code ] );
    }

    return array_merge( $first_countries, array( '-' => '------------' ), $countries );
}

内容的提问来源于stack exchange，提问作者Philipp Mochine