WooCommerce插件开发：自定义地址数据从PHP传至JS的问题

我明白你现在卡在了PHP到JS的数据传递、地址UI渲染和表单字段填充这几个核心环节，下面一步步帮你拆解解决：

第一步：PHP端安全传递地址数据到JS #

首先要从自定义文章类型（假设你的类型slug是customer_address）拉取地址数据，然后用WordPress官方推荐的wp_localize_script方法把数据注入前端——这比直接echo JS变量更规范安全。

// 注册并传递数据到JS脚本
add_action('wp_enqueue_scripts', 'enqueue_address_selector_assets');
function enqueue_address_selector_assets() {
    // 加载自定义JS文件，依赖jQuery（WooCommerce本身也依赖jQuery）
    wp_enqueue_script('wc-address-selector', plugin_dir_url(__FILE__) . 'js/address-selector.js', array('jquery'), '1.0.0', true);

    // 拉取当前登录用户的自定义地址
    $address_query = new WP_Query(array(
        'post_type' => 'customer_address',
        'posts_per_page' => -1,
        'post_status' => 'publish',
        'author' => get_current_user_id(),
        'no_found_rows' => true // 优化查询，不需要分页计数
    ));

    // 整理成JS可直接使用的结构化数据
    $formatted_addresses = array();
    if ($address_query->have_posts()) {
        while ($address_query->have_posts()) {
            $address_query->the_post();
            $formatted_addresses[] = array(
                'id' => get_the_ID(),
                'nickname' => get_the_title(), // 地址昵称，比如"家"、"公司"
                'street' => get_post_meta(get_the_ID(), '_shipping_address_1', true),
                'city' => get_post_meta(get_the_ID(), '_shipping_city', true),
                'state' => get_post_meta(get_the_ID(), '_shipping_state', true),
                'postcode' => get_post_meta(get_the_ID(), '_shipping_postcode', true),
                'country' => get_post_meta(get_the_ID(), '_shipping_country', true)
            );
        }
        wp_reset_postdata();
    }

    // 把数据传递到JS，前端可以通过`AddressSelectorData`全局变量访问
    wp_localize_script('wc-address-selector', 'AddressSelectorData', array(
        'addresses' => $formatted_addresses,
        // 映射WooCommerce配送字段的选择器
        'shippingFieldSelectors' => array(
            'street' => '#shipping_address_1',
            'city' => '#shipping_city',
            'state' => '#shipping_state',
            'postcode' => '#shipping_postcode',
            'country' => '#shipping_country'
        )
    ));
}

第二步：在结账页面渲染地址选择UI #

用WooCommerce的钩子在配送地址区域上方插入地址选择控件，比如下拉菜单或者地址卡片列表：

// 在结账页面插入地址选择器
add_action('woocommerce_before_shipping_address', 'render_saved_address_selector');
function render_saved_address_selector() {
    if (!is_user_logged_in()) return; // 仅对登录用户显示

    $address_count = count(get_posts(array(
        'post_type' => 'customer_address',
        'author' => get_current_user_id(),
        'posts_per_page' => 1
    )));

    if ($address_count === 0) return; // 无保存地址时不显示
    ?>
    <div class="saved-address-selector">
        <h4>选择已保存的收货地址</h4>
        <select id="saved-shipping-address">
            <option value="">请选择地址</option>
            <?php
            $addresses = get_posts(array(
                'post_type' => 'customer_address',
                'author' => get_current_user_id(),
                'posts_per_page' => -1
            ));
            foreach ($addresses as $addr) {
                echo sprintf('<option value="%d">%s</option>', esc_attr($addr->ID), esc_html(get_the_title($addr)));
            }
            ?>
        </select>
        <button type="button" id="add-new-shipping-address" class="button alt">添加新地址</button>
    </div>
    <?php
}

第三步：JS端处理选择事件与表单填充 #

在你的address-selector.js文件中，监听地址选择操作，把选中的地址数据填充到对应配送字段，同时支持多地址添加逻辑：

jQuery(document).ready(function($) {
    // 监听地址选择下拉框
    $('#saved-shipping-address').on('change', function() {
        const selectedAddrId = $(this).val();
        if (!selectedAddrId) return;

        // 从全局变量中找到对应地址
        const targetAddress = AddressSelectorData.addresses.find(addr => addr.id == selectedAddrId);
        if (!targetAddress) return;

        // 填充配送字段，同时触发change事件（WooCommerce需要这个事件更新运费）
        const fieldMap = AddressSelectorData.shippingFieldSelectors;
        $(fieldMap.street).val(targetAddress.street).trigger('change');
        $(fieldMap.city).val(targetAddress.city).trigger('change');
        $(fieldMap.state).val(targetAddress.state).trigger('change');
        $(fieldMap.postcode).val(targetAddress.postcode).trigger('change');
        $(fieldMap.country).val(targetAddress.country).trigger('change');
    });

    // 处理"添加新地址"按钮（切换默认配送表单显示）
    $('#add-new-shipping-address').on('click', function() {
        $('.woocommerce-shipping-fields').toggleClass('hidden');
    });

    // 多地址支持：克隆配送字段实现多地址添加
    $(document).on('click', '.add-another-address', function(e) {
        e.preventDefault();
        const originalFields = $('.woocommerce-shipping-fields').first().clone();
        // 重置克隆字段的输入值
        originalFields.find('input, select').val('');
        // 添加删除按钮
        originalFields.append('<button type="button" class="remove-address button">删除此地址</button>');
        // 插入到页面
        $(this).closest('.saved-address-selector').after(originalFields);
    });

    // 删除克隆的地址字段
    $(document).on('click', '.remove-address', function() {
        $(this).closest('.woocommerce-shipping-fields').remove();
    });
});

几个关键注意点 #

• 安全防护：所有输出到前端的内容都要用esc_attr、esc_html转义，避免XSS攻击
• 触发change事件：WooCommerce的配送字段依赖change事件更新运费计算，填充后必须触发
• 用户权限：确保只拉取当前登录用户的地址，禁止跨用户访问
• 字段匹配：根据你实际存储地址的自定义字段键名，调整get_post_meta的参数

内容的提问来源于stack exchange，提问作者Spencer Phillips