October 7, 2014 12:40 by
Peter
On this occasion, I will explain you how change the default grid settings. In Prestashop 1.6, by default uses grid of 3 products at the category page and 4 products at the homepage. Here are the steps that you must follow. PrestaShop 1.6 is a free and open-source e-commerce web application, committed to providing the best shopping cart experience for both merchants and customers. It is written in PHP, is highly customizable, supports all the major payment services, is translated in many languages and localized for many countries, is fully responsive (both front- and back-office), etc.
Prestashop 1.6 using Bootstrap, so we can change the class of the field. So, in this case changing default product display method to grid is in this version a bit different than method used in prestashop 1.5. Don’t Forget to Open file product-list.tpl and find this code:
<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}">
Find this columns classes:
{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}
For homepage change class col-md-3 to col-md-2, and you will get 6 columns grid. For category page change class col-md-4 to class col-md-3, and you will get 4 columns grid. Change column class to any you need. Don’t forget to change number of products per line:
{*define numbers of product per line in other page for desktop*}
{if $page_name !='index' && $page_name !='product'}
{assign var='nbItemsPerLine' value=4}
{assign var='nbItemsPerLineTablet' value=2}
{assign var='nbItemsPerLineMobile' value=3}
{else}
{assign var='nbItemsPerLine' value=6}
{assign var='nbItemsPerLineTablet' value=3}
{assign var='nbItemsPerLineMobile' value=2}
{/if}