Home Forums Theme Support Dokan How to set a character limit to product title shown on Dokan site?

This topic is: resolved

This topic contains 24 replies, has 6 voices, and was last updated by  Erik 4 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #19733

    abelljefrry
    Member
    Post count: 23

    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:

    View post on imgur.com

    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!

    ๐Ÿ™‚

    #19851

    Sk
    Moderator
    Post count: 371

    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. ๐Ÿ˜€

    #19900

    Paul
    Member
    Post count: 118

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

    #19937

    abelljefrry
    Member
    Post count: 23

    Thanks a lot Shaikat & Paul!

    I've tried both of your codes and it works! Awesome! ๐Ÿ™‚

    #19961

    Paul
    Member
    Post count: 118

    I'd recommend the CSS fix, you won't have to keep updating the .php file every theme update ๐Ÿ™‚

    #20996

    Sk
    Moderator
    Post count: 371

    Thank you Paul. ๐Ÿ™‚

    #21697

    Jason
    Member
    Post count: 102

    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 ๐Ÿ™‚

    #21699

    Paul
    Member
    Post count: 118

    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.

    #21703

    Jason
    Member
    Post count: 102

    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

    #21706

    Paul
    Member
    Post count: 118

    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.

    #21715

    Jason
    Member
    Post count: 102

    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

    #21716

    Paul
    Member
    Post count: 118

    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?

    #21717

    Jason
    Member
    Post count: 102

    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 ๐Ÿ™‚

    #21718

    Paul
    Member
    Post count: 118

    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

    #21719

    Paul
    Member
    Post count: 118

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

Viewing 15 posts - 1 through 15 (of 25 total)

The topic ‘How to set a character limit to product title shown on Dokan site?’ is closed to new replies.