0

Magento - 2.3.5-p2

I’m in the process of learning Magento.

I’m trying to do the following, limit the characters in product title as the image shows. I want result number 2.

I've seen various ways to do this online and they appear to be for older versions.

Can anyone help?

title example

1
  • 1
    in Magento/app/design/frontend/default/your_theme/template/catalog/product/ file check $title variable and replace it with this. if( strlen($title)>= 25){ echo substr( $title ,25).'...'; } else { echo $title; } Aug 10, 2020 at 14:45

5 Answers 5

5

Try this following code :-

Go to your theme and add this code :-

app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/templates/product/list.phtml

<?php
$productName = $_helper->productAttribute($_product, $_product->getName(), 'name');
$len = strlen($productName);
?>
<a class="product-item-link" href="<?php echo /* @escapeNotVerified */ $_product->getProductUrl() ?>">
    <?php echo substr($productName,0,50); ?>
    <?php if($len > 50) echo '...'; ?>
</a>

And you change run below commands :-

php bin/magento c:c
php bin/magento c:f

OutPut:-

enter image description here

And more information check this link :-

Magento 2 -Limit the length of the product name on the front end.

https://community.magento.com/t5/Magento-2-x-Programming/Limit-of-Product-Name-in-Product-Catalog-Magento-2-3/td-p/131997

THANKS.

7
  • I have tried what you have given me, but I get an error in the catalog once I make the changes along the lines of: Exception #0 (Exception): Notice: Undefined variable: productName in /app/design/frontend/Kidsaw/kidmag2/Magento_Catalog/templates/product/list.phtml on line 71 - I tried putting the default list.phtml in there and the same error appears?? Its as if my theme doesn't like me overriding the file? The default one should produce no errors.
    – cz84
    Aug 11, 2020 at 11:18
  • Please share you code in your question. Aug 11, 2020 at 18:40
  • This is the default magento code, with no changes:: pastie.org/p/3KQL6fZCARFB6vm6W4rQnc
    – cz84
    Aug 12, 2020 at 8:03
  • 1
    check my full code :- pastie.org/p/706WiuN5vDhMGF1sd7dT2W and working fine and i have update my answer please check. Aug 13, 2020 at 5:51
  • 1
    And i have check my add this code :- prnt.sc/tyrw13 Aug 13, 2020 at 5:53
3

You can use this code

 <div class="product description product-item-description">
    <?php  echo mb_strimwidth($_item->getShortDescription(), 0, 60, '...'); ?>
 </div>
2

Firstly, Limiting Character from code level may be not a good practices

  1. SEO may get hamper
  2. You can't show the full length of different device

Better possible to do that on by CSS

.product-item-name {
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
}   

By this way you have full control by CSS.

It should be like this

enter image description here

2
  • I've limited it by PHP for now. I'm not sure how I would do the CSS method, all product names are different, do they all use the same css class?
    – cz84
    Aug 17, 2020 at 17:43
  • for product listing it's comes from app/design/frontend/Vendor_Name/Theme_Name/Magento_Catalog/templates/product/list.phtml file, unless you use custom location. so product listing class should be same. this css just hide the extra character just keep single line Aug 18, 2020 at 12:38
1

With the php approach you add loading time to your pages and a lot of logic is in the template. There is a css only solution

<div style="height: 1.8rem;">
   <a style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">PRODUCT NAME</a> 
</div>

Set the height to one line of your Title, the webkit-line-clamp adds the points automatically at the end.

1
  • Do you know which file I add this too? is it the same location here: Magento/app/design/frontend/default/your_theme/template/catalog/product/
    – cz84
    Aug 11, 2020 at 10:34
0

Great, I am looking for this solution setup on my magento 2 website, according to suggestion of Shuvankar Paul by using CSS on list.phtml I jsut found this https://prntscr.com/1rh4ufb may I know where to fix it or we have another file plus the code

.product-item-name { overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap; }

What if I want to control the title 2 - 3 rows, possbile by using CSS? sorry I am familiar with CSS, many thanks team.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.