需求：实现WooCommerce将配送地址复制到账单地址功能

嘿，这个需求很合理——毕竟你的顾客大多是送花给别人，先填收花人（配送）信息，再复制到账单（自己）信息才更顺。下面是一步步实现的方案，完全基于子主题修改，不会影响后续WooCommerce或父主题的更新：

步骤1：在结账页面添加复制控件 #

打开你已经复制到子主题的form-checkout.php文件，找到配送字段组的结束位置（通常是</div><!-- .woocommerce-shipping-fields -->这行代码的上方），插入以下代码添加一个复选框：

<div class="woocommerce-shipping-to-billing-wrapper" style="margin: 1.5em 0;">
    <label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
        <input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" id="shipping-to-billing" />
        <span><?php esc_html_e( '将配送信息复制到账单地址', 'your-theme' ); ?></span>
    </label>
</div>

你可以调整style里的样式，或者用主题的CSS类来匹配现有风格；文本域your-theme可以换成你主题的实际文本域，或者直接写固定文字。

步骤2：添加JavaScript处理复制逻辑 #

我们需要写一段JS来监听复选框的状态，把配送字段的值同步到账单字段。

2.1 注册自定义脚本 #

打开子主题的functions.php文件，添加以下代码来注册并加载脚本（只在结账页面加载，避免不必要的性能消耗）：

add_action( 'wp_enqueue_scripts', 'custom_shipping_to_billing_script' );
function custom_shipping_to_billing_script() {
    // 仅在结账页面（非订单完成等端点）加载
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        wp_enqueue_script(
            'shipping-to-billing',
            get_stylesheet_directory_uri() . '/js/shipping-to-billing.js',
            array( 'jquery' ), // 依赖WooCommerce默认加载的jQuery
            wp_get_theme()->get( 'Version' ),
            true // 在页面底部加载
        );
    }
}

2.2 编写复制逻辑脚本 #

在子主题文件夹里创建js目录，然后新建shipping-to-billing.js文件，写入以下代码：

jQuery(document).ready(function($) {
    // 监听复选框的勾选/取消事件
    $('#shipping-to-billing').on('change', function() {
        if (this.checked) {
            // 定义配送字段到账单字段的映射关系
            const fieldPairs = [
                'first_name', 'last_name', 'company',
                'address_1', 'address_2', 'city',
                'postcode', 'country', 'state',
                'phone', 'email'
            ];

            // 遍历字段，复制值
            fieldPairs.forEach(field => {
                const $shippingField = $('#shipping_' + field);
                const $billingField = $('#billing_' + field);

                if ($shippingField.length && $billingField.length) {
                    // 处理下拉选择框（如国家、州），需要触发change事件更新动态字段
                    if ($shippingField.is('select')) {
                        $billingField.val($shippingField.val()).trigger('change');
                    } else {
                        $billingField.val($shippingField.val());
                    }
                }
            });

            // 触发WooCommerce的结账更新事件，确保所有动态逻辑生效
            $('body').trigger('update_checkout');
        }

        // 【可选】如果取消勾选时需要清空账单字段，取消下面的注释
        /* else {
            const fieldPairs = [
                'first_name', 'last_name', 'company',
                'address_1', 'address_2', 'city',
                'postcode', 'country', 'state',
                'phone', 'email'
            ];
            fieldPairs.forEach(field => {
                $('#billing_' + field).val('').trigger('change');
            });
            $('body').trigger('update_checkout');
        } */
    });
});

步骤3：测试与调整 #

1. 保存所有修改后，清空网站缓存（如果用了缓存插件）。
2. 进入结账页面，先填写配送信息，勾选“将配送信息复制到账单地址”复选框，检查账单字段是否自动填充。
3. 测试不同国家的情况：比如选择美国，配送州字段会显示，勾选后账单的州字段也应该自动显示并填充对应值。
4. 如果你的店铺有自定义字段（比如额外的地址字段），只需要把字段名添加到fieldPairs数组里即可。

额外注意事项 #

• 所有修改都在子主题中进行，避免WooCommerce或父主题更新时丢失代码。
• 如果你的主题已经有自定义的结账样式，可以修改步骤1中的HTML结构，用主题的现有CSS类来匹配风格。
• 如果遇到字段不生效的情况，检查字段ID是否正确（可以通过浏览器开发者工具查看输入框的id属性）。

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