How to set a character limit to product title shown on Dokan site?

hello abelljefrry,

sorry for late reply.
to solve this issue please follow the steps:
1. copy content-product.php file from wp-content/plugin/woocommerce/templates folder and paste it to wp-content/themes/dokan/woocommerce folder.

2. now open the file wp-content/themes/dokan/woocommerce/content-product.php.

3. replace line 54 ->

replace

<h3><?php the_title(); ?></h3>

by

<h3><?php echo wp_trim_words( get_the_title(), 2) ; ?></h3>

in this line 2 is, number of word you want to show in title.

Thank you. 😀

You can also achieve this with CSS,

.home .product-sliders li h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

when text h3 content reaches the selectors width: 100% it adds an ellipsis to the end (…)

Thanks a lot Shaikat & Paul!

I’ve tried both of your codes and it works! Awesome! 🙂

I’d recommend the CSS fix, you won’t have to keep updating the .php file every theme update 🙂

Thank you Paul. 🙂

Hi Paul/Support

I know this is an older thread but I am trying to achieve the same thing – but cant get the code to work.

Is it just a case of adding the code to style.css?

.home .product-sliders li h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

I tried that but it had no effect on how the text on the product thumbnail is displayed.

Any suggestions are appreciated 🙂

Hey Jason,

This shouldn’t affect the thumbnail, but the product text itself. If you supply a URL to your site I’ll take a quick look.

Hi Paul

Thanks. Here is a screen shot.

Based on the original post I thought the code would keep the text on one line then make a (…) to show there is additional text

Am I misunderstanding?

Thanks

Hey Jason,

Thanks, yes that’s exactly how it should work. Where are you adding the CSS? In a child theme?

If you supply a URL it would be easier to identify the issue, and check why the CSS isn’t working.

Hi Paul

The code was added to style.css. Is this the correct place to add it?

The site is in maintenance mode so purchases are not made, but will enable it for a couple of hours

http://coraltrader.co.uk/shop/

Please Scroll to the bottom to see the problem

Hey Jason,

I’ve had a look but none of the titles seem to reach the end of the available space, so nothing was happening. But I edited a product title in Chrome & it’s working fine:

Maybe it’s your cache?

Interesting.

Seems to work on the frontpage, but not if you click on all the products

Paul as a matter of interest, how were you able to edit a title? I would have thought the security would prevent that

Thanks for your advice on this 🙂

AH of course, this only works on the home page due to the .home class included in the CSS.

If you replace that css with the following:

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3, .home .product-sliders li h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

You should get your desired result. I’ve not fully tested this so give it a go and see how it looks.

Regards

Also I didn’t rename anything on your site, but using “Inspect” in Google Chrome to edit the code.

Paul you a genius, thank you so much for the help. 🙂

In the scrteen shot it looks like you made a change to the first product.

May I ask how that change was made without being a registered user plase Paul?

I just want to make sure I have not overlooked some editing security setting or something!

Thanks again for your help