通过autocomplete=new-password关闭WooCommerce结账字段自动填充

我们的WooCommerce结账页面遇到了一个问题：开启浏览器自动填充的用户结账时，地址1和地址2会出现重复或者值不一致的情况。就算启用了谷歌API辅助自动填充，也只能改善一部分，没法彻底解决。

检查页面元素发现，结账页的每个输入字段已经设置了autocomplete=off，但这个设置根本没用。我尝试参考网上的方案，把特定字段的autocomplete属性改成new-password（据说现代浏览器会把这个识别成密码字段，从而不自动填充），但写的代码完全没效果：

/* Disable autofill address */

add_filter( 'woocommerce_form_field', 'change_autofill', 1, 1 );

function change_autofill( $field) {

$field = str_replace('autocomplete="billing_address_1"', 'autocomplete="new-password"', $field);
return $field; 

}

问题原因分析 #

• 原代码的钩子优先级（1）太低，很可能被其他修改字段的钩子给覆盖了
• 字符串替换的目标值不对——当前字段的autocomplete属性是autocomplete="off"，不是autocomplete="billing_address_1"
• 只处理了billing_address_1一个字段，没覆盖账单地址2、收货地址1和收货地址2这些可能出问题的字段

可行解决方案 #

方案1：调整钩子优先级+替换正确属性值 #

修改代码，提高钩子优先级，同时针对当前的autocomplete="off"进行替换，覆盖所有需要处理的地址字段：

/**
 * 修改结账地址字段的autocomplete属性，禁用浏览器自动填充
 */
add_filter( 'woocommerce_form_field', 'override_checkout_autocomplete_attributes', 999, 4 );
function override_checkout_autocomplete_attributes( $field, $key, $args, $value ) {
    // 定义需要禁用自动填充的字段列表
    $target_fields = array(
        'billing_address_1',
        'billing_address_2',
        'shipping_address_1',
        'shipping_address_2'
    );

    // 只处理目标字段
    if ( in_array( $key, $target_fields ) ) {
        // 替换autocomplete属性为new-password
        $field = str_replace( 'autocomplete="off"', 'autocomplete="new-password"', $field );
        // 额外加个readonly属性，聚焦时移除——部分浏览器会跳过只读字段的自动填充，增强兼容性
        $field = str_replace( '<input', '<input readonly onfocus="this.removeAttribute(\'readonly\')"', $field );
    }

    return $field;
}

代码说明：

• 把钩子优先级设为999，确保在其他修改字段的钩子之后执行，避免被覆盖
• 明确列出所有需要处理的地址字段，包括账单和收货的地址1、地址2
• 替换autocomplete="off"为autocomplete="new-password"，匹配当前字段的实际属性值
• 添加readonly属性并在聚焦时移除，进一步降低浏览器自动填充的概率

方案2：直接修改字段的autocomplete参数（更可靠） #

通过woocommerce_checkout_fields钩子直接修改字段的autocomplete设置，比字符串替换更稳定，不容易出错：

/**
 * 直接设置结账地址字段的autocomplete属性
 */
add_filter( 'woocommerce_checkout_fields', 'set_checkout_fields_autocomplete' );
function set_checkout_fields_autocomplete( $fields ) {
    // 处理账单地址字段
    $fields['billing']['billing_address_1']['autocomplete'] = 'new-password';
    $fields['billing']['billing_address_2']['autocomplete'] = 'new-password';
    
    // 处理收货地址字段（如果你的店铺启用了收货地址功能）
    $fields['shipping']['shipping_address_1']['autocomplete'] = 'new-password';
    $fields['shipping']['shipping_address_2']['autocomplete'] = 'new-password';

    return $fields;
}

代码说明：

• 直接修改WooCommerce结账字段的autocomplete参数，不需要字符串替换，逻辑更清晰，也更可靠
• 分别设置账单和收货地址的对应字段，确保所有可能出问题的输入框都被覆盖

验证步骤 #

1. 把代码添加到主题的functions.php文件里，或者用自定义插件来添加
2. 刷新结账页面，用浏览器的开发者工具检查对应字段的autocomplete属性，确认已经变成new-password
3. 测试浏览器的自动填充功能，看看地址字段是不是不再被自动填充或者重复填充了

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