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:

  • Kamil Kurzyński

    how to put specyfic features in product.tpl right under
    {*..*}
    pls help

  • Alejandro Gonzalez Lopez

    Thanks for this,

    I´d like to know how I can show the color options just like this theme of example, and also if possible, show all other images of the same product as small squares, I think could be great article.

  • Sridhar Mundra

    Thank you for the help. The article was really helpful.
    One quick question though. I want the features to disappear on hover. How can achieve that?

    I tried
    .beam_products .inner:hover .features {
    display: none!important;
    }
    But its not working.

    Whereas :
    .beam_products .inner:hover .info {
    visibility: visible;
    } for another block (div class=”info”) works fine.

    Can you give me a possible solution?
    My webpage is http://auto-motion.com/website-en/en/products/12-manual-clamps

  • Vitaly

    Thanks for article! . It’s realy helpful, but is there any way to show features just for grid view, not for list

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