How to shorten product titles in Woocommerce

There are different ways to make possible the shortening of the WooCommerce Product titles that sometimes are too long. You can short that title by editing them manually but not when you have more than hundred item products there:

The best option is to use WooCommerce filters, in that way you haven’t to alter the main code so in future updates of the theme you will not loose anything.  So we recommend you to use a child theme and in the functions.php file add the following code:

 

add_filter( 'the_title', ' short_woocommerce_product_title', 10, 2 );
function short_woocommerce_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 10 ); // change last number to the number of characters you want
} else {
return $title;
}
}

As you can see we have used the the_title hook to edit the product items title. In the function short_woocommerce_product_title  we have used the substr function to change the numbers of characters you want to be show. In out case are 10 characters.  You can change that number in base of your preferences

The second way is to use the css, in our case we will make this example with our theme June WordPress Theme.  So the class for the product title in our case is: .shop-products .product_item h3

 

.shop-products .product_item h3{ 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}

In that case the title will break on the first line and in the end you will see three dots. Like in the example below:

I recommend you also to add the above code into child theme style.css or in some Customizer CSS filds so the custom css will be stored in the db. There are also different plugins that can help you with that.