Woocommerce结算页账单/配送地址字段独立自定义修改不生效问题

需求说明 #

账单区域调整要求 #

• 修改address 2的placeholder内容
• 修改address 2的label文本
• 将address 1的class设置为50%宽度
• 将address 2的class设置为50%宽度
• 将city的class设置为50%宽度
• 将state的class设置为50%宽度
• 将postcode的class设置为50%宽度
• 将phone的class设置为50%宽度
• 移除address 2的reader class

配送地址区域调整要求 #

• 修改address 2的placeholder和label文本
• 将address 1的class设置为50%宽度
• 将address 2的class设置为50%宽度
• 将state的class设置为50%宽度
• 将postcode的class设置为50%宽度
• 移除address 2的文本阅读器class

原有代码问题 #

1. 混用了全局地址字段钩子和结算页字段钩子，全局钩子的设置会覆盖结算页钩子的个性化配置，导致两个区域的样式无法独立生效
2. 代码中$domain变量未声明，会导致多语言翻译功能失效
3. 没有单独针对配送字段做独立配置，全局地址配置会同时作用于账单和配送区域

修复方案 #

直接使用woocommerce_checkout_fields钩子即可分别操作账单、配送两个分组的字段，不需要调用全局地址钩子，避免配置冲突，修复后的代码如下：

// 自定义WooCommerce结算页字段
add_filter( 'woocommerce_checkout_fields' , 'jm_custom_checkout_fields', 20, 1 );
function jm_custom_checkout_fields( $fields ){
    // 替换为你自己的主题/插件文本域
    $text_domain = 'your-text-domain';

    // ========== 账单区域配置 ==========
    // 修改address 2的placeholder和label
    $fields['billing']['billing_address_2']['placeholder'] = __('Apt #, Floor, etc', $text_domain);
    $fields['billing']['billing_address_2']['label'] = __('Apt #, Floor, etc', $text_domain);
    // 设置字段宽度class
    $fields['billing']['billing_address_1']['class'] = array('form-row-first'); // 50%宽度 左
    $fields['billing']['billing_address_2']['class'] = array('form-row-last'); // 50%宽度 右
    $fields['billing']['billing_city']['class'] = array('form-row-first'); // 50%宽度 左
    $fields['billing']['billing_state']['class'] = array('form-row-last'); // 50%宽度 右
    $fields['billing']['billing_postcode']['class'] = array('form-row-first'); // 50%宽度 左
    $fields['billing']['billing_phone']['class'] = array('form-row-last'); // 50%宽度 右
    // 移除address 2的reader class
    $fields['billing']['billing_address_2']['label_class'] = array();

    // ========== 配送区域配置 ==========
    // 修改address 2的placeholder和label
    $fields['shipping']['shipping_address_2']['placeholder'] = __('Apt #, Floor, etc', $text_domain);
    $fields['shipping']['shipping_address_2']['label'] = __('Apt #, Floor, etc', $text_domain);
    // 设置字段宽度class
    $fields['shipping']['shipping_address_1']['class'] = array('form-row-first'); // 50%宽度 左
    $fields['shipping']['shipping_address_2']['class'] = array('form-row-last'); // 50%宽度 右
    $fields['shipping']['shipping_state']['class'] = array('form-row-first'); // 50%宽度 左
    $fields['shipping']['shipping_postcode']['class'] = array('form-row-last'); // 50%宽度 右
    // 移除address 2的reader class
    $fields['shipping']['shipping_address_2']['label_class'] = array();

    return $fields;
}

配置说明 #

• form-row-first和form-row-last是WooCommerce内置的样式类，自带50%宽度、左右边距和自适应换行逻辑，不需要额外写CSS
• 如果公共配置需要复用，可以把address 2的设置抽成公共函数，减少重复代码
• 代码中your-text-domain需要替换为你自己的主题或插件的文本域，不需要多语言的话可以直接删掉这个参数，写为__('Apt #, Floor, etc')

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