如何在WooCommerce产品标签标题中使用HTML？PHP代码失效求助

这个问题很常见——WooCommerce默认会对产品标签的标题做HTML转义处理，所以你直接在woocommerce_product_tabs钩子里添加的HTML代码会被转成纯文本显示。下面给你两种靠谱的解决方法：

方法一：使用woocommerce_product_tab_title过滤器（推荐） #

这个过滤器专门用来修改产品标签的标题输出，我们可以针对你自定义的test_tab标签，跳过转义直接返回HTML内容：

// 首先添加自定义产品标签
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );
function woo_new_product_tab( $tabs ) {
    $tabs['test_tab'] = array(
        'title'     => __( 'Placeholder Title', 'woocommerce' ), // 这里的标题会被过滤器替换，随便填就行
        'priority'  => 50,
        'callback'  => 'woo_new_product_tab_content'
    );
    return $tabs;
}

// 允许自定义标签标题中的HTML
add_filter( 'woocommerce_product_tab_title', 'allow_html_in_test_tab_title', 10, 2 );
function allow_html_in_test_tab_title( $title, $tab_key ) {
    // 只针对我们的test_tab标签生效
    if ( 'test_tab' === $tab_key ) {
        return '<span>Hot</span> Title';
    }
    // 其他标签保持默认处理
    return $title;
}

// 自定义标签的内容回调函数（补上示例）
function woo_new_product_tab_content() {
    echo '<h2>Test Tab</h2>';
    echo '<p>This is some custom content for your new product tab!</p>';
}

方法二：修改WooCommerce标签模板（不推荐，主题更新会覆盖） #

如果你习惯直接修改模板文件，可以复制WooCommerce的tabs.php模板到你的主题目录下：

1. 找到WooCommerce插件目录里的templates/single-product/tabs/tabs.php文件
2. 复制这个文件到你的主题目录：your-theme/woocommerce/single-product/tabs/tabs.php
3. 修改文件中输出标题的部分，去掉默认的转义处理，直接输出标题：

原来的代码大概是这样：

<a href="#tab-<?php echo esc_attr( $tab_key ); ?>"><?php echo apply_filters( 'woocommerce_product_tab_title', $tab['title'], $tab_key ); ?></a>

你可以改成：

<a href="#tab-<?php echo esc_attr( $tab_key ); ?>"><?php echo $tab['title']; ?></a>

注意：这种方法会让所有标签的标题都允许HTML，存在一定安全风险，而且主题更新时如果覆盖了这个文件，你的修改会丢失，所以优先推荐方法一。

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