如何在WooCommerce中限制单品页面的产品标签输出？

Question

我想限制WooCommerce的产品标签显示一定的字数。

(比如说最多5个字)。

我只是想用"..."，或"...查看更多"，或"...查看全部 "来隐藏其他关键字。

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

---

我在Woocommerce产品标题上或多或少地用了同样的技巧，但找不到类似的标签解决方案。

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

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

Answer 1

你可以应用什么。

https:/github.comwoocommercewoocommerceblob4.1.0templatessingle-productmeta.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调整都取决于主题。

结果：