PrestaShop 1.6.x. How to change default products listing view

This tutorial will show you the easiest way to change default product display method from Grid to List in your PrestaShop 1.6.x template.

PrestaShop 1.6.x. How to change default products listing view

By default, the template script displays products listing as grid. You can switch display view to list if needed. Let’s see how to change the default product display method from Grid to List. We will change two things. JavaScript file: global.js and also template file which displays products listings: product-list.tpl:

Modification of script file

1. All scripts in the template are stored in /js/ subdirectory of theme root directory. So, open the file: /themes/themeXXXX/js/global.js, near line 175 there is a function named bindGrid(), by default it looks like the following:

   function bindGrid()
   {
   var view = $.totalStorage('display');
   
   if (!view && (typeof displayList != 'undefined') && displayList)
   view = 'list';
   
   if (view && view != 'grid')
   display(view);
   else
   $('.display').find('li#grid').addClass('selected');
   
   $(document).on('click', '#grid', function(e){
   e.preventDefault();
   display('grid');
   });
   
   $(document).on('click', '#list', function(e){
   e.preventDefault();
   display('list');
   });
   }
   

2. Change this function to:

   function bindGrid(){ 
   
   var view = $.totalStorage('display');
   
   if (view && view != 'list')
   
   display(view);
   
   else {
   
   $('.display').find('li#list').addClass('selected');
   
   display("list");
   
   }
   
   
   
   $(document).on('click', '#grid', function(e){
   
   e.preventDefault();
   
   display('grid');
   
   });
   
   
   
   $(document).on('click', '#list', function(e){
   
   e.preventDefault();
   
   display('list');
   
   });
   
   }
   
   

Theme template file modification

1. Now we have to change the default display method in the template file: product-list.tpl. This file is located in theme folder: themes/themeXXXX/produt-list.tpl.

2. There is a code like this:

   <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}">

3. Change it to:

   <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list list row{if isset($class) && $class} {$class}{/if}{if isset($active) && $active == 1} active{/if}">

In code above we changed the default product display method from grid to list (we changed class definition):

That’s all. Now your product list will be displayed as list, not as grid as it was before by default. If you still see old display method – remember to clear browser and PrestaShop cache.

Feel free to check the detailed video tutorial below:

PrestaShop 1.6.x. How to change default products listing view