WooCommerce 自定义产品循环中展示有内容的产品标签页方法

你可以直接调用WooCommerce原生的标签过滤逻辑获取有效标签，无需调用带冗余内容的全局钩子，实现逻辑和产品详情页完全一致，会自动排除无内容的标签。

代码实现 #

将你循环中<!-- Show Tabs of Product here -->注释位置替换为如下代码即可：

<?php
// 获取当前循环内的产品对象
$current_product = wc_get_product(get_the_ID());
if ($current_product) {
    // 获取经过系统过滤的有效标签数组，自动排除无内容的标签
    $product_tabs = apply_filters('woocommerce_product_tabs', []);

    if (!empty($product_tabs)) : ?>
    <div class="custom-product-tabs">
        <!-- 标签导航栏 -->
        <ul class="tabs-list">
            <?php foreach ($product_tabs as $tab_key => $tab_item) : ?>
            <li class="tab-item <?php echo esc_attr($tab_key); ?>-tab">
                <a href="#tab-<?php echo esc_attr($tab_key); ?>">
                    <?php echo apply_filters("woocommerce_product_{$tab_key}_tab_title", esc_html($tab_item['title']), $tab_key); ?>
                </a>
            </li>
            <?php endforeach; ?>
        </ul>
        <!-- 标签内容区域 -->
        <?php foreach ($product_tabs as $tab_key => $tab_item) : ?>
        <div class="tab-content" id="tab-<?php echo esc_attr($tab_key); ?>">
            <?php 
            // 执行标签对应的回调方法输出内容
            if (isset($tab_item['callback']) && is_callable($tab_item['callback'])) {
                call_user_func($tab_item['callback'], $tab_key, $tab_item);
            }
            ?>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif;
}
?>

注意说明 #

• 上述代码完全复用WooCommerce详情页的标签判断规则，无评价、无额外说明内容的标签会自动隐藏，无需额外做条件判断
• 第三方插件添加的自定义产品标签也会按原有规则正常展示/隐藏
• 可通过外层custom-product-tabs类名自定义样式，避免和详情页标签样式冲突
• 如果你只需要展示标签标题不需要输出内容，删除标签内容区域的循环代码段即可
• 之前调用do_action( 'woocommerce_after_single_product_summary' )出现冗余内容，是因为该钩子除了标签外还默认挂载了相关产品、推荐产品等输出模块，直接调取标签数组可以避免冗余输出

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