如何在 WooCommerce 中限制单个产品页面上产品标签的输出答案

【问题标题】：How to limit the output of product tags on single product page in WooCommerce如何在 WooCommerce 中限制单个产品页面上产品标签的输出
【发布时间】：2020-06-09 09:24:03
【问题描述】：

我想将 WooCommerce 产品标签显示为一定数量的单词。

（最多说 5 个字）。

我只想用“...”、“...查看更多”或“...查看全部”之类的内容隐藏其他关键字。

这也应该像“阅读更多”按钮一样可以点击

我对 Woocommerce 产品标头做了或多或少相同的技巧，但找不到类似的标签解决方案。

我在下面使用了这个 CSS，它在产品名称的末尾添加了三个点。

.woocommerce ul.products li.product h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

【问题讨论】：

标签： php jquery wordpress woocommerce tags

【解决方案1】：

你可以申请什么：

https://github.com/woocommerce/woocommerce/blob/4.1.0/templates/single-product/meta.php

可以通过将其复制到 yourtheme/woocommerce/single-product/meta.php 来覆盖此模板。

替换：行36

<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

有

<?php
// Set taxonmy
$taxonomy = 'product_tag';

// Get the terms
$terms = get_the_terms( $product->get_id(), $taxonomy );

// Error or empty
if ( is_wp_error( $terms ) ) {
    return $terms;
}

if ( empty( $terms ) ) {
    return false;
}

// Set below number
$below = 5;

// Start
echo '<span class="tagged_as">' . _n( 'Tag: ', 'Tags: ', count( $product->get_tag_ids() ), 'woocommerce' );

// Total
$total = count( $terms );

// Loop trough
foreach ( $terms as $index => $term ) {     
    $link = get_term_link( $term, $taxonomy );

    if ( is_wp_error( $link ) ) {
        return $link;
    }

    // Add comma (if not the last tag)
    if ( $index == ( $total - 1 )  ) {
        $add_comma = '';            
    } else {            
        $add_comma = ', ';          
    }

    // Below
    if ( $index < $below ) {
        // Output tag + url
        echo '<a href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>' . $add_comma;
    } else {
        // Add 'read more' span
        if ( $index == $below ) {
            echo '<span class="tag-see-more">';             
        }

        // Output tag + url
        echo '<a href="' . esc_url( $link ) . '" rel="tag">' . $term->name . '</a>' . $add_comma;

        // Close 'read more' span
        if ( $index == ( $total - 1 ) ) {
            echo '</span>';
            echo '<span class="tag-see-more-button" style="cursor: pointer;">see all</span>';               
        }
    }
}

// Close
echo '</span>';
?>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $( '.tag-see-more' ).hide();

        $( '.tag-see-more-button' ).on( 'click', function() {
            $( this ).hide();
            $( '.tag-see-more' ).show();
        });

    });
</script>

CSS（样式）和进一步的 jQuery 调整取决于主题

结果：

【讨论】：

非常感谢！效果很好！但是，不可能看到其他关键字。我的意思是这三个点，最后，是不可点击的:-)也许我的解释不是那么清楚:-)你能告诉我怎么做吗？喜欢 - “...查看全部”
答案已更新，知道进一步的 CSS 和 jQuery 调整可能是可取的，具体取决于您的主题和您的愿望。问候
几乎完美！我唯一要补充的是 - 当所有标签都在查看时，不可能将它们卷回来，例如 - “...少看”。
如果您参考这个问题无法弄清楚，您可以随时提出一个新问题。但是，请展示您在此期间尝试过的内容，否则您的新问题将被关闭。请参阅：How do I ask a good question? 和 Stack Overflow question checklist