Is there a way to set the maximum length of the product name (truncate) like 40 chars and ending with ... when displayed in the Cleanmart template (a bit like what Etsy does)? With css that is not so easy ...

Hi,

It can be done via CSS by using the ellipsis method (but it is only possible by "line", oppose to character count) more info: css-tricks.com/snippets/css/truncate-string-with-ellipsis/

The other method is to use JavaScript (jQuery) to truncate the texts by character count. There are many tutorials about it on the web, just use the google.com to find them

The ideal method is to use truncate function of PHP, thus you need to dig in to category page PHP file of CleanMart and apply this function to product name variable ($product->product_name).

But this is considered as 100% custom modification; unfortunately we don't provide free support or step-by-step instructions for custom coding modifications.

You may purchase premium support:
www.flexiblewebdesign.com/premium-support

and let us take care this modification for you directly on your website though.

Regards.
Support

Thank you for your detailed and usable answer, I will test some of the suggestions.

I use the suggested css ellipsis method to truncate for now, using the custom.scss in Gantry 5. Works!
Thank you.

I am glad you have sorted out.

Using ellipsis is really the easiest and most appropriate approach to get what you are looking for. The only drawback is, it can only be based on "single-line" oppose to character count, but looks like doing it by "single-line" also works for you.

FYI: There are ways to expand the ellipse for multi-lines as well but that requires more advanced CSS codings, for multi-line truncate implementations, using jQuery, JavaScript or PHP truncate functions would be a better appriach

Anyway. Case solved, topic is closed.

regards.