[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Magento. How to change number of columns on search results page

This tutorial will show you how to change number of columns on search results page in Magento.

Magento. How to change number of columns on search results page

  1. Connect to your FTP or access your site files via Cpanel and navigate to app/design/frontend/tm_themes/themexxx/template/tm/productlistgallery, where themexxxx is your theme. In this directory locate list.phtml file. You can edit it in cpanel or download it and edit using any text editor, such as Sublime or Notepad++:

    Magento. How to change number of columns for search results page-1

  2. In list.phtml file locate the following code (around line 155):

    <?php //$_columnCount = $this->getColumnCount(); ?>
    <?php $_columnCount = 3; ?>

    Now replace it with:

    <?php $_columnCount = $this->getColumnCount(); ?>
    <?php //$_columnCount = 3; ?>

    It will comment out the default 3 columns layout and enable custom option.

  3. Add the following code below the code you just replaced in list.phtml, the code will set 3 column layout for all pages, which are not search results pages, and 4 columns for search results page:

    <?
    if($this->getRequest()->getControllerName()=='result' || $this->getRequest()->getControllerName()=='advanced') {
    	$col_class='col-sm-3';
    	} else {
    	$col_class='col-sm-4';
    }
    ?>

    Now locate in list.phtml (approximately line 163):

    <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?> col-xs-12 col-sm-4" itemscope itemtype="http://schema.org/product">

    And replace col-sm-4 with:

    <?php echo $col_class; ?>

    It will load a dynamic class you specified in the “if” statement earlier on this step.

  4. After the changes save the file and update it on your server. Now navigate to app/design/frontend/tm_themes/themexxxx/layout/, where themexxxx is your theme. In this directory locate tm_productlistgallery.xml file and start editing it in the same way as the previous file:

    Magento. How to change number of columns for search results page-2

    On lines 37-57 find the following code:

    <catalogsearch_result_index translate="label">
    	<reference name="content">
    		<reference name="search_result_list">
    			<action method="setTemplate">
    			<template>tm/productlistgallery/list.phtml</template>
    			</action>
    		</reference>
    	</reference>
    </catalogsearch_result_index>
    <catalogsearch_advanced_result translate="label">
    	<reference name="content">
    		<reference name="search_result_list">
    			<action method="setTemplate">
    			<template>tm/productlistgallery/list.phtml</template>
    
    			</action>
    		</reference>
    
    
    	</reference>
    </catalogsearch_advanced_result>

    And replace it with:

    <catalogsearch_result_index translate="label">
    	<reference name="content">
    		<reference name="search_result_list">
    			<action method="setTemplate">
    			<template>tm/productlistgallery/list.phtml</template>
    			</action>
    			<action method="setColumnCount"><columns>4</columns></action>
    		</reference>
    	</reference>
    </catalogsearch_result_index>
    <catalogsearch_advanced_result translate="label">
    	<reference name="content">
    		<reference name="search_result_list">
    			<action method="setTemplate">
    			<template>tm/productlistgallery/list.phtml</template>
    			</action>
    			<action method="setColumnCount"><columns>4</columns></action>
    		</reference>
    	</reference>
    </catalogsearch_advanced_result>

    It will allow the columns on the search page to be divided in 4 and each contains 4 items.

  5. Now search results will be displayed in 4 columns. You can also clear or disable Magento cache, if the results are still being displayed in 4 columns.

Thank you for checking our tutorial. Now you know how to change number of columns for search results page in Magento.

Feel free to check the detailed video tutorial below:

Magento. How to change number of columns on search results page