如何在Digits插件注册表单添加WooCommerce动态国家州下拉框

问题描述 #

我使用WooCommerce搭建网站，搭配Digits插件实现手机号OTP登录注册，需要在Digits的注册表单中添加国家和州的下拉选择框。目前结账页面的账单详情下拉框可正常显示，但注册页面的下拉框完全无法展示。我尝试通过WPCode插件插入以下代码，但未生效：

global $woocommerce;
$countries_obj   = new WC_Countries();
$countries   = $countries_obj->__get('countries');
echo '<div id="my_custom_countries_field"><h2>' . __('Countries') . '</h2>';

woocommerce_form_field('my_country_field', array(
'type'       => 'select',
'class'      => array( 'chzn-drop' ),
'label'      => __('Select a country'),
'placeholder'    => __('Enter something'),
'options'    => $countries
)
);
echo '</div>';

解决方案 #

直接输出代码无法生效的核心原因是：Digits插件有独立的表单渲染逻辑，需要使用它提供的专属钩子来插入字段，同时要确保代码在WooCommerce加载后执行。以下是修正后的完整方案：

1. 修正后的代码（含国家/州联动） #

// 将字段挂载到Digits注册表单
add_action('digits_register_form', 'add_woocommerce_country_state_to_digits_form');
function add_woocommerce_country_state_to_digits_form() {
    // 确保WooCommerce已加载
    if (!class_exists('WC_Countries')) {
        return;
    }
    
    $countries_obj = new WC_Countries();
    $countries = $countries_obj->get_countries(); // 使用官方方法获取国家列表，避免__get()的兼容性问题
    
    // 输出国家选择字段
    echo '<div id="custom_country_field" class="digits-form-field">';
    echo '<h3>' . __('国家') . '</h3>';
    woocommerce_form_field('custom_country', array(
        'type'        => 'select',
        'class'       => array('woocommerce-select', 'digits-input'),
        'label'       => __('选择国家'),
        'options'     => $countries,
        'required'    => true, // 根据需求设置是否必填
    ));
    
    // 输出州/省选择字段（初始为空）
    echo '<div id="custom_state_field" class="digits-form-field">';
    echo '<h3>' . __('州/省') . '</h3>';
    woocommerce_form_field('custom_state', array(
        'type'        => 'select',
        'class'       => array('woocommerce-select', 'digits-input'),
        'label'       => __('选择州/省'),
        'options'     => array('' => __('请先选择国家')),
        'required'    => true,
    ));
    echo '</div></div>';
    
    // 添加AJAX联动脚本
    ?>
    <script>
        jQuery(document).ready(function($) {
            // 监听国家选择变化
            $('select[name="custom_country"]').on('change', function() {
                const selectedCountry = $(this).val();
                $.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    type: 'POST',
                    data: {
                        action: 'fetch_woocommerce_states',
                        country_code: selectedCountry
                    },
                    success: function(response) {
                        const stateSelect = $('select[name="custom_state"]');
                        stateSelect.empty();
                        
                        const states = JSON.parse(response);
                        if (Object.keys(states).length > 0) {
                            stateSelect.append('<option value=""><?php _e('选择州/省'); ?></option>');
                            $.each(states, (code, name) => {
                                stateSelect.append(`<option value="${code}">${name}</option>`);
                            });
                        } else {
                            stateSelect.append('<option value=""><?php _e('无可用州/省'); ?></option>');
                        }
                    }
                });
            });
        });
    </script>
    <?php
}

// AJAX接口：根据国家代码获取州/省列表
add_action('wp_ajax_fetch_woocommerce_states', 'fetch_woocommerce_states');
add_action('wp_ajax_nopriv_fetch_woocommerce_states', 'fetch_woocommerce_states');
function fetch_woocommerce_states() {
    if (!class_exists('WC_Countries') || !isset($_POST['country_code'])) {
        wp_send_json(json_encode([]));
    }
    
    $country_code = sanitize_text_field($_POST['country_code']);
    $countries_obj = new WC_Countries();
    $states = $countries_obj->get_states($country_code);
    
    wp_send_json(json_encode($states));
    wp_die();
}

2. 使用说明 #

• 通过WPCode插件添加时，选择PHP代码片段类型，触发条件选择在网站前端运行，或更精准的仅在登录/注册页面运行。
• 若Digits版本不同，钩子digits_register_form可能有变化，可查看Digits插件源码确认最新的注册表单钩子。
• 代码中添加了digits-form-field和digits-input类，可让自定义字段和Digits原有表单样式保持一致。
• 确保WordPress的AJAX功能正常，未被主题或其他插件禁用。

内容的提问来源于stack exchange，提问作者Devil mind