{"id":32812,"date":"2014-03-03T06:26:40","date_gmt":"2014-03-03T11:26:40","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=32812"},"modified":"2017-02-22T03:56:53","modified_gmt":"2017-02-22T08:56:53","slug":"prestashop-1-5-x-how-to-change-the-number-of-subcategories-columns","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/prestashop-1-5-x-how-to-change-the-number-of-subcategories-columns.html","title":{"rendered":"PrestaShop 1.5.x. How to change the number of subcategories columns"},"content":{"rendered":"<p><\/p>\r\n<p>This tutorial is  going to show you how to change the number of subcategories per row on your PrestaShop template.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=s8vHbKICYVE?width=1280&amp;height=720\" rel=\"prettyPhoto\">Prestashop 1.5.x. How to change the number of subcategories columns<\/a><\/p>\r\n<ol>\r\n<li>\r\n<p>On your FTP or using the hosting cpanel File Manager tool, go to <strong>themes\\theme_###\\<\/strong> (where <strong>theme###<\/strong>  is the name of your theme).<\/p>\r\n<\/li>\r\n<li>\r\n<p>Open <strong>category.tpl<\/strong> to edit.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Find line 73 (the number  depends on the template) that runs:<\/p>\r\n<\/li>\r\n<pre class=\"brush:css\">\r\ncategories_box col-xs-4 col-sm-3 col-md-3 col-lg-2 \r\n<\/pre>\r\n<li>\r\n<p>According to the Bootstrap grid  system,\u00a0 there are 4\u00a0 main column  classes that make it easy to create complex grid layouts for a variety of different devices: one for phones, one for tablets, one for desktops and  one for large desktops:<\/p>\r\n<\/li>\r\n<ul class=\"list\">\r\n<li>\r\n<p>col-xs-* &#8211; phones, up to 480px<\/p>\r\n<\/li>\r\n<li>\r\n<p>col-sm-* &#8211; tablets, 768px and up<\/p>\r\n<\/li>\r\n<li>\r\n<p>col-md-* &#8211; desktops, 992px and up<\/p>\r\n<\/li>\r\n<li>\r\n<p>col-lg-* &#8211; large desktops, 1200px and up<\/p>\r\n<\/li>\r\n<\/ul>\r\n<li>\r\n<p>When you look at the CSS used for the various grid classes in <strong>bootstrap.min.css <\/strong> under the <strong>\\themes\\theme###\\css\\<\/strong> folder, you\u2019ll see that grid columns are just floated left with a percentage width of the size number divided by the number of columns. So, a column with the class .col-lg-6 is just 6\/12 = 50% of the  width of the container. In other words, in order to change the number of  subcategories per row, you will need to maintain the grid columns: just change * in the column classes. <\/p>\r\n<p class=\"warning\">Please, never edit bootstrap.min.css\/bootstrap.css files under any circumstances.<\/p>\r\n<li>\r\n<p>E.g.  after changing col-lg-2  to col-lg-3 we get \u00a0a grid that shows as 4 columns on large screens: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_1-300x161.jpg\" alt=\"prestashop_number_of_subcategories_per_row_changing_1\" width=\"300\" height=\"161\" class=\"aligncenter size-medium wp-image-32813\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_1-300x161.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_1-150x80.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_1.jpg 1024w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>after changing col-md-3 \u00a0to col-md-4 we get \u00a0a grid that shows as 3 columns on desktops,<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_2-300x170.jpg\" alt=\"prestashop_number_of_subcategories_per_row_changing_2\" width=\"300\" height=\"170\" class=\"aligncenter size-medium wp-image-32814\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_2-300x170.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_2-150x85.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_2.jpg 919w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>after changing col-sm-3 \u00a0to col-sm-4 we get \u00a0a grid that shows as 3 columns on tablets,<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_3-300x251.jpg\" alt=\"prestashop_number_of_subcategories_per_row_changing_3\" width=\"300\" height=\"251\" class=\"aligncenter size-medium wp-image-32815\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_3-300x251.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_3-150x125.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_3.jpg 766w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>and after changing box  col-xs-4 \u00a0to box col-xs-5 we get \u00a0a grid that shows as 2 columns on phones.\u00a0 <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_4-173x300.jpg\" alt=\"prestashop_number_of_subcategories_per_row_changing_4\" width=\"173\" height=\"300\" class=\"aligncenter size-medium wp-image-32816\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_4-173x300.jpg 173w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_4-86x150.jpg 86w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/02\/prestashop_number_of_subcategories_per_row_changing_4.jpg 386w\" sizes=\"(max-width: 173px) 100vw, 173px\" \/><\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=s8vHbKICYVE?width=1280&amp;height=720\" rel=\"prettyPhoto\">Prestashop 1.5.x. How to change the number of subcategories columns<\/a><br \/>\r\n<\/p>\r\n<p><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is  going to show you how to change the number of subcategories per row on your PrestaShop template.<\/p>\n","protected":false},"author":30,"featured_media":32818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[732],"tags":[2564,1111,552,1659],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/32812"}],"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\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=32812"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/32812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/32818"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=32812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=32812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=32812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}