Quick Tip: Adding features to the product list in Prestashop 1.6

In this quick tip we will see how to add features to the product list/grid in Prestashop 1.6. The changes will, of course, apply to the home modules as well!

Product-list.tpl

The first step is to physically add features within the template, so open up product-list.tpl, which you can find in the theme’s folder. For the sake of this tutorial, we will add the features list right after the product name. Therefore, locate:

					<h5 itemprop="name">
						{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
							{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
						</a>
					</h5>

Right after it, and before (or after, depending on your likes!) the {hook h=’displayProductListReviews’ product=$product} part, add:

					{if isset($product.features)}
						<div class="features">
							
								{foreach from=$product.features item=feature}
									<div>
										{$feature.name}: <span>{$feature.value}</span>
									</div>
								{/foreach}
							
							
						</div>
					{/if}

Save and refresh, features will pop out if you have the grid view enabled once the page is loaded. But what happens if you switch to the list view, or have this one enabled on page load instead? They will not show up! Let’s deal with it!

Global.js

The list/grid switch is handled through javascript. The grid view being the default one, once you load the page and you had it set to list, the actual content will be generated using javascript; same for when you hit the list/grid switch button. To overcome this little issue, open up global.js located in the theme folder /js/. Find both occurrences of the following snippet:

html += '<h5 itemprop="name">'+ $(element).find('h5').html() + '</h5>';

And add this right after:

html += '<div class="features">'+ $(element).find('.features').html() + '</div>';

Once more, freely choose if to add this before or after ratings! It’s basically done, but let’s also add some cosmetic touches!

Cosmetic Touches

First off, features’ text is currently centered in the grid view; quite unnpleasant!

Adding features to the product list in Prestashop 1.6 - Unstyled list

Using SASS?

Prestashop 1.6 uses the SASS css preprocessor to handle stylesheets, along with compass. Therefore, if you have a sass/compass-ready environment already setup, use product_list.scss instead of the .css version!

Open up product_list.css (or .scss) located in the /css/ folder of your theme. For convenience, let’s add the new code nearby the one relative to the product name in the grid/list. Therefore, locate:

			h5 {
				padding: 0 15px 7px 15px;
				min-height: 53px;
			}

After this, add:

			.features {
				text-align:left;
				padding-left:32px;
				padding-bottom:15px;
			}
			.features span {
				font-weight: bold;
			}

Note: I am using the normal css syntax, use indentation is you are modifying the .scss file!

My suggestion for the product grid is to try and align the left of the features block with the ‘add to cart’ button that pops out once the grid is hovered. Thus, you might need to adjust the left padding, depending on your language or “Add to cart” text!

Adding features to the product list in Prestashop 1.6 - Grid Styled

The grid view is settled, now to fix the list one locate:

		h5 {
			padding-bottom: 8px;
		}

And insert the following right afterwards:


		.features {
			text-align:left;
			margin-bottom:8px;
		}
		.features span {
			font-weight: bold;
		}

We are done!

Adding features to the product list in Prestashop 1.6 - List Styled

You like the tuts and want to say "thank you"? Well, you can always feel free to donate:

  • UZzy

    Can anyone guide me from scratch how to make ratings stars & free shipping text appear on each product without mouse hover? thanks

  • Sasni

    it possible to dispaly product combination like this? How can do that?

  • Alesh

    Hi! just a quick question. what does the js ‘.feature’ in bold refers to? I am trying to use a similar code to add the reference number to the product list

    html += ”+ $(element).find(‘.features’).html() + ”;

  • http://www.hswconsulting.it George Gall

    Yo Nemo ,
    Returning to this discussion , what if I only want to show only A CERTAIN FEATURE , like in my case the FORMAT (see foto below in my previous post) ?
    how must I change the “IF” in the “foreach” ? I mean what must the IF look for ?

  • Chris James Hancocks

    Anyway to do this via HTML. I.e. add to the description of the item.
    The reason I want to do this is so when the product is imported into eBay it contains my Height and Width.

  • Ventes entrecopines

    Hello,

    Thank you for these tips that works perfectly.

    You know the solution to add attributes (feature) in quick view.

    I would like done, the attribute “size” is indicated in the box when you click on “quick view”.

    Thank you in advance for your help.

    Sincerely,

    mj

    http://www.entre-copines.be

  • http://www.gruenes-spielzeug.de Boris

    Thank you again for another great tip Fabio. And by the way for adding
    the tipp for adding ajax search to the nav menu (I once asked you for
    that one :).

    I am still learning basics but today I was asking my
    self why I have so much alt tags missing (seo optimization). I think –
    but may be I am wrong – you could add

    {$product.name|escape:html:’UTF-8′}”

    if that is the proper code or

    {$product>name|escape:html:’UTF-8′}”

    I do not know. At least I am going to add these to featured products, product list and products itsself. I hope that is ok.

    PS:
    Fabio
    could
    you be so kind to give us an overview of your dev environment? I see
    that you seem to use Sublime`Text. You wrote about a SASS set up. I do
    not know what that means.
    I use on my windows machine Sublime Text 2,
    PSPad and the last days I started with CLoud9 online IDE on my 200€ HP
    4GB chromebook :) In that IDE I have also FTP access to my cloned shop
    and I can do changes on the fly. I hope to add GIT version control only
    to add something to my learning curve since I tend to forget code over
    time ^^.
    However, since I will also upgrade to 1.6 prestashop and
    will have to deal with SASS I would be happy if you get give us some
    information how to nifty code smarty, SASS etc. on a free basis :)

  • http://www.hswconsulting.it George Gall

    Ok , that really worked . Just in case someone else needs this here is the final structure inside product-list.tpl

    {if isset($product.features)}

    {foreach from=$product.features item=feature name=pr_features}

    {$feature.name}: {$feature.value}

    {if $smarty.foreach.pr_features.iteration == 1}{break}{/if}
    {/foreach}

    {/if}

    where 1 stands for the number of features you want to display. The order of features can be changed from Catalog > Features and just drag&drop to change order.

    Awesome sollution Fabio.

  • http://www.hswconsulting.it George Gall

    Nice article , just that I have like 12 attributes and I want to show only 2 of them. Is that possible ?
    I guess it has something to do with the {foreach from=$product.features item=feature}
    So maybe make a counter and show only the first 2 attributes. I am not verry fammiliar with Smarty.
    Any suggestion is wellcome. Grazie.

    • NemoPS

      Well if you add a name=pr_features to that foreach statement, then you can use something like {if $smarty.foreach.pr_features.iteration == 3}{break}{/if}

      • http://www.hswconsulting.it George Gall

        Wich means I can only show the first 3 in this case. Where should I put the IF statement ?Before or after the ?. Thanks

        • Ricsavoy

          Hi George, Have you find a way to show your only 2 attributes, i’m really interested in ? thx a lot

  • Kon Rad

    Great tutorial. Thanks.
    Can You make a paid module to show product Attributes too?

  • Manoj

    Nice Article.

Store Top Sales

You like the tuts and want to say "thank you"? Well, you can always feel free to donate: