How do you change the number of product columns?

Question

I want to change the number of products that are shown. But I don't want to hard code this into the theme.

This:

<ul class=​"products-grid products-grid--max-4-col first last odd">​…​</ul>​

should be transformed into this:

<ul class=​"products-grid products-grid--max-6-col first last odd">​…​</ul>​

It's a simple change. The 4 needs to become a 6.

What's the best way to do this?

Answer 1

The question is in fact, how do you change the number of product columns.

The line you wish to change is generated by this code:

<?php $_columnCount = $this->getColumnCount(); ?>
<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

that you can find in this file:

app\design\frontend\Your_Package\Your_Theme\template\catalog\product\list.phtml 

One simple way to change the number of columns is to edit catalog.xml of your theme:

app/design/frontend/Your_Package/Your_Theme/layout/catalog.xml 

Find and edit the line that says:

<action method="setColumnCount"><count>4</count></action>

Another simple way to change columns count with a custom layout section in the categories: In the Custom Design tab for a category, enter this code in the Custom Layout Update field:

<reference name="product_list">
    <action method="setColumnCount"><count>4</count></action>
</reference>

You can find further reference in this video: Change magento column count in products grid list

Another way would be to edit the list.phtml file and replace this line:

<?php $_columnCount = $this->getColumnCount(); ?>

with something like:

<?php $_columnCount = 6; ?>

Answer 2

Turn on template path hints and find out what is rendering what you are looking to edit. You can edit that template directly.

In admin: System->Configuration->Developer->Advanced->Debug

Turn it on then refresh your front end. The template will appear in the corner. Then find that template in your code set.

Answer 3

i guess you mean this?

  jQuery.noConflict();  
 jQuery( '#product-grid-div')removeClass('product-grids-Max-4-cols')
 .addClass('product-grids-Max-6-cols');

Put iT somewhere in The bottom and add your own stuff.