6

I am trying to display more products on a single row. I don't know where I could do that? For now, it displays only 3 products per row and there is a lot of empty space.

I would like to display 5 products per row.

3 Answers 3

-1

Try this simple method. Open app/design/frontend/default/YOURTHEME/catalog/product/list.phtml and the below code.

$row_count = 5 //or whatever you want
$this->setColumnCount($row_count);
1
  • 3
    this is not the proper way to direct change the variable in phtml file.
    – Keyul Shah
    Jan 13, 2014 at 2:35
12

For that you have to change into XML file for your template.

NOTE: Don’t direct change the value into base file for this tutorials. Because It will may affect other places. So XML file Change is more preferable.

Step 1 : Open your template file folder like app/design/frontend/default/YOUR THEME/layout.

Step 2 : Open your catalog.xml file and find the below code in that

<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="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>

Step 3 : Now you have to add the below code in that catalog.xml file. And then after file is look like as below.

    <action method="setColumnCount"><count>4</count></action>
<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"><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>

Step 4 : Also do same change into that file as per below code.

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

Step 5 : Flush the catch and open your store category page you can see the 4 column layout will appear. Also you have to add CSS for that layout.

If you want 5 column the just replace 4 with 5.

4
  • There was no catalog.xml file when looked at the path you gave.
    – defiant
    Jan 10, 2014 at 14:15
  • 1
    if not then you have to find that file in app/design/frontend/base/default/layout. and copy this file to app/design/frontend/default/YOUR THEME/layout. this location and do your changes
    – Keyul Shah
    Jan 10, 2014 at 14:48
  • @DanielWest Thanks a lot please give upvote
    – Keyul Shah
    Aug 17, 2015 at 14:16
  • no changes after doin same changes
    – rashmi sm
    Oct 23, 2015 at 14:06
4

Open your themes local.xml. It should be located in

app/design/frontend/[package]/[theme]/layout

or

app/design/frontend/[package]/default/layout

If both do not exist, create one with the following content

<?xml version="1.0"?>
<layout>
</layout>

For more details, refer to "How to use local.xml / theme.xml" in What is the correct way/approach to modify a Magento template?


Now, add the following lines before </layout>:

<!-- Category, non-anchor -->
<catalog_category_default>
    <reference name="product_list">
        <action method="setColumnCount"><count>5</count></action>
    </reference>
</catalog_category_default>

<!-- Category, anchor (layered navigation) -->
<catalog_category_layered>
    <reference name="product_list">
        <action method="setColumnCount"><count>5</count></action>
    </reference>
</catalog_category_layered>

<!-- Search result (quick search) -->
<catalogsearch_result_index>
    <reference name="search_result_list">
        <action method="setColumnCount"><count>5</count></action>
    </reference>
</catalogsearch_result_index>

<!-- Search result (advanced search) -->
<catalogsearch_advanced_result>
    <reference name="search_result_list">
        <action method="setColumnCount"><count>5</count></action>
    </reference>
</catalogsearch_advanced_result>

<!-- Product, upsell -->
<catalog_product_view>
    <reference name="product.info.upsell">
        <action method="setColumnCount"><count>5</count></action>
    </reference>
</catalog_product_view>

You did not make clear which page you were talking about, so I included code for categories, search results and upsell products. Pick, what you need.

You can also set the number of products per row dependent on the page layout if you replace the setColumnCount lines with addColumnCountLayoutDepend like this:

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

Note that setColumnCount takes precedence, so as soon as you use it, addColumnCountLayoutDepend has no effect.

1
  • my count wont show less than 3 count or more than 6, it just reset it to 3.
    – localhost
    Sep 16, 2016 at 16:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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