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!
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 CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// 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', 'bbloomer_shorten_woo_product_title', 9999, 2 );
function bbloomer_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
Thank you nicmare for this snippet!
/**
* @snippet Product Title Word Limit @ WooCommerce Shop
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
function bbloomer_shorten_woo_product_title( $title, $id ) {
if ( is_shop() && get_post_type( $id ) === 'product' ) {
return wp_trim_words( $title, 4 ); // last number = words
} else {
return $title;
}
}