WooCommerce变体自定义字段HTML样式无法正常显示问题求助

核心问题 #

你的代码存在两个关键问题，导致HTML标签被转义成实体字符输出：

1. 保存字段时错误使用esc_attr()：esc_attr()是用于转义HTML属性内容的工具，会把<、>、"等字符转换成<、>这类HTML实体，直接破坏了你输入的HTML标签结构。
2. 保存逻辑存在错误判断：第二个字段的保存判断条件误用了isset( $cage_code )，应该对应自身的字段变量，否则可能导致字段无法正确保存。

修复步骤 #

1. 修正字段保存函数 #

将保存时的esc_attr()替换为wp_kses_post()——这个函数会保留安全的HTML标签（如<div>、<a>、<table>等），同时过滤危险代码，是保存富文本内容的标准做法，同时修正错误的判断条件。

修改后的保存函数代码：

/* Save custom field on product variation save */
add_action( 'woocommerce_save_product_variation', 'magazine_save_custom_field_variations', 10, 2 );
function magazine_save_custom_field_variations( $variation_id, $i ) {
    $cage_code = $_POST['cage_code'][$i];
    if ( isset( $cage_code ) ) update_post_meta( $variation_id, 'cage_code', wp_kses_post( $cage_code ) );

    $cage_code_part_number = $_POST['cage_code_part_number'][$i];
    if ( isset( $cage_code_part_number ) ) update_post_meta( $variation_id, 'cage_code_part_number', wp_kses_post( $cage_code_part_number ) );

    $cage_code_niin_nsn_number = $_POST['cage_code_niin_nsn_number'][$i];
    if ( isset( $cage_code_niin_nsn_number ) ) update_post_meta( $variation_id, 'cage_code_niin_nsn_number', wp_kses_post( $cage_code_niin_nsn_number ) );
}

2. 确保输出时正确渲染HTML #

输出自定义字段内容时，直接使用wp_kses_post()再次过滤（双重保障安全），确保HTML标签正常渲染。同时补充原代码中未输出的另外两个字段：

修改后的输出代码片段：

// Output
echo '<div class="woo_cage_code_info_tab_content woo_cage_code_info_tab_content-' . $variation_id .'">';

if ( $cage_code ) {
    echo '<p>' . wp_kses_post( $cage_code ) . '</p>';
}

if ( $cage_code_part_number ) {
    echo wp_kses_post( $cage_code_part_number );
}

if ( $cage_code_niin_nsn_number ) {
    echo wp_kses_post( $cage_code_niin_nsn_number );
}

echo '</div>';

3. 可选优化：后台编辑器支持HTML可视化编辑 #

如果需要在后台更方便地编辑HTML内容，可以把woocommerce_wp_textarea_input替换为WordPress内置的编辑器，比如：

// 替换原有textarea输入框，以长描述字段为例
wp_editor(
    get_post_meta( $variation->ID, 'cage_code_niin_nsn_number', true ),
    'cage_code_niin_nsn_number[' . $loop . ']',
    array(
        'textarea_name' => 'cage_code_niin_nsn_number[' . $loop . ']',
        'textarea_rows' => 6,
        'teeny'         => true, // 启用精简版编辑器，适合快速编辑
    )
);

验证修复 #

修改代码后，重新编辑产品变体的自定义字段，输入包含HTML的内容（比如<table><tr><td>测试表格内容</td></tr></table>），保存后刷新前端页面，即可看到样式化的HTML内容正常显示。

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