(Solved) Line breaks within product features PrestaShop 1.7.6.5 (20 April 2020)

[ccristian]

Hi! 

Can someone help me with some custom code so I can add more content in the product features fields on product page...I need that content to be shown like in a vertical menu, one above the other.

By default PrestaShop alows us to add more content in these fields (product features fields) but separated by comma, but I don't want that....what I need is to arrange them one above the other...please see the picture attached so you can understand what I mean.

Thank you in advance!

(my PrestaShop version is 1.7.6.5 + Warehouse theme latest version)

Edited April 26, 2020 by ccristian
text corrections (see edit history)

[idnovate.com]

Could you paste your store URL?

[ccristian]

The store is in maintenance mode, if I will give you the store URL it will not help you. Thank you!

[Guest]

2 hours ago, ccristian said:

The store is in maintenance mode, if I will give you the store URL it will not help you. Thank you!

No one will help you with your approach.

You need help, but you won't do anything for it?
Then you created this thread unnecessarily.

We are not magicians and we will not pull the solution out of our sleeves.

Your template is not the default, you can see that you have third-party modules installed.

Create your inquiry.

https://www.prestashop.com/forums/forum/235-job-offers/

[idnovate.com]

14 hours ago, ccristian said:

The store is in maintenance mode, if I will give you the store URL it will not help you. Thank you!

If I'm asking you the store URL is to check the code and tell you if you can do this change with CSS, for example.

[ccristian]

Hi friends! 

I apologize for answering you so late, I am very busy these days and this will last until May.

 I saw that I received some comments on the post, some of them even critical, I apologize for that and I want to thank you for trying to help me.

Meantime I put the store in the LIVE mode, here is the store URL:  http://azshop.ro/

Thank you!

[idnovate.com]

9 hours ago, ccristian said:

Hi friends! 

I apologize for answering you so late, I am very busy these days and this will last until May.

 I saw that I received some comments on the post, some of them even critical, I apologize for that and I want to thank you for trying to help me.

Meantime I put the store in the LIVE mode, here is the store URL:  http://azshop.ro/

Thank you!

And any example product where specifications are separated by comma? I only see specifications one above another.

[ccristian]

13 hours ago, idnovate.com said:

And any example product where specifications are separated by comma? I only see specifications one above another.

Hi!

After you wrote me, I've logged in into my website and I realized by mistake that I found a little trick to solve my problem without changing the core code or adding any custom code into the special custom fields of the theme....so what I found is that if you add the same feature 2, 3 or 4 times.... or as many times is needed, BUT WITH ANOTHER VALUE, the result it's the answer to my post  (see the picture attached).

I want to thank you all and once again I apologize if in some way I bothered someone. Thank you!

 

 

Edited April 23, 2020 by ccristian
small text corrections (see edit history)

[ccristian]

Now that I've succeeded to find the answer to my problem and share it with everyone, there is another thing I want to change in this section of the product page so called "product features"... can you provide me a custom code so I can make the table striped? (please see the picture attached)

Thank you!

 

[idnovate.com]

Add this code:

.data-sheet dt:nth-of-type(even),
.data-sheet dd:nth-of-type(even){
  background-color: #E8ECED;
  margin-bottom: 0;
  padding-top: .5rem;
}

in /themes/warehouse/assets/css/custom.css.

Set the colour that you prefer.

[ccristian]

7 hours ago, idnovate.com said:

Add this code:

.data-sheet dt:nth-of-type(even),
.data-sheet dd:nth-of-type(even){
  background-color: #E8ECED;
  margin-bottom: 0;
  padding-top: .5rem;
}

in /themes/warehouse/assets/css/custom.css.

Set the colour that you prefer.

The code provided by you doesn't working, I added it in custom .css field and nothing.

[idnovate.com]

It's not added http://azshop.ro//themes/warehouse/assets/css/custom.css

It's blank!

[dtwfung]

6 hours ago, idnovate.com said:

It's not added http://azshop.ro//themes/warehouse/assets/css/custom.css

It's blank!

FYI. Make sure you clear the cache for the custom.css effective...

[idnovate.com]

You need to adjust padding and margin. Set this:

.product-features > dl.data-sheet dd.value, 
.product-features > dl.data-sheet dt.name {
  margin: 0;
  padding: .5rem 0;
}

.data-sheet dt:nth-of-type(even),
.data-sheet dd:nth-of-type(even){
  background-color: #E8ECED;
}

 

[ccristian]

3 hours ago, dtwfung said:

FYI. Make sure you clear the cache for the custom.css effective...

I've put the code but becouse I didn't clear the cache, it was not working and I've deleted it.

Now after I cleared the cache it's seems that it's working, but with 1 issue, it looks like the background-color it didn't cover the entire table column (I think it's a margin or a padding right there that it's not filled with the background-color).

Another thing I want to ask you, can we delete the table lines too?

Thank you!

 

[idnovate.com]

Check my previous post.

[ccristian]

6 hours ago, idnovate.com said:

Check my previous post.

Thank you!

For unknown reasons the code provided by you it was working only if I put it in the .css path http://azshop.ro//themes/warehouse/assets/css/custom.css so I had to change a little bit the code so I can put it in the custom .css of the theme from the back office. In this way I will not be forced to clear the cache every time I made some changes.

.product-features>dl.data-sheet dd.value, .product-features>dl.data-sheet dt.name {
    font-weight: normal;
    margin-top: -7px;
    padding-top: 5px;
    padding-left: 5px;
    border: 1px solid transparent;
}
.data-sheet dt:nth-of-type(even), .data-sheet dd:nth-of-type(even) {
    background-color: #eff9fe;
}