Shorten titles of related products

avimarketing

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:

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

avimarketing

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.

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

avimarketing

I changed your code to show two lines of text, now it's perfect.

Thank you so much for your help!

vitaminasocial

Hi, could you share the css code, I want to do the same

avimarketing

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;

}

avimarketing

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?

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

avimarketing

This works perfectly. Thank you so much Phil!