{"id":65690,"date":"2016-03-07T04:57:49","date_gmt":"2016-03-07T09:57:49","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=65690"},"modified":"2016-04-12T03:51:22","modified_gmt":"2016-04-12T07:51:22","slug":"magento-how-to-change-number-of-columns-on-search-results-page","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/magento-how-to-change-number-of-columns-on-search-results-page.html","title":{"rendered":"Magento. How to change number of columns on search results page"},"content":{"rendered":"

This tutorial will show you how to change number of columns on search results page in Magento.<\/p>\r\n\r\nMagento. How to change number of columns on search results page<\/a>

    \r\n\t
  1. \r\n\t\t

    Connect to your FTP or access your site files via Cpanel and navigate to app\/design\/frontend\/tm_themes\/themexxx\/template\/tm\/productlistgallery<\/strong>, where themexxxx is your theme. In this directory locate list.phtml<\/strong> file. You can edit it in cpanel or download it and edit using any text editor, such as Sublime or Notepad++:<\/p>\r\n\t\t\r\n\"Magento.<\/a>\r\n\t<\/li>\r\n\t

  2. \r\n\t\t

    In list.phtml<\/strong> file locate the following code (around line 155):<\/p>\r\n\t\t

    <?php \/\/$_columnCount = $this->getColumnCount(); ?>\r\n<?php $_columnCount = 3; ?><\/pre>\r\n\t\t
    Now replace it with:<\/p>\r\n\t\t
    <?php $_columnCount = $this->getColumnCount(); ?>\r\n<?php \/\/$_columnCount = 3; ?><\/pre>\r\n\t\t
    It will comment out the default 3 columns layout and enable custom option.<\/p>\r\n\t<\/li>\r\n\t
  3. \r\n\t\t
    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:<\/p>\r\n\t\t
    <?\r\nif($this->getRequest()->getControllerName()=='result' || $this->getRequest()->getControllerName()=='advanced') {\r\n\t$col_class='col-sm-3';\r\n\t} else {\r\n\t$col_class='col-sm-4';\r\n}\r\n?><\/pre>\r\n\t\t
    Now locate in list.phtml (approximately line 163):<\/p>\r\n\t\t
    <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\"><\/pre>\r\n\t\t
    And replace col-sm-4<\/strong> with:<\/p>\r\n\t\t
    <?php echo $col_class; ?><\/pre>\r\n\t\t
    It will load a dynamic class you specified in the “if” statement earlier on this step.<\/p>\r\n\t<\/li>\r\n\t
  4. \r\n\t\t
     After the changes save the file and update it on your server. Now navigate to app\/design\/frontend\/tm_themes\/themexxxx\/layout\/<\/strong>, where themexxxx is your theme. In this directory locate tm_productlistgallery.xml<\/strong> file and start editing it in the same way as the previous file:<\/p>\r\n\t\r\n\"Magento.<\/a> \r\n\t\t
    On lines 37-57 find the following code:<\/p>\r\n\t\t
    <catalogsearch_result_index translate=\"label\">\r\n\t<reference name=\"content\">\r\n\t\t<reference name=\"search_result_list\">\r\n\t\t\t<action method=\"setTemplate\">\r\n\t\t\t<template>tm\/productlistgallery\/list.phtml<\/template>\r\n\t\t\t<\/action>\r\n\t\t<\/reference>\r\n\t<\/reference>\r\n<\/catalogsearch_result_index>\r\n<catalogsearch_advanced_result translate=\"label\">\r\n\t<reference name=\"content\">\r\n\t\t<reference name=\"search_result_list\">\r\n\t\t\t<action method=\"setTemplate\">\r\n\t\t\t<template>tm\/productlistgallery\/list.phtml<\/template>\r\n\r\n\t\t\t<\/action>\r\n\t\t<\/reference>\r\n\r\n\r\n\t<\/reference>\r\n<\/catalogsearch_advanced_result><\/pre>\r\n\t\t
    And replace it with:<\/p>\r\n\t\t
    <catalogsearch_result_index translate=\"label\">\r\n\t<reference name=\"content\">\r\n\t\t<reference name=\"search_result_list\">\r\n\t\t\t<action method=\"setTemplate\">\r\n\t\t\t<template>tm\/productlistgallery\/list.phtml<\/template>\r\n\t\t\t<\/action>\r\n\t\t\t<action method=\"setColumnCount\"><columns>4<\/columns><\/action>\r\n\t\t<\/reference>\r\n\t<\/reference>\r\n<\/catalogsearch_result_index>\r\n<catalogsearch_advanced_result translate=\"label\">\r\n\t<reference name=\"content\">\r\n\t\t<reference name=\"search_result_list\">\r\n\t\t\t<action method=\"setTemplate\">\r\n\t\t\t<template>tm\/productlistgallery\/list.phtml<\/template>\r\n\t\t\t<\/action>\r\n\t\t\t<action method=\"setColumnCount\"><columns>4<\/columns><\/action>\r\n\t\t<\/reference>\r\n\t<\/reference>\r\n<\/catalogsearch_advanced_result><\/pre>\r\n\t\t
    It will allow the columns on the search page to be divided in 4 and each contains 4 items.<\/p>\r\n\t<\/li>\r\n\t
  5. \r\n\t\tNow 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.\r\n\t<\/p><\/li>\r\n<\/ol>\r\n
    Thank you for checking our tutorial. Now you know how to change number of columns for search results page in Magento.<\/p>\r\n\r\n
    Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nMagento. How to change number of columns on search results page<\/a>","protected":false},"excerpt":{"rendered":"
    This tutorial will show you how to change number of columns on search results page in Magento.<\/p>\n","protected":false},"author":93,"featured_media":65693,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[729],"tags":[656,2407,668,572,1303,631],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65690"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/93"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=65690"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/65690\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/65693"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=65690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=65690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=65690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}