Get in touch

Your Name *

Your Email *

Subject

Your Message

* required field.

…Here we are, with the next instalment of Tips & Tricks: Product List Part 2, this part will be a continuation of Part 1. We will look into removing elements unwanted elements and interactions from the product list.

A common want from users is the removal or customisation of the hover state that appears when interacting with the product list (seen to the right). The product hover over is made up primarily of 4 elements, these are; Am added drop shadow to the product container, new placement of the products price and promotions, the option to quick view the product and the addition of usable buttons for the product.

The simplest of these tasks is the enabling and disabling of the quick view functionality (on Prestashop’s default theme), which is located within the back office of your store. This can be located by navigating to the module section, searching for the theme configurator module, and selecting the option “Display quick view window on homepage and category pages” (see below) this yes and no setting will remove and add the quick view functionality wherever the product list appears on your page.

 

 

A common need with the product-list is the editing of what buttons appear on the product listing, usually this starts with the removal of the add to cart button. The reasoning behind this is as follows; if you have a product that has a variety of options to choose from, e.g: colour, size and length. It will be highly unlikely for a user to simply wish to add the default combination of the product to their basket, therefore removing the add to cart button and leaving just the more button removing, it not only saves pages real estate but also improves the user experience giving a more direct route to the product. So how do we go about removing this button?

Time to fire up your code editor again and navigate to the product-list.tpl within your theme. Once there do a file search for “add to cart”. Within the default-bootstrap theme this can be located at line number 155, and looks like the code block below, which you should change from:

<div class="button-container">
    {if ($product.id_product_attribute == 0 || (isset($add_prod_display) && ($add_prod_display == 1))) && $product.available_for_order && !isset($restricted_country_mode) && $product.customizable != 2 && !$PS_CATALOG_MODE}
{if (!isset($product.customization_required) || !$product.customization_required) && ($product.allow_oosp || $product.quantity > 0)}
{capture}add=1&id_product={$product.id_product|intval}{if isset($product.id_product_attribute) && $product.id_product_attribute}&ipa={$product.id_product_attribute|intval}{/if}{if isset($static_token)}&token={$static_token}{/if}{/capture}
            <a class="button ajax_add_to_cart_button btn btn-default" href="{$link->getPageLink('cart', true, NULL, $smarty.capture.default, false)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Add to cart'}" data-id-product-attribute="{$product.id_product_attribute|intval}" data-id-product="{$product.id_product|intval}" data-minimal_quantity="{if isset($product.product_attribute_minimal_quantity) && $product.product_attribute_minimal_quantity >= 1}{$product.product_attribute_minimal_quantity|intval}{else}{$product.minimal_quantity|intval}{/if}">
                 <span>{l s='Add to cart'}</span>
            </a>
    {else}
            <span class="button ajax_add_to_cart_button btn btn-default disabled">
                 <span>{l s='Add to cart'}</span>
            </span>
        {/if}
    {/if}
    <a class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
        <span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span>
    </a>
</div>

to:

<div class="button-container">
<a class="button lnk_view btn btn-default" href="{$product.link|escape:'html':'UTF-8'}" title="{l s='View'}">
<span>{if (isset($product.customization_required) && $product.customization_required)}{l s='Customize'}{else}{l s='More'}{/if}</span>
</a>
</div>

In changing this will eliminate the add to cart button on the product list  and leave just the more button on display. Great! But you don’t want to have to hover to reveal it? No worries, let us see what we can do to have this on show at all times. Back into the code we can alter one class within the li element that loops through to display all products within your product list. The code in question here can be found on line 49, as below:

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-3{else} col-xs-12 col-sm-6 col-md-4{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLine == 0} last-in-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLine == 1} first-in-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModulo)} last-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 0} last-item-of-tablet-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineTablet == 1} first-item-of-tablet-line{/if}{if $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 0} last-item-of-mobile-line{elseif $smarty.foreach.products.iteration%$nbItemsPerLineMobile == 1} first-item-of-mobile-line{/if}{if $smarty.foreach.products.iteration > ($smarty.foreach.products.total - $totModuloMobile)} last-mobile-line{/if}">

Here we are interested in the class “ajax_block_product” removing this will stop the rollover on the product list. But this doesn’t reveal the button I hear you so? Not quite, but we are half way there. The next step is to navigate to your product_list.css file, in which we are simply going to change one line of code on line 211, you are looking for the following:

ul.product_list.grid > li .product-container .button-container {
display: none;
}

We need to change this to:

ul.product_list.grid > li .product-container .button-container {
display: block !important;
}

This will cause the button to display at all times. Notice that we use the !important tag here, this is only to overwrite an inline style applied via javascript to set the overlay to display none.

Finally the last thing to remove is the colour attributes list, so we need to go back into our product-list.tpl, and find the following code on line 170:

{if isset($product.color_list)}
<div class="color-list-container">{$product.color_list}</div>
{/if}

By removing this code or commenting it out, this will remove the colour list displayed on the product list, and return the following: