自定义 WooCommerce 结帐页国家/地区下拉菜单顺序：保留 Select2 功能

2024-03-22 15:57:29

## 如何重组 WooCommerce 结帐页国家/地区下拉菜单

背景

WooCommerce 用户面临的一个常见问题是账单和送货地址下拉菜单中国家/地区顺序不理想。这可能导致结帐流程的困惑和不便。本文将提供分步指南，说明如何自定义这些下拉菜单中的国家/地区顺序，同时保留 Select2 功能的增强型用户体验。

问题

调整 WooCommerce 结帐页国家/地区顺序的一种方法是使用 woocommerce_checkout_fields 过滤器。然而，该方法通常会禁用 Select2 功能，从而降低用户体验。

解决方法

要解决这个问题并自定义国家/地区顺序，我们需要执行以下步骤：

调整国家/地区顺序： 使用 woocommerce_checkout_fields 过滤器，将国家/地区按所需顺序排列。
注册 Select2 脚本： 通过 wp_enqueue_scripts 挂钩，注册 Select2 脚本和样式表。
本地化 Select2 脚本： 使用 woocommerce_get_script_data 过滤器，将 Select2 脚本本地化为网站语言。
初始化 Select2： 使用 woocommerce_after_checkout_billing_form 挂钩，初始化 Select2 功能。

代码实现

add_action( 'wp_enqueue_scripts', 'enqueue_select2_scripts' );
function enqueue_select2_scripts() {
    wp_enqueue_script( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js', array( 'jquery' ), '4.0.13', true );
    wp_enqueue_style( 'select2', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css', array(), '4.0.13' );
}

add_filter( 'woocommerce_get_script_data', 'localize_select2_script', 10, 2 );
function localize_select2_script( $data, $handle ) {
    if ( 'select2' === $handle ) {
        $data['i18n']['select2'] = array(
            'noResults' => esc_html__( 'No results found', 'woocommerce' ),
            'searching' => esc_html__( 'Searching...', 'woocommerce' ),
        );
    }
    return $data;
}

add_action( 'woocommerce_after_checkout_billing_form', 'initialize_select2' );
function initialize_select2() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('select[name="billing_country"]').select2();
        });
    </script>
    <?php
}

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