如何限制WooCommerce单品页产品标签的输出数量

嘿，我刚好折腾过类似的需求！WooCommerce的产品标签不像标题那样只用CSS就能搞定——毕竟要处理动态计数和展开交互，得结合PHP、CSS和JS来实现。下面分两种场景给你方案，对应你描述的需求：

场景1：限制最多显示5个标签，多余的隐藏+展开按钮 #

这应该是你说的“隐藏多余标签”的核心需求，步骤如下：

1. 用PHP修改标签输出结构 #

把这段代码加到你的主题functions.php文件里（或者自定义插件中，避免主题更新丢失）：

add_filter('woocommerce_product_tag_list', 'limit_product_tags_display', 10, 3);
function limit_product_tags_display($tag_list, $product, $args) {
    // 获取产品的所有标签
    $tags = $product->get_tags();
    $max_tags = 5; // 设置最多显示的标签数量
    $total_tags = count($tags);

    if ($total_tags <= $max_tags) {
        // 如果标签数量不超过限制，直接返回原列表
        return $tag_list;
    }

    // 拆分可见和隐藏的标签
    $visible_tags = array_slice($tags, 0, $max_tags);
    $hidden_tags = array_slice($tags, $max_tags);

    // 构建可见标签的HTML
    $visible_html = '';
    foreach ($visible_tags as $tag) {
        $visible_html .= sprintf('<a href="%s" class="tag-link">%s</a>', esc_url(get_tag_link($tag->term_id)), esc_html($tag->name));
    }

    // 构建隐藏标签的HTML
    $hidden_html = '';
    foreach ($hidden_tags as $tag) {
        $hidden_html .= sprintf('<a href="%s" class="tag-link hidden-tag">%s</a>', esc_url(get_tag_link($tag->term_id)), esc_html($tag->name));
    }

    // 拼接带展开按钮的容器
    $html = '<div class="product-tags-container">';
    $html .= $visible_html;
    $html .= '<span class="tags-expand-btn">...查看更多</span>';
    $html .= $hidden_html;
    $html .= '</div>';

    return $html;
}

2. CSS控制样式与隐藏 #

把这段CSS加到主题的自定义CSS面板或者style.css里：

/* 标签容器基础样式，可根据你的主题调整间距、字号 */
.product-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.tag-link {
    padding: 4px 8px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.tag-link:hover {
    background: #eee;
}

/* 隐藏多余标签 */
.hidden-tag {
    display: none;
}

/* 展开/收起按钮样式 */
.tags-expand-btn, .tags-collapse-btn {
    color: #007cba;
    cursor: pointer;
    font-size: 14px;
}

.tags-expand-btn:hover, .tags-collapse-btn:hover {
    text-decoration: underline;
}

3. JS实现展开/收起交互 #

把这段JS加到主题的自定义JS面板或者单独的JS文件中：

document.addEventListener('DOMContentLoaded', function() {
    // 处理展开按钮点击
    document.querySelectorAll('.tags-expand-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const container = this.closest('.product-tags-container');
            // 显示所有隐藏标签
            container.querySelectorAll('.hidden-tag').forEach(tag => {
                tag.style.display = 'inline-block';
            });
            // 切换成收起按钮
            this.classList.replace('tags-expand-btn', 'tags-collapse-btn');
            this.textContent = '收起';
        });
    });

    // 处理收起按钮点击
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('tags-collapse-btn')) {
            const container = e.target.closest('.product-tags-container');
            // 隐藏标签
            container.querySelectorAll('.hidden-tag').forEach(tag => {
                tag.style.display = 'none';
            });
            // 切换回展开按钮
            e.target.classList.replace('tags-collapse-btn', 'tags-expand-btn');
            e.target.textContent = '...查看更多';
        }
    });
});

场景2：限制每个标签的文字最多5个词 #

如果你的需求是单个标签的文字不能超过5个词（而不是限制标签数量），那用这段PHP代码就够了，不需要JS：

add_filter('woocommerce_product_tag_list_item', 'limit_single_tag_text', 10, 2);
function limit_single_tag_text($item_html, $tag) {
    $tag_name = $tag->name;
    $max_words = 5;
    $words = explode(' ', $tag_name);
    
    if (count($words) > $max_words) {
        // 截断到5个词并添加省略号
        $truncated_name = implode(' ', array_slice($words, 0, $max_words)) . '...';
        // 替换标签文字，同时保留完整标签名的title提示
        $item_html = str_replace($tag_name, $truncated_name, $item_html);
        $item_html = str_replace('<a ', '<a title="' . esc_attr($tag_name) . '" ', $item_html);
    }
    
    return $item_html;
}

这段代码会自动截断超过5个词的标签文字，鼠标悬停时还能看到完整的标签名称。

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