I would like to limit WooCommerce product tags showing to a certain number of words.
(let say to 5 words max).
I just want to hide other keywords with something like - "...", or "...see more", or "...see all".
This should also be clickable like a 'read more' button
I did more or less the same trick with Woocommerce product headers but can't find a similar solution for tags.
I used this CSS below which adds three dots at the end of a product name.
.woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
What you could apply:
https://github.com/woocommerce/woocommerce/blob/4.1.0/templates/single-product/meta.php
- This template can be overridden by copying it to
yourtheme/woocommerce/single-product/meta.php
.
Replace: line 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>' ); ?>
With
<?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 (styling) and further jQuery adjustments are theme dependent
Result:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.