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

  • Home
  • Forums
  • Dokan
  • How to set a character limit to product title shown on Dokan site?
This topic contains 24 reply and 6 voices, and was last updated by Erik 8 years, 12 months ago
Viewing 15 Posts - 1 through 15 (of 24 total)
Author Posts
April 30, 2014 at 10:58 pm 19733
Erik Hello Wedevs Team, I have a question and a suggestion. How to set a character limit to product title? I mean, to avoid from looking like example below: http://imgur.com/YGyWwbV.png Can we only show a single line title no matter how long it is, anything beyond the product thumbnail will not be shown. But if we hover on it, there's a marquee effect or something that reveal the full title. I don't know how many of us really need this 'issue' to be fixed, but I really need it badly. Because I can't stand to look at inconsistent product thumbnail height. You know, just to keep my site clean, sleek and consistent. Thanks in advance guys! :)
May 4, 2014 at 11:41 am 19851
Sk Sk

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. 😀

May 5, 2014 at 1:47 pm 19900
Paul Paul

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 (…)

May 5, 2014 at 11:56 pm 19937
abelljefrry abelljefrry

Thanks a lot Shaikat & Paul!

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

May 6, 2014 at 1:22 pm 19961
Paul Paul

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

May 25, 2014 at 11:52 am 20996
Sk Sk

Thank you Paul. 🙂

June 10, 2014 at 2:32 pm 21697
Jason Jason

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 🙂

June 10, 2014 at 3:04 pm 21699
Paul Paul

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.

June 10, 2014 at 3:47 pm 21703
Jason Jason

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

June 10, 2014 at 3:52 pm 21706
Paul Paul

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.

June 10, 2014 at 4:38 pm 21715
Jason Jason

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

June 10, 2014 at 4:48 pm 21716
Paul Paul

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?

June 10, 2014 at 5:17 pm 21717
Jason Jason

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 🙂

June 10, 2014 at 5:29 pm 21718
Paul Paul

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

June 10, 2014 at 5:34 pm 21719
Paul Paul

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

June 10, 2014 at 5:40 pm 21720
Jason Jason

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

Viewing 15 Posts - 1 through 15 (of 24 total)