A very common WooCommerce shop page issue: sometimes (and especially with affiliate stores), WooCommerce product titles are way too long and go over several lines, messing with the overall vertical alignment.
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. Enjoy!
WooCommerce. shorten product title on the shop page
Snippet 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;
}
Snippet 2 (PHP): Limit all WooCommerce product titles to max number of characters
/**
* @snippet Product Title Char Limit @ WooCommerce Shop
* @how-to Get tutoraspire.com FREE
* @author Tutor Aspire
* @compatible WooCommerce 5
* @donate $9 https://tutoraspire.com
*/
// 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', 'tutoraspire_shorten_woo_product_title', 9999, 2 );
function tutoraspire_shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return substr( $title, 0, 15 ); // last number = characters
} else {
return $title;
}
}
Snippet 3 (PHP): Limit all WooCommerce product titles to max number of words
