Jump to content

Modifying No. of Products per Row in Product List


roz
 Share

Recommended Posts

Hi!

 

i need help on changing the number of products per row on the product list. i want to have at least 6 products in a row.

 

i was able to do that by changing some values in product-list.tpl but i think i'm missing something because when i change on List view from Grid list, the layouts breaks.

 

can anyone share me the correct way how to do it? 

 

many thanks! :)

 

 

Share this post


Link to post
Share on other sites

this issue can probably be solved in modifying the global.js that handles the grid/list view. but i have no idea which needs to change.

 

can  someone please help? thank you! :)

Share this post


Link to post
Share on other sites

  • 3 months later...

hi Sergio! thanks for the quick reply.

 

actually i already have done that part, but realized when i change to List View, the layout breaks.

 

VEo5o.jpg

 

 

I don't know if you found the solution but I am posting it here, just in case that could be useful for you or anyone else...

 

As you said we have also to edit the global.js file.

Find this part of code (for me was at the line 169)

	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');

and replace this part

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

with your custom code from the product.tpl and you are done. Otherwise the js doesn't know which class should remove and therephore the one column class couldn't be properly added.

  • Like 3

Share this post


Link to post
Share on other sites

Another issue that you may have is 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 also change the col-xs-12 col-sm-6 col-md-4 and replace it with your custom class there too.

  • Like 3

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More