共计 2403 个字符,预计需要花费 7 分钟才能阅读完成。
在使用 WooCommerce 搭建 WordPress 电商网站时,你可能会注意到:
每个产品详情页默认都会显示三个标签页 (Tabs):
- 产品描述 (
Description)
- 其他信息 (
Additional Information)
- 用户评价 (
Reviews)
虽然这些标签可以帮助用户了解产品,但对于某些简约型商店或单一产品页而言,这些信息可能显得多余。
比如:
你只想展示一段简短的产品介绍,不希望出现 「重量、尺寸」 等自动生成的 「其他信息」;
或者你不希望开启用户评价功能,让页面更简洁、专注于转化。
本文将教你如何 在 WooCommerce 产品详情页中删除 「其他信息」 和 「用户评价」 标签,让你的产品页面更简洁、美观。
WooCommerce 提供了一个非常实用的过滤器 woocommerce_product_tabs,我们可以通过它自由地移除或修改任何产品详情页标签。
你只需在主题的 functions.php 文件或自定义插件中添加以下代码:
add_filter('woocommerce_product_tabs', 'haozhuti_remove_product_tabs', 98);
function haozhuti_remove_product_tabs($tabs) {
unset($tabs['additional_information']);
unset($tabs['reviews']);
return $tabs;
}
- 页面中不再显示 「其他信息」 与 「用户评价」;
- 仅保留 「描述」 标签;
- 页面更简洁,更符合定制化主题的视觉风格。
有时你可能希望 彻底移除标签系统,让产品页面直接显示描述文本。
这种方式非常适合:
- 单页产品销售网站;
- 使用自定义页面构建器 (如 Elementor) 时。
将以下代码添加到 functions.php 中:
remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10);
add_action('woocommerce_after_single_product_summary', 'haozhuti_show_description_only', 10);
function haozhuti_show_description_only() {the_content();
}
- 不再显示 Tabs 样式;
- 页面只展示主要产品内容;
- 对简洁风或营销型落地页特别友好。
如果你暂时不方便修改代码,也可以用 CSS 来隐藏这些标签。
虽然这种方式无法从结构上移除标签 (仍会被搜索引擎抓取),但可以快速达到视觉隐藏效果:
.woocommerce-tabs .wc-tab#tab-additional_information,
.woocommerce-tabs .wc-tab#tab-reviews,
.woocommerce-tabs ul.tabs li.additional_information_tab,
.woocommerce-tabs ul.tabs li.reviews_tab {display: none !important;
}
此方法只是 「隐藏」,并未真正删除内容。对 SEO 影响较小,但仍建议使用 PHP 代码的方式实现。
如果你希望保留用户评价,只隐藏 「其他信息」 这一项,可以这样做:
add_filter('woocommerce_product_tabs', 'haozhuti_remove_additional_tab', 98);
function haozhuti_remove_additional_tab($tabs) {unset($tabs['additional_information']);
return $tabs;
}
这样,「产品描述」 和 「用户评价」 仍会显示,页面信息保持完整。
如果你的商店中不同分类的产品需要显示不同的标签,可以加上条件判断:
add_filter('woocommerce_product_tabs', 'haozhuti_conditional_remove_tabs', 98);
function haozhuti_conditional_remove_tabs($tabs) {global $product;
if (has_term('accessories', 'product_cat', $product->get_id())) {unset($tabs['additional_information']);
unset($tabs['reviews']);
}
return $tabs;
}
这样可以实现更灵活的显示逻辑,比如:
- 「主产品」 保留评价;
- 「配件类产品」 隐藏所有附加信息。
| 需求 |
解决方法 |
| 隐藏 「其他信息」 和 「用户评价」 |
使用 woocommerce_product_tabs 过滤器 |
| 仅显示描述内容 |
移除 WooCommerce 默认 Tabs 输出 |
| 临时隐藏标签 |
使用 CSS 隐藏 |
| 按分类控制显示 |
条件判断控制 Tabs 输出 |
通过以上几种方法,你可以完全掌控 WooCommerce 产品详情页的显示逻辑。
无论是想打造极简的销售页面,还是希望按产品类型灵活展示信息,都能轻松实现。
这种优化不仅能提升页面美观度,还能让用户在浏览时更聚焦于购买决策,从而提高转化率。