Botiga主题Woocommerce结账页政策复选框显示异常求助

问题核心 #

你添加的自定义隐私政策复选框无法显示，根源是生成的<input>标签重复包含了input-checkbox类，触发了Botiga主题的样式冲突逻辑；而添加label_class_disabled会绕过主题的样式绑定，导致显示原生默认样式。

解决方案：修改PHP代码去重类名并匹配主题样式 #

下面是调整后的代码，通过过滤器移除重复类名，同时确保字段完全继承Botiga主题的复选框样式：

// 在结账页条款前添加隐私政策复选框
add_action( 'woocommerce_checkout_before_terms_and_conditions', 'add_privacy_policy_checkout_checkbox' );
function add_privacy_policy_checkout_checkbox() {
    woocommerce_form_field( 'privacy_policy_agree', array(
        'type'          => 'checkbox',
        'class'         => array('form-row privacy'),
        'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'required'      => true,
        'label'         => sprintf( __( '我同意<a href="%s">隐私政策</a>', 'woocommerce' ), get_permalink( get_option( 'wp_page_for_privacy_policy' ) ) ),
    ), WC()->checkout->get_value( 'privacy_policy_agree' ) );
}

// 移除自定义复选框的重复类名
add_filter( 'woocommerce_form_field_args', 'fix_duplicate_input_checkbox_class', 10, 3 );
function fix_duplicate_input_checkbox_class( $args, $key, $value ) {
    if ( $key === 'privacy_policy_agree' && isset( $args['input_class'] ) ) {
        // 对input_class数组去重，移除重复的input-checkbox
        $args['input_class'] = array_unique( $args['input_class'] );
    }
    return $args;
}

// 验证复选框必填
add_action( 'woocommerce_checkout_process', 'privacy_policy_checkout_validation' );
function privacy_policy_checkout_validation() {
    if ( ! isset( $_POST['privacy_policy_agree'] ) ) {
        wc_add_notice( __( '请同意我们的隐私政策。', 'woocommerce' ), 'error' );
    }
}

代码说明 #

1. 添加复选框：add_privacy_policy_checkout_checkbox函数明确指定label_class和input_class为Botiga主题默认复选框的样式类，确保字段结构和原生条款复选框一致。
2. 去重类名：fix_duplicate_input_checkbox_class过滤器针对自定义字段的类数组去重，避免input-checkbox重复出现导致的样式冲突。
3. 必填验证：privacy_policy_checkout_validation函数确保用户必须勾选该复选框才能完成结账，符合合规要求。

验证方法 #

替换代码后刷新结账页，检查HTML结构：

• 复选框<input>的class应为woocommerce-form__input woocommerce-form__input-checkbox input-checkbox（无重复）
• 对应<label>的class应为woocommerce-form__label woocommerce-form__label-for-checkbox checkbox
  此时复选框会自动匹配Botiga主题的样式，无需额外CSS调整。

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