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 defined to make the products display in a three columns layout.

Edit CSS styles

In Magento the theme CSS files are located in the "skin/frontend/default/theme###/css" folder. Using the browser developer tool you can locate the product class, style properties and style location. Usually the product listing style properties are defined in the style.css file.

Please note: the class name and style properties may be different in your template.

Let’s see what can be changed. We have the following style properties assigned to products in the category listing:

.products-grid li.item {
   float: left;
   margin: 0 22px 0 0;
   padding: 0 0 29px;
   width: 200px;
}

Here we can change the list item width and margin. Reducting the width and margin values we got the following result:

Well … it’s not ideal but we are near. Now we need to modify the style properties of the product title, price, add to cart button and product links. Feel free to experiment with the style properties to get the result you need.

After several minutes of experiments we got the following result:

Thank you for your time and attention. We hope this tutorial to help you solve your issues.

You can see what CSS changes has been performed in the video tutorial below:

Magento. How to set number of columns in category listing