Product title overflowing onto price in cart widget

Hi djgnzls,

You could use some CSS to shorten the titles of your Woo commerce products. I’ll give some options below that you could use globally and then a suggestion for the problem you are having with your cart widget.

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 area and saved
// 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 theme 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;
}
}

Cart Widget Suggestion
You can use the CSS suggestion above and change the CSS classes to those that the cart widget uses to display the titles – i.e Add the cart widget CSS classes to shorten the titles for the widget only. Without seeing the site myself I can’t help here as I cannot check what these classes may be. Maybe post your site URL here for us to see.

Hope the above is able to help.

Take care,

Jason