在 WooCommerce 商店中，产品详情页默认包含“描述”、“额外信息”、“评论”等 Tab（标签页）。但在实际运营中，商家经常需要添加更多符合业务需求的自定义内容，例如：
售后服务说明
品牌故事
配送与退货政策
使用指南或产品视频
本文会介绍如何使用代码的方式，为 WooCommerce 产品详情页添加一个新的自定义 Tab（例如“售后服务”），并实现灵活管理。
一、自定义 Tab 的实现方式
WooCommerce 提供了专门的过滤器钩子 woocommerce_product_tabs，用来修改产品详情页的标签页结构。只需要使用这个钩子添加新的标签页就可以。
示例代码：添加“售后服务”Tab
把下面的代码添加到主题的 functions.php 文件中：
add_filter( ‘woocommerce_product_tabs’, ‘custom_add_after_sales_tab’ );
function custom_add_after_sales_tab( $tabs ) {
$tabs[‘after_sales’] = array(
‘title’ => ‘售后服务’,
‘priority’ => 50, // 控制显示顺序
‘callback’ => ‘custom_after_sales_tab_content’
);
return $tabs;
}
function custom_after_sales_tab_content() {
echo ‘<h2>售后服务说明</h2>’;
echo ‘<p>本店商品均享受7天无理由退货、30天质量问题包换服务。更多详情请联系客服。</p>’;
}
二、自定义内容支持 HTML、图片、视频（用于显示说明或示例）
在 Gutenberg 编辑器中使用“代码”区块，
编辑文章时点击 + 添加新区块搜索“代码”或“Code”并插入
例如：
echo ‘<ul>
<li>支持7天无理由退货</li>
<li>30天免费换货保障</li>
<li>全国联保，提供正规发票</li>
</ul>’;
甚至可以插入嵌入式视频或图片，让页面更有吸引力：
echo ‘<img src=”https://yourdomain.com/wp-content/uploads/after-sales.jpg” alt=”售后服务”>’;
三、针对不同产品设置不同内容（进阶用法）
如果想让不同产品显示不同的售后服务内容，可以使用 get_the_ID() 或 $product->get_id() 获取当前产品 ID 并做判断：
function custom_after_sales_tab_content() {
$product_id = get_the_ID();
if ( $product_id == 123 ) {
echo ‘<p>此产品享受12个月免费维修服务。</p>’;
} else {
echo ‘<p>常规售后政策适用。</p>’;
}
}
四、隐藏默认的 Tab（如“额外信息”）
还可以顺便隐藏某些不想显示的默认 Tab，例如：
add_filter( ‘woocommerce_product_tabs’, ‘remove_unwanted_product_tabs’, 98 );
function remove_unwanted_product_tabs( $tabs ) {
unset( $tabs[‘additional_information’] ); // 额外信息
return $tabs;
}
五、常见问题解答
Q1：会影响后台设置吗？
不会。这个方法只作用于前端显示，后台商品编辑依旧保留所有字段。
Q2：多个 Tab 可以同时添加吗？
可以，重复添加多个数组结构就行。例如添加“品牌介绍”、“使用指南”等多个标签页。
Q3：主题更新会影响代码吗？
如果直接修改了主题的 functions.php，在主题更新时可能会被覆盖。建议使用子主题或 Code Snippets 插件来管理这类功能性代码。
六、结论
通过自定义 WooCommerce 产品详情页的 Tab 内容，商家可以更精准地传达品牌价值、售后保障与产品服务信息，为用户提供更清晰、更可信的购物体验。不用插件，几行代码就可以轻松扩展产品详情页内容，实现页面个性化，提升转化率和客户满意度。