Changing the Column Count for Magento’s Grid List

One of the final design updates for DevoutGeek.com was change the column count for the main category pages only. I’m using Magento’s 1-column layout (no sidebar) for the sub-category pages (and category pages that do not have sub categories). These pages display 3 columns of products, but I want the main category pages to display 2 columns of products because I am using a 2-column layout (left sidebar) and I do not have enough room for 3 columns.

To change all pages to display the same amount of columns, open catalog.xml (app/design/frontend//default/layout/catalog.xml). Look for:

<action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>
<action method="addColumnCountLayoutDepend"><layout>one_column</layout><count>5</count></action>
<action method="addColumnCountLayoutDepend"><layout>two_columns_left</layout><count>4</count></action>
<action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>
<action method="addColumnCountLayoutDepend"><layout>three_columns</layout><count>3</count></action>

These should be displayed in two locations – Catalog Category (Anchor) and Catalog Category (Non-Anchor). Add the following before the first action:

<action method="setColumnCount"><columns>2</columns></action>

Change the columns value to the number of columns that you want to display. Don’t forget to refresh you cache.

Updating a Single Layout

The problem with the above approach is that it sets all layouts to the same number of columns. I only want to change the column count for the 2 column left layout. I use this layout on the main category page only. Follow these steps to make the change:

  1. In the Magento Admin, go to Catalog->Manage Categories.
  2. Select the desired category.
  3. Select the Custom Design tab.
  4. Change the Custom Design drop-down (optional).
  5. Select 2 columns with left bar from the Page Layout drop-down.
  6. Add the following the the Custom Layout Update textarea.
<reference name="product_list">
    <action method="setColumnCount"><columns>2</columns></action>
 </reference>

Refresh your cache and view the category page. The column count for your grid list should be changed. Magento theming can be very complex, but it one of the most versatile e-commerce packages that I have worked with. Enjoy!

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks