Change Product's name to be just one line and space between name and price.

[mrchai]

As the attached file. Please give me an advise. I'm using v. 1.6.1.1

 

1. I would like to change Product's name to be just on one line and hidden.

2. I would like to reduce the space between product's name and price.

 

Thank you very much

 

 

This thread has been solved. Let me summarized here.

1. To change Product's name to be just on one line and hidden

First -> in file product-list.tpl you have something like this: {$product.name|truncate:45:'...'|escape:'html':'UTF-8'} change truncate:45 value to lower. and change truncate:45:'...' to truncate:45:'...':true 

 

Second -> in file product_list.css you have:

ul.product_list.grid > li .product-container h5 {
padding: 0 15px 7px 15px;
min-height: 53px;
} 

Those min-height change for example to height:17px; and add below it overflow:hidden; 
So there will be:

ul.product_list.grid > li .product-container h5 {
padding: 0 15px 7px 15px;
height: 17px;
overflow: hidden;
} 

2. To reduce the space between product's name and price
after you changed min-height to height: 17 px; in file product_list.css on number 1. The problem will be solved.
 

Edited May 2, 2016 by mrchai (see edit history)

[endriu107]

1. in file product-list.tpl you have something like this: {$product.name|truncate:45:'...'|escape:'html':'UTF-8'} change truncate:45 value to lower.

2. in file product_list.css you have:

 

ul.product_list.grid > li .product-container h5 {

padding: 0 15px 7px 15px;

min-height: 53px;

}

 

Change value or delete this min-height: 53px;

[mrchai]

Thank you very much endriu107 problem number 2 has been solved.

But number 1 still not perfect yet.

 

I changed to truncate:30 , some products still split to two line.

 

When changed to truncate:20 , it's to short on some products.

 

Do you have another solution that hidden text at the end of line one not truncate?

 

Thank you

[endriu107]

2. in file product_list.css you have:

 

ul.product_list.grid > li .product-container h5 {

padding: 0 15px 7px 15px;

min-height: 53px;

}

 

Change value or delete this min-height: 53px;

Those min-height change for example to height:20px; and add belowe it overflow:hidden;

[mrchai]

Those min-height change for example to height:20px; and add belowe it overflow:hidden;

 

ul.product_list.grid > li .product-container h5 {

      padding: 0 15px 7px 15px;

      min-height: 17px;

overflow:hidden;  }

 

Still has 2 line text

[endriu107]

Please share url to your shop.

[NemoPS]

instead of truncate:30 use truncate:30:'...':true
It should cut at exactly 30 chars instead of the end of the word

[mrchai]

instead of truncate:30 use truncate:30:'...':true

It should cut at exactly 30 chars instead of the end of the word

That's great Nemo1. It cuts on the exactly 30 chars. But when we view on mobile, the screen is narrower than PC then product name split to two line. Is it possible to do character cutting depend on column width? It would responsive on any devices.

 

Thank you

 

here is my url

http://www.sportcartonline.com/70-installment

[endriu107]

You didnt make exacly what I said in product_list.css you should have:

 

ul.product_list.grid > li .product-container h5 {

padding: 0 15px 7px 15px;

height: 17px;

overflow: hidden;

}

[mrchai]

You didnt make exacly what I said in product_list.css you should have:

 

ul.product_list.grid > li .product-container h5 {

padding: 0 15px 7px 15px;

height: 17px;

overflow: hidden;

}

I did it before. Then just deleted after Prestashop Legend advise. 

Now I just add you advise now. But the test still split to two line. 

 

Update progress.

Now text cut exactly at 25 chars. But if we view on mobile the text will split to two line because column width narrower. So It should be depends on column width or something to make text cutting responsive on either PC or mobile within one line.

[endriu107]

That what @Nemo1 said was correct and keep it in your file, but you still need change what I wrote.

[mrchai]

That what @Nemo1 said was correct and keep it in your file, but you still need change what I wrote.

Thanks endriu107 . Now I wrote both of your code on my file. But when I view on mobile screen there are still split the text to two line. as the picture below.

Here is url :  http://www.sportcartonline.com/32-men-s-compression-men

[endriu107]

You still didn't have change product_list.css file correct.

There is still min-height it supossed to be height, check it.

[mrchai]

You still didn't have change product_list.css file correct.

 

There is still min-height it supossed to be height, check it.

That's my fault sorry. Now changed. Everything is great. The text now just be on one line. Thank you to endriu107 and Nemo1.

 

This thread has been solved