WooCommerce 产品详情页自定义 Tab 内容（如添加“售后服务”等）实用指南

在 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 内容，商家可以更精准地传达品牌价值、售后保障与产品服务信息，为用户提供更清晰、更可信的购物体验。不用插件，几行代码就可以轻松扩展产品详情页内容，实现页面个性化，提升转化率和客户满意度。

需要工程师帮你判断？

把症状、错误提示和最近改动发过来。

我们先判断风险、可能原因和安全下一步，再决定是否需要登录后台或服务器。

开始初诊