{"id":6356,"date":"2019-01-02T10:56:14","date_gmt":"2019-01-02T05:26:14","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=6356"},"modified":"2020-10-09T18:49:18","modified_gmt":"2020-10-09T13:19:18","slug":"display-subcategories-on-category-page-prestashop","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/prestashop\/display-subcategories-on-category-page-prestashop\/","title":{"rendered":"How to Display Subcategories on Category Page in Prestashop 1.7?"},"content":{"rendered":"<p>After upgrading PrestaShop 1.6, are you missing the absence of subcategories images on the category page in PrestaShop 1.7 classic theme or other themes? Let\u2019s take them back in a few simple steps!<\/p>\n<div style=\"display: block; float: left; width: 100%; padding: 30px 0; background: black; border-radius: 5px; margin: 0 0 25px 0;\">\n<p style=\"text-align: center;\"><a style=\"color: #fff; font-size: 28px; font-weight: 600;\" href=\"https:\/\/www.hiddentechies.com\/blog\/prestashop\/top-free-prestashop-1-7-5-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Top Free PrestaShop 1.7.5 Themes for 2019 <\/a><\/p>\n<\/div>\n<p class=\"ht-sub-heading\">1. To display subcategories on category page<\/p>\n<p>To change <strong>category.tpl<\/strong> file, Which is responsible for category page. Follow this path to locate the correct file: <strong>themes\/classic\/templates\/catalog\/listing\/category.tpl<\/strong><\/p>\n<p>Open the file and paste the below code inside <strong>{block name=\u2019product_list_header\u2019}{\/block}<\/strong> block, just before it closes:<\/p>\n<pre>    {block name='subcategory_thumbnails'}<\/pre>\n<aside>{if $subcategories|count}<\/p>\n<nav class=\"subcategory-thumbnails\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>{foreach from=$subcategories item=&#8221;subcategory&#8221;}<\/p>\n<li>{block name=&#8217;category_miniature&#8217;} {include file=&#8217;catalog\/_partials\/miniatures\/category.tpl&#8217; category=$subcategory} {\/block}<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>{\/foreach}<\/p>\n<p>&nbsp;<\/p>\n<\/nav>\n<p>{\/if}<\/p>\n<\/aside>\n<p>{\/block}<\/p>\n<p>Now, the modified file will looks like as below:<\/p>\n<pre>        {extends file='catalog\/listing\/product-list.tpl'}\r\n\r\n        {block name='product_list_header'}\r\n            {include file='catalog\/_partials\/category-header.tpl' listing=$listing category=$category}\r\n            {block name='subcategory_thumbnails'}<\/pre>\n<aside>{if $subcategories|count}<\/p>\n<nav class=\"subcategory-thumbnails\">\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>{foreach from=$subcategories item=&#8221;subcategory&#8221;}<\/p>\n<li>{block name=&#8217;category_miniature&#8217;} {include file=&#8217;catalog\/_partials\/miniatures\/category.tpl&#8217; category=$subcategory} {\/block}<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>{\/foreach}<\/p>\n<p>&nbsp;<\/p>\n<\/nav>\n<p>{\/if}<\/p>\n<\/aside>\n<p>{\/block} {\/block}<\/p>\n<p>Above code checks if the browsed category page contains any subcategories and if so &#8211; this code builds a list of available subcategories.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6385\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop.png\" alt=\"subcategory-block-prestashop\" width=\"1346\" height=\"629\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop.png 1346w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop-300x140.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop-768x359.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop-1024x479.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-block-prestashop-800x374.png 800w\" sizes=\"(max-width: 1346px) 100vw, 1346px\" \/><\/p>\n<p>To give a better look, let\u2019s add the CSS!<\/p>\n<p class=\"ht-sub-heading\">2. Add CSS style to subcategory list<\/p>\n<p>Open <strong>theme.css file, located in <strong>themes\\classic\\assets\\css<\/strong>. At the very end, Add our CSS style as below:<\/strong><\/p>\n<pre>\t\t\r\n\t\t.subcategory-thumbnails li{\r\n\t\t\t display: inline-block;\r\n\t\t\t margin-right: 30px;\r\n\t\t\t text-align: center;\r\n\t\t}\r\n\t\t.subcategory-thumbnails li img{\r\n\t\t\t margin-bottom: 15px;\r\n\t\t}\r\n\t\t.subcategory-thumbnails li a{\r\n\t\t\t color: #333;\r\n\t\t\t font-size: 16px;\r\n\t\t}\r\n\t\t\/*To hide the description of subcategory*\/\r\n\t\t.subcategory-thumbnails li .category-description{\r\n\t\t\t display: none;\r\n\t\t}\r\n\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6386\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop.png\" alt=\"subcategory-thumbnail-prestashop\" width=\"1344\" height=\"607\" srcset=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop.png 1344w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop-300x135.png 300w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop-768x347.png 768w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop-1024x462.png 1024w, https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/2018\/12\/subcategory-thumbnail-prestashop-800x361.png 800w\" sizes=\"(max-width: 1344px) 100vw, 1344px\" \/><\/p>\n<p>You might need to change the style depending on your category cover image size and Save and clear the cache. Now, It&#8217;s done!<\/p>\n<p>If you have any doubts or questions, you\u2019re welcome to ask in comments.<\/p>\n<div class=\"angwp_12010 _ning_cont _ning_hidden _ning_outer _align_center responsive\" data-size=\"custom\" data-bid=\"12010\" data-aid=\"0\" style=\"max-width:800px; width:100%;height:inherit;\"><div class=\"_ning_label _left\" style=\"\"><\/div><div class=\"_ning_inner\" style=\"\"><a href=\"https:\/\/www.hiddentechies.com\/blog?_dnlink=12010&t=1780612910\" class=\"strack_cli _ning_link\" target=\"_blank\">&nbsp;<\/a><div class=\"_ning_elmt\"><img decoding=\"async\" src=\"https:\/\/www.hiddentechies.com\/blog\/wp-content\/uploads\/angwp\/items\/12010\/Banner-2.png\" \/><\/div><\/div><\/div><div class=\"clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>After upgrading PrestaShop 1.6, are you missing the absence of subcategories images on the category page in PrestaShop 1.7 classic theme or other themes? Let\u2019s take them back in a few simple steps! Top Free PrestaShop 1.7.5 Themes for 2019 1. To display subcategories on category page To change category.tpl file, Which is responsible for&#8230; <\/p>\n<div class=\"actions\"><a href=\"https:\/\/www.hiddentechies.com\/blog\/prestashop\/display-subcategories-on-category-page-prestashop\/\">Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":6595,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[221,222,2139],"tags":[331],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6356"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=6356"}],"version-history":[{"count":17,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6356\/revisions"}],"predecessor-version":[{"id":10928,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/6356\/revisions\/10928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/6595"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=6356"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=6356"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=6356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}