Product name on several lines on home and category views

Magento 2 Frontend Design
, ,
1

Hi there,
As my product titles are quite long i’d like to have them over 1, 2 or even 3 lines on the home page and in the category listings.

From what i’ve researched i need to modify the file list.phtml which can be found here :
/var/www/html/app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product

I’ve tried inserting the code :

 <?php echo $name = wordwrap($name, 20, "<br />\n",false);?>

In this section :

<strong class="product name product-item-name">
   <a class="product-item-link"
   href="<?php echo $_product->getProductUrl() ?>">
   <?php echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
   <?php echo $name = wordwrap($name, 20, "<br />\n",false);?>
   </a>
 </strong>

Then recompiled, static-content:deploy etc…

Then when i go to a category i get the error :

1 exception(s):
Exception #0 (Exception): Notice: Undefined variable: name in /var/www/html/app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/list.phtml on line 241

Which is the line I’ve just modified.

Also nothing has changed on the homepage.

Can any body help with an easy solution?

Thanks.

2

Ideally, you should use a child theme to override existing code rather than update core code. Otherwise your changes will be wiped when you come to update your theme one day.

My PHP isn’t amazing, but it looks like you’re echoing a variable that refers to itself - Hence “Undefined variable”. Check your reference as I’m sure it should be more like:

<?php echo $name = wordwrap( $_productNameStripped, 20, "<br />\n",false);?>
  • $name is the variable you want to create
  • $_productNameStripped refers to an existing variable (a few lines up) which is the product name

I’m unable to test this right now to test/check anything. But you’ll find some very basic variables of PHP Wordwrap Function here. As you can see, the 2 variables withing the line in Example 1 are different.

Oh, and FYI Magento_Catalog/templates/product/list.phtml isn’t related to the Homepage. It’s related to listing products in categories. Typically, a Homepage doesn’t list products so I’m not sure what you’re trying to do. Some screenshots or something would help to show:

  1. Your current page
  2. What you’re trying to achieve (Photoshoped)
3

Hi Craig,
Thank you for your quick reply as ever!

You are right i should be using a child theme and i originally did. But been a novice i must have installed something incorrectly and the updates i was making (like the porto patches) and to the design in the back office were not working correctly…
I’ll just have to be careful in the future…

Anyway I made the changes as you suggested, then recompiled, static-content:deploy, reindexed and cleared the cache.

And it almost works perfectly…!
In listing products my titles now go onto several lines!

I’ve increase the 20 charaters to 25 :

<?php echo $name = wordwrap( $_productNameStripped, 25, "
\n",false);?>

But it still cuts off some words or even leaves them out for some reason.

For example here’s an image of the actual page, what i would like to achieve with the titles, and what i would be perfect for the whole product presentation (lining up the review stars, price, quantity and add to cart button)…

titles test
titles test974×2085 114 KB

In all of the products :
I don’t understand why t… is shown at the end of the title as the ‘test’ is on the 2nd line.

And in product 3 :
I don’t understand why after the word ‘Yellowww’ there are 3 … and the word ‘test’ has disappeared.

Any ideas?

As for the home page i have 2 blocs like the one below showing several products :

MOST POPULAR PRODUCTS

{{block class="Smartwave\Filterproducts\Block\Home\LatestList" name="popular_product" product_type="1" product_count="10" aspect_ratio="1" image_width="320" image_height="320" template="owl_list.phtml"}}

At the moment it looks like this :

home page
home page1025×503 34.7 KB

Do you have any idea which file can be modified concerning these products on the porto home page?

Thanks for your help.
Andy.

4

Just to point something else that doesn’t look quite right. I believe it should just be:

<?php echo $name = wordwrap( $_productNameStripped, 25, "<br>" ,false); ?>

If the cut is set to true , the string is always wrapped at or before the specified width. So if you have a word that is larger than the given width, it is broken apart. When false the function does not split the word even if the width is smaller than the word width.

Having seen what you’re after though, I feel this is something that would be easier to tackle using CSS instead. It’s much easier to wrap text this way. At least you can see live results without recompiling code after every change. This route would completely change the angle at which you have to tackle this.

5

Thanks again Craig.
For some reason even with the value False the word is broken. So maybe there is something overriding it?
So i’ll try and get me head around CSS and see if i can figure it out.
Been a beginner like myself i always find the hardest part is finding where the code needs to be added or modified.
Do you have any quick tips to help find where i need to put the CSS in this case?
Thanks,
Andy.

6

1. Research/Investigate

I often start by using Inspect Element tool to do 3 things:

  1. Play around with CSS to see how it looks
  2. Take note off existing Class and ID Names
  3. Take note of the source file

IEle
IEle1277×333 46.4 KB

Note, #3 can’t be don unless in Developer Mode otherwise CSS files are merged into a single file.

The source file might lead you directly to the file or it may lead you to a dynamically generated file. If it’s the latter then you need to look at what generates that file e.g. Something that’s set in the backend.

2. Tracing the CSS

I use grep a lot to find files in Themes/Modules that match Class and ID names. You’ll get to a point where you’ll do it so many times that you’ll know exactly where everything is without checking first. That just comes with time.

When you work with a Theme, things get a little more complicated due to the “wildcards”. SUch as:

  • CSS that’s hard-coded into html files rather than CSS files (poor practice)
  • CSS that’s hard-coded into Blocks/Pages rather than CSS files (poor practice)
  • CSS files that are dynamically generated by backend settings

This makes it much time-consuming to track down what you might be looking for. It’s all much easier if you have a good understanding of both CSS and LESS. And helps even more if you understand how you’re supposed to actually make CSS changes using the Official Magento Documentation. But CSS/LESS fundamentals and Frontend Development is way outside what this forum attempts to teach.

7

I think your right Craig it’s looks as if i do need to tackle it using CSS.

When i inspected the element with the modifications that i had made i was actually getting the product name twice. The full product name was on the first line then on the 2nd line the title was broken down as it should have been just missing the first line.

wordwrap
wordwrap761×456 31.3 KB

I also realised than when i change from the Grid view to the List view the title is now also over several lines which isnt great.

So i’ll take your advice and have a play with the CSS!

Thanks.

8

So it looks like all i needed to do was over ride the css property for white-space from nowrap to normal.

I added the following :

.products-grid .product-item .product-item-details .product-item-name {
   white-space: normal
}

directly in the backoffice configuration>custom style 1 .

I now get the title as i needed from what i can see for the moment. And even on the home page.
Thanks.

1 Like