How to short WooCommerce products title

In this tutorial we will show you how to short or truncate WooCommerce products title with PHP and jQuery.

When we are working on a WooCommerce shop of our client, the design’s width did not allow to keep the long titles to be displayed on the homepage. After searching how to reslove problem with long products title. Follow step by step of this tutorial to make your website look well.

Short WooCommerce products title with PHP

1. Products in category pages are displayed by a loop from ‘content-product.php‘. Open this file and search the code is:

<li<?php echo $class ?>>
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<a href="<?php the_permalink(); ?>">

    <div class="thumbnail">     
        <?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>

        <?php if ( yiw_get_option( 'shop_show_name' ) ) : ?>
            <strong class="<?php echo $title_position; ?>">
                <?php the_title(); ?>
            </strong>
        <?php endif ?>
    </div>

    <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
</a>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
</li>

– You will see this code:

 <?php the_title(); ?>

– Change this code to:

 
<?php 
$shorttitle = mb_substr(the_title('','',FALSE),0,45); 

echo $shorttitle; 
if (strlen($shorttitle) >44){ 
echo '&hellip;'; 

} 
?>

– Make sure you edit the $shorttitle variable from 45 to the character count of your need. Number 44 mean: If it is longer 44 characters, then the code adds ‘…’ in front.

Short WooCommerce products title with jQuery as suggested by Flobbo

1. Firstly you change:

<strong class="<?php echo $title_position; ?>"><?php the_title(); ?></strong>

to:

<span class="productname"><strong class="<?php echo $title_position; ?>"><?php the_title(); ?></strong></span>

2. Before

</body>

tag add this jQuery script:

$(document).ready(function() {
    $('span.productname').each(function() {
        var title = $.trim($(this).text());
        var max = 31;

        if (title.length > max) {
            var shortText = jQuery.trim(title).substring(0, max).split(" ").slice(0, -1).join(" ") + "...";
            $(this).html('<strong class="below-thumb">' + shortText + '</strong>');
        }
    });
});

The above jQuery function will truncate the string respecting words and spaces (to not cut a word). But if you don’t care about words, you can modify the function like :

$(document).ready(function() {
    $('span.productname').each(function() {
        var title = $.trim($(this).text());
        var max = 30;

        if (title.length > max) {
            var shortText = jQuery.trim(title).substring(0, max - 3) + '...';
            $(this).html('<strong class="below-thumb">' + shortText + '</strong>');
        }
    });
});

Thats’s all. If you have any problem, please add a comment bellow !