WooCommerce中单个产品页面如何限制产品标签的output

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

结果：