How to Shorten WooCommerce product titles

A very common issue: sometimes (mostly with affiliates online stores), WooCommerce product titles are way too long. On top of this, you may also want to keep the shop experience consistent, and make all the WooCommerce product titles of the same length. This is how you do it.

The issue: WooCommerce product titles are too long – let’s set a character length limit on the shop page

Option 1 (CSS): Limit all WooCommerce product titles to one line only

// Note: this is simple CSS that can be placed in your custom.css file
// This CSS also adds 3 dots ... at the end of each product title
 .woocommerce ul.products li.product h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

Option 2 (PHP): Limit all WooCommerce product titles to max number of characters

// Note: this is simple PHP that can be placed in your functions.php file
// Note: substr may give you problems, please check Option 3
add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // change last number to the number of characters you want
} else {
return $title;
}
}

Option 3 (PHP): Limit all WooCommerce product titles to max number of words

function shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
} else {
return $title;
}
}

Thanks to Rodolfo Melogli for the great post