2

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?

16

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; ?>
  • I would double up-vote if it was possible. Great answer, thank you. – narzero Sep 16 '14 at 7:58
1

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.

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.