如何限制WooCommerce产品标签的输出

Question

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

（最多说5个字）。

我只想用-“ ...”或“ ...查看更多”或“ ...查看全部”来隐藏其他关键字。

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

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

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

Answer 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调整取决于主题

结果：