Shorten titles of related products
Hello!
Is there any way to limit the length of related products titles to two lines and add an ellipsis (three dots) at the end? My titles are too long and cause a bad layout problem. When the title goes over three lines, the next row of related products is shifted to the right due to lack of space:
Comments
Hello,
Unfortunately, there is no setting to limit the text length and add three dots at the end.
However, if you sent a link to your website I will check what I can suggest to you.
Best regards
The site is not published (under construction), but I can give you access if you wish.
I tried several codes to put in the php file I found on the web, but they work only for the titles on pages which is what I don't want to change.
I found a css code that reduced the titles to one line (instead of two), but messed up all the rest, so I deleted it.
Please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.
Notice!
Please attach a link to this forum discussion.
Sending incorrect or incomplete data will result in a longer response time.
Therefore, please make sure that the data you are sending are complete and correct.
Thanks
I have placed a custom CSS code in your theme options that change it.
Please, check if it is what you wanted to achieve.
Best regards
I changed your code to show two lines of text, now it's perfect.
Thank you so much for your help!
Hi, could you share the css code, I want to do the same
Hi Vitaminasocial!
Sure, here is it:
.woocommerce-page .column_product_related .products .product .mfn-li-product-row-title .title{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
Hello!
The code works, but I still have the problem that when the title is shorter (one line only), the next row of related products is shifted. I tried to add some margin, but this didn't solve the problem. What can I do?
Please, add the following CSS code:
.woocommerce ul.products.columns-5 li.product:nth-child(5n+1), .woocommerce-page ul.products.columns-5 li.product:nth-child(5n+1) { clear: both; }Thanks
This works perfectly. Thank you so much Phil!