WordPress WooCommerce属性自定义列多余颜色方块移除求助

问题出在自定义列的内容输出方式，以及可能存在的插件/主题额外渲染逻辑，按以下步骤修改代码即可解决：

修改后的代码 #

function add_hex_code_column( $columns ) {
    unset($columns['hexcode']);  
    $columns['hexcode'] = 'Hex Code';
    return $columns;
}
add_filter( 'manage_edit-pa_vlove-color_columns', 'add_hex_code_column' );

function add_hex_code_column_content( $content, $column, $term_id  ) {
    if ( $column === 'hexcode' ) {
        // 直接获取十六进制值并返回，不使用echo
        $hex_code = get_term_meta( $term_id, 'st-color-swatch', true );
        // 处理字段结构，确保取到正确的十六进制值
        if ( is_array($hex_code) && isset($hex_code[0][0]) ) {
            $hex_code = $hex_code[0][0];
        }
        $content = '<span><strong>'. esc_html($hex_code) .'</strong></span>';
    }
    return $content;
}
add_filter( 'manage_pa_vlove-color_custom_column', 'add_hex_code_column_content', 20, 3 );

关键修改点说明 #

• 移除echo输出：manage_{taxonomy}_custom_column钩子要求回调函数返回内容而非直接echo，直接echo会导致内容与插件自动生成的颜色方块叠加显示。
• 调整优先级：将回调优先级从10改为20，确保我们的内容输出覆盖其他插件/主题对该列的默认渲染。
• 字段取值优化：增加对st-color-swatch字段结构的判断，同时用esc_html()转义输出，避免XSS风险。
• 简化逻辑：用if替代switch，更简洁地处理目标列。

如果修改后仍有颜色方块，可能是主题或颜色样本插件的CSS样式导致的，可以添加自定义CSS隐藏该元素：

/* 针对Hex Code列的颜色方块隐藏 */
.column-hexcode .st-color-swatch-element {
    display: none !important;
}

将这段CSS添加到WordPress后台的「外观」→「自定义」→「额外CSS」中即可。

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