How to add more columns to product list on PS 1.6?

[Chitara]

Hello everybody:

 

I have just installed prestashop 1.6, and I see there are three columns on the product list, I need at least four or maybe five, as I dont need so big pics on the products for the nature of my store.

 

Maybe is something obvious that I just dont find, but I am unnable to find information about how to do add more columns, I would appreciate if someone could help me with this or maybe lead me to find the information about how to to the change.

 

I am using the defeault template default-bootstrap for prestashop 1.6

 

Thank you very much and my apologizes by my bad english, I am not english native.

 

Thanks in advance!

[prestamax]

This would require modification of the theme files. You cannot get this through settings.

 

Look in product-list.tpl and change the number to your liking

 

Edited March 20, 2014 by prestamax (see edit history)

[Chitara]

Hello again and thank you very much.

 

It worked, but guess I have to change now the product_list.css, because the container is too big and they take all the room. Could you please give me a hint about where I have to change the css?. I've tried for myself but guess I am too dumb to find it .

 

Thanks a lot!

[roz]

hey there, when you changed it was your product list in homepage got moved as well? some of it went next line.

 

waiting for an answer here too

[Chitara]

Hi!:

 

Yes!. That was what happened to me aswell, I think we need to change the css too, but cannot find where I have to do it, I have changed the fonts and the buttons size, but I am not able to change the container size. Hoping someone can enlight us

[Chitara]

hey there, when you changed it was your product list in homepage got moved as well? some of it went next line.

 

waiting for an answer here too

If you mean the new products and so, the second part of the code defines it.

 

{else}

{assign var='nbItemsPerLine' value=4}

{assign var='nbItemsPerLineTablet' value=3}

{assign var='nbItemsPerLineMobile' value=2}

 

Here you change how many appear in the index page (new, featured products and so).

 

The first part is for the product list in itself.

[roz]

i think it should be in the product_list.css . still checking on it though on which line.

 

at my homepage what happened is, since the container is big, the 4th image and so on.. went to next line.

 

thanks for sharing that the else part of the code is for the home page

[roz]

i'm also not sure if we only need to change the size in Images under Preferences and Regenerate Thumbnails. because i have tried it for home_default only just to try but nothing happened.

 

hope someone can enlighten us

[prestamax]

In preferences => images you can see which image size is used by categories (should be medium-default if you didn't change anything). Here you can adjust the image sizes.

 

You can solve the layout issue if you open product-list.tpl. Look for the line

<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} ...

Prestashop 1.6 is using bootstrap which is a grid system. Full width is 12 columns

 

the classes for index.php are

col-xs-12 col-sm-4 col-md-3

 

this means

12col (full width for mobile view)

col-sm-4 for tablets (= 3columns) => 3x4=12
col-md-3 for pc (= 4 columns) => 4x3=12

 

Change the classes according to the number of your columns

if you have 6 columns you would need a class of col-md-2 for desktop (6x2=12)
 

You don't need to change the css but just the css class. It's just a bit of math. number of columns x number in css class must result in 12.

 

For category pages the classes are
col-xs-12 col-sm-6 col-md-4

Due to the sidebar here are only 3 columns in desktop view col-md-4 (4 x 3 = 12)

If you have 4 columns here change it to col-md-3 (3 x 4 = 12)

Edited March 21, 2014 by prestamax (see edit history)

[Chitara]

Hi Prestamax. Just writting a line to say you thank you a lot. I've used what you explained and worked perfectly for me. I am really grateful, thanks a lot. I set the post as solved.

[roz]

got it! thanks a lot Prestamax!

[lda573]

Thanks Prestamax! , I might add if you want to use View Grid|List from product page we must change also the javascript => themes/default-bootstrap/js/global.js

function display(view)
{
	if (view == 'list')
	{
		$('ul.product_list').removeClass('grid').addClass('list row');
		$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
...
	else 
	{
		$('ul.product_list').removeClass('list').addClass('grid row');
		$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
...

change col-xs-12 col-sm-6 col-md-4  with the desired one col-xs-12 col-sm-4 col-md-3  (12/12= 1 col   12/4 = 3 col  12/3 = 4 col)

[MarysWebLab]

Thanks Prestamax! , I might add if you want to use View Grid|List from product page we must change also the javascript => themes/default-bootstrap/js/global.js

function display(view)
{
	if (view == 'list')
	{
		$('ul.product_list').removeClass('grid').addClass('list row');
		$('.product_list > li').removeClass('col-xs-12 col-sm-6 col-md-4').addClass('col-xs-12');
...
	else 
	{
		$('ul.product_list').removeClass('list').addClass('grid row');
		$('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');
...

change col-xs-12 col-sm-6 col-md-4  with the desired one col-xs-12 col-sm-4 col-md-3  (12/12= 1 col   12/4 = 3 col  12/3 = 4 col)

 

This last note made the trick, because before my list view was a total mess!!!

I replaced this

removeClass('col-xs-12 col-sm-6 col-md-4')

with my custom class

* in my case:

removeClass('col-xs-12 col-sm-3 col-md-3')

and it worked like a charm!!!

 

Thank you Ida573 !

[MarysWebLab]

NOTE: My client reported this morning that when someone clicks on the grid/list icons for a second time the page is again a mess.

In order to fix this we have again to replace a class in the global.js file. (For me it was at 209 line).

$('ul.product_list').removeClass('list').addClass('grid row');
        $('.product_list > li').removeClass('col-xs-12').addClass('col-xs-12 col-sm-6 col-md-4');

So you have to replace the col-xs-12 col-sm-6 col-md-4 with your custom class there too.

[piku]

I tried to use your method on the product comparison page.

 

But there is no such settings as items per line.

 

How to change it here (and by the way: why use a different method here - isn't this inconsistent?)

 

thx,

piku

[DARKF3D3]

And if i would like to have 5 products per line how can i do that?

[hzolika]

And if i would like to have 5 products per line how can i do that?

 

I wanted to do the same. It's a bit more tricky. My way was this:

 

Created new col-md-.. classes in the global.css

 

.col-md-23 {

     width: 20%; 

}

 

You have to add this everywhere between .col-md-2 and .col-md-3.

 

After that you can change the product-list.tpl to this:

{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=5}
{assign var='nbItemsPerLineTablet' value=3}
{assign var='nbItemsPerLineMobile' value=2}
{/if}

nbItemsPerLine to 4 and 5

 

Then

<li class="ajax_block_product{if $page_name == 'index' || $page_name == 'product'} col-xs-12 col-sm-4 col-md-23{else} col-xs-12 col-sm-6 col-md-3{/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}">

It should work. Works for me though.

Edited August 12, 2014 by hzolika (see edit history)

[effectdesign]

Welcome.
I am writing regarding changes in the view of the category 4 in the column.
I would add that I was able to do file modification

themes / default-bootstrap / product-list.tpl and themes / default-bootstrap / css / global.css.

1) product-list.tpl line 25

{if isset ($ products) && $ products}
{* 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 = 4}
{assign var = 'nbItemsPerLineTablet' value = 3}
{assign var = 'nbItemsPerLineMobile' value = 2}
{/ if}

2) global.css line 869

  .col-md-4 {
     width: 25%; }


The problem is that the view list is reformatted view of the grid.

Is it possible to somehow assign an external style list view.

I've included a link to the product. Please see widk category as a list.

 

http://test8.aloc.pl/index.php?id_category=33&controller=category&id_lang=1

As this format?

Please help.

[Pachis]

In preferences => images you can see which image size is used by categories (should be medium-default if you didn't change anything). Here you can adjust the image sizes.

 

You can solve the layout issue if you open product-list.tpl. Look for the line

<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} ...

Prestashop 1.6 is using bootstrap which is a grid system. Full width is 12 columns

 

the classes for index.php are

col-xs-12 col-sm-4 col-md-3

 

this means

12col (full width for mobile view)

col-sm-4 for tablets (= 3columns) => 3x4=12

col-md-3 for pc (= 4 columns) => 4x3=12

 

Change the classes according to the number of your columns

 

if you have 6 columns you would need a class of col-md-2 for desktop (6x2=12)

 

You don't need to change the css but just the css class. It's just a bit of math. number of columns x number in css class must result in 12.

 

For category pages the classes are

col-xs-12 col-sm-6 col-md-4

 

Due to the sidebar here are only 3 columns in desktop view col-md-4 (4 x 3 = 12)

 

If you have 4 columns here change it to col-md-3 (3 x 4 = 12)

 

 

Thanks Prestamax, your advice helped me to set a 4 product column theme in my shop.

 

Regards.

[Pachis]

Welcome.

I am writing regarding changes in the view of the category 4 in the column.

I would add that I was able to do file modification

 

themes / default-bootstrap / product-list.tpl and themes / default-bootstrap / css / global.css.

 

1) product-list.tpl line 25

 

{if isset ($ products) && $ products}

{* 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 = 4}

{assign var = 'nbItemsPerLineTablet' value = 3}

{assign var = 'nbItemsPerLineMobile' value = 2}

{/ if}

 

2) global.css line 869

 

  .col-md-4 {

     width: 25%; }

 

 

The problem is that the view list is reformatted view of the grid.

 

Is it possible to somehow assign an external style list view.

 

I've included a link to the product. Please see widk category as a list.

 

http://test8.aloc.pl/index.php?id_category=33&controller=category&id_lang=1

 

As this format?

 

Please help.

 

Hi effectdesign

 

Solved the 4th column problem without modifying the width to 25% with the code from Prestamax. Here is my code from modified product-list.tpl

<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-4 col-md-3{/if}

[exposeclothing]

I have no idea what prestamax has written, i tried to undertand it, but i just got lost, He mentioned categories where-as i dont want to move my categories...i see some maths in there too, and dont know whether im to add the answer, or the question... 

i have no idea. all i do know is i dont have 4 columns...but i want 4 columns... but i dont wantr to alter other parts of the store lol.... Ivi found all the lines he pointed out, but they look the same as the ones posted, so i dont know what to change on them

 

Can someone dumb it down for me, without mentioning numbers and maths, as this is my ultimate fail, and wasnt my specialty in school LMAO so in product-list.tpl i changed line 25 to "6" instead of 3, then also changed the 2's to 3's....nothing worked, so i changed it again to value=4 as shown below

 

{if isset($products) && $products}
    {*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=3}
        {assign var='nbItemsPerLineMobile' value=3}
    {else}
        {assign var='nbItemsPerLine' value=4}
        {assign var='nbItemsPerLineTablet' value=3}
        {assign var='nbItemsPerLineMobile' value=3}
    {/if}

 

 

No change to the store, so could someone give me the basics, as in which file do i modify, and at what line? and what do i change it to?

[stem]

Hi!!

 

What about, If I want to have for example 4 columns but each one with different width??

[pxloft]

Thanks! This really helped!!

[Nikpro]

Help make

That after more than 1,500 screen resolution was 4 pieces and used to proportion (24%). If less than 1500 then to 33% in 3 pleased.

If you do after you've recommended.

Then at a resolution less than 1500. one product creates a new line line (in fact)