Shortening WooCommerce Product Titles & Descriptions

Long product titles and descriptions can break your WooCommerce layout and make product cards look messy. A simple CSS trick can fix this by limiting text to a fixed number of lines.

CSS Solution

h1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

What It Does

• Product title → shows only 1 line
• Description → shows up to 2 lines
• Extra text is hidden with “…”

Browser Support

Works well in Chrome, Edge, and Safari. Support in older browsers (especially Firefox) may vary since this is not fully standard.

Tip

For better compatibility, you can add fallback like:

h1 {
white-space: nowrap;
text-overflow: ellipsis;
}

This is a simple and practical way to keep your WooCommerce product grid clean, consistent, and user-friendly.