If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

Magento. How to set number of columns in category listing

This tutorial shows how to set the number of columns in category products listing in Magento store.

In the template that we chose for this tutorial the products are displayed in 3 columns.

Let’s see if we can display these products in 4 columns.

Edit XML layout file

First of all open the Magento installation directory and locate theme layout XML files. They are usually located in "app/design/frontend/default/theme###/layout" directory.

In the layout folder open the catalog.xml file with your editor and locate the category layout settings:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <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>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Now you need to set the number of columns for category product listing. Add the following code:

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

before

<action method="addColumnCountLayoutDepend"><layout>empty</layout><count>6</count></action>

As a result you should have the following:

    <catalog_category_default translate="label">
       <label>Catalog Category (Non-Anchor)</label>
       <reference name="right">
           <block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>9</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <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>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_default>

Add the same code for the anchor category settings. Scroll down the catalog.xml file and add the same code to the anchor category settings:

<catalog_category_layered translate="label">
       <label>Catalog Category (Anchor)</label>
       <reference name="right">
           <block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>
       </reference>
       <reference name="content">
           <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
               <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                   <!-- <action method="addReviewSummaryTemplate"><type>default</type><template>review/helper/su.phtml</template></action> -->
                   <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                       <block type="page/html_pager" name="product_list_toolbar_pager"/>
                       <!-- The following code shows how to set your own pager increments -->
                       <!--
                           <action method="setDefaultListPerPage"><limit>4</limit></action>
                           <action method="setDefaultGridPerPage"><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>2</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>4</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>list</mode><limit>8</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>list</mode><limit>all</limit><label>All</label></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>3</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>6</limit></action>
                           <action method="addPagerLimit"><mode>grid</mode><limit>9</limit></action>
                           <action method="addPagerLimit" translate="label"><mode>grid</mode><limit>all</limit><label>All</label></action>
                       -->
                   </block>
                   <action method="setColumnCount"><count>4</count></action>
                   <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>
                   <action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
               </block>
           </block>
       </reference>
   </catalog_category_layered>

When you are done Save the file.

Clear Magento cache

Before you’ll be able to see the changes at the Magento frontend you need to clear Magento cache. In order to do this you need to login to Magento admin panel and go to "System > Cache Management" page.

There select all cache types, in the actions box select "Refresh" and click the Submit button.

Now you can open the store frontend and refresh the page to see the changes.

As you can see the products are aligned not the way we need. This is caused by the CSS styles. CSS styles are defin