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.

-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);
  • 3
    this is not the proper way to direct change the variable in phtml file. – Keyul Shah Jan 13 '14 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.

  • There was no catalog.xml file when looked at the path you gave. – defiant Jan 10 '14 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 '14 at 14:48
  • @DanielWest Thanks a lot please give upvote – Keyul Shah Aug 17 '15 at 14:16
  • no changes after doin same changes – rashmi sm Oct 23 '15 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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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