How to change column count Magento

Question

Ok, this is an issue that seems to be easy to solve, but it's eluding me...

I've got some categories on my Magento Web, and some products on each category. I want them to show as 4 column count, but it always shows as 3 column count, like seen here:

I have tried this: On app/desing/frontend/default/mytheme/layout/catalog.xml, I modified this code:

<!--
Category default layout
-->

<catalog_category_default translate="label">
    <label>Catalog Category (Non-Anchor)</label>
    <reference name="left">
        <block type="catalog/navigation" name="catalog.leftnav" after="currency" 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"><columns>4</columns></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>

So I supposedly set column count to 4, but it still keeps showing 3 products... Any idea?

PS: Using Magento 1.7.

Solution 1

Try to use update handle action to define your current layout (sometimes theme use default column count instead of layoutdepend): just add line at the beginning of the node

<catalog_category_default translate="label">
    <update handle="page_two_columns_left" />

Solution 2

Under list.phtml file add following code

$this->setData('column_count',4);

below the

$_helper = $this->helper('catalog/output');

Solution 3

You have to edit the css style too. For example:

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

You have to experiment with the style properties to get the result you need.

And don't forget to change your Anchor category settings:

<catalog_category_layered translate="label">
       <label>Catalog Category (Anchor)</label>
       ...
                   <action method="setColumnCount"><count>4</count></action>

Finally delete your magento cache.

Solution 4

I think "setColumnCount" is not defined in List.php or it's parent class. So your method is not working. It would be better if you set your column count by calling "addColumnCountLayoutDepend" based on your particular layout for category pages.

So if you are using 2ColumnRight layout on category pages just try the code below.

<action method="addColumnCountLayoutDepend"><layout>two_columns_right</layout><count>4</count></action>

This will set your list page having product listed in 4 column. Also you need to make some CSS changes.

View more solutions

Comments

[Sonhja]

I think that's not the problem, as my homepage has 4 products on each grid, and they fit perfecty (also using 2columns-right, but different category).

[Sonhja]

the "addColumnCountLayoutDepend" is also defined. Can you specify where to change the List.php column count?

[Anant]

Yes. I can see. It is already defined. So just remove "<action method="setColumnCount"><columns>4</columns></action>" and try for reindexing and delete your cache.

[Anant]

You can test you column count using firebug debugger. Just go to UL.products-grid. Count no of child li for each UL item. This will be your column count. If it is 4 and still your product are showing in 3 column, then you need to do some css changes.