Display more items per row in products/category pages
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.
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.