您所在位置:
我发现一个不寻常的现象,那就是在 Business Bloomer 上分享了多年的教程之后,却没有在单个产品页面上创建自定义产品标签的片段!
我的意思是,我们不久前已经看到过一个关于在自定义标签片段中创建相关产品的示例,但在这里,我想集中介绍添加自定义标签、为其命名和标题、有条件地显示(例如只显示特定产品类别)以及确保 “滚动到标签 ”在 URL 包含锚标签时有效的实际功能。
请慢用!

PHP 代码段: 创建自定义产品标签 @ WooCommerce 单个产品页面
add_filter( 'woocommerce_product_tabs', 'bbloomer_add_product_tab', 9999 ); function bbloomer_add_product_tab( $tabs ) { $tabs['docs'] = array( 'title' => __( 'Docs', 'woocommerce' ), // TAB TITLE 'priority' => 50, // TAB SORTING (DESC 10, ADD INFO 20, REVIEWS 30) 'callback' => 'bbloomer_docs_product_tab_content', // TAB CONTENT CALLBACK ); return $tabs; } function bbloomer_docs_product_tab_content() { global $product; echo 'Whatever content for ' . $product->get_name(); }
奖励 1:有条件地显示自定义产品标签 @ WooCommerce 单个产品页面
例如,您可能只想在当前产品属于 “插件 ”类别时显示自定义选项卡。只需将前面的声明包在 has_term 条件中即可:
function bbloomer_add_product_tab( $tabs ) { if ( has_term( 'plugins', 'product_cat', wc_get_product()->get_id() ) ) { $tabs['docs'] = array( 'title' => __( 'Docs', 'woocommerce' ), // TAB TITLE 'priority' => 50, // TAB SORTING (DESC 10, ADD INFO 20, REVIEWS 30) 'callback' => 'bbloomer_docs_product_tab_content', // TAB CONTENT ); } return $tabs; }
奖励 2:如果 URL 包含锚标签,则滚动到自定义产品标签 @ WooCommerce 单个产品页面
如果您将用户重定向到 example.com/whatever-product/#tab-docs,其中 tab-docs 是全新产品标签页的锚标签,那么以下编辑将允许您在加载时滚动到该标签页。
遗憾的是,默认的 WooCommerce JS 没有为自定义标签页提供此功能,因此我们需要自己编写代码:
高级插件: WooCommerce 产品标签
如果您不想编写代码或编辑 PHP,我还研究了一些插件,它们可以让您实现与上述代码片段相同的功能。我发现 Barn2 的 WooCommerce Product Tabs 插件就有这样的功能,而且还不止这些。
这个功能强大的插件可以让你在单个产品页面上添加数量不限的额外标签。与代码片段一样,您可以在每个标签中添加任何您喜欢的内容。它还有一些额外的功能,比如可以隐藏或重命名默认选项卡,以及为每个选项卡添加图标:
