How To Display Subcategories On Category Page in Prestashop 1.7

Jun 29, 2017515Lena Tsybulenko
How To Display Subcategories On Category Page in Prestashop 1.7

When you install Prestashop 1.7 Classic Theme you may see that there are no subcategory thumbnails on a category page. This tutorial will show you how to display subcategories with image thumbnails and enhance them with CSS style.

1-subcategory-thumbnail

Display subcategories on Category Page

First, we need to change category.tpl file. Here is a full path to this file: themes/classic/templates/catalog/listing/category.tpl

Open the file and paste the following code inside the block {block name=’product_list_header’}{/block}: 

The code of modified category.tpl file is attached below:

 Add some CSS style to our subcategory list

The result you can see here.



18 Comments

  1. Hello.

    This is what I need. Unfortunatelly it does not work with 1.7.2.2.
    Could you please help me how to modify for the latest version?

    Thank you in advance.

    Best regards,
    Jozsef Sipos

  2. hi
    Version 1.7.2
    does not see the additions in the css file and makes me the list and not a grid

    thank you

    best regards
    Ilario

  3. Hello, Thanks for the code but its not clear where we have to put the css code. Can you explain it?

  4. Hi Ricard, you may apply css code in custom.css file (assets/css/custom.css) or use it in your sass files, that you compile (_dev/css).

  5. Давно искала подобный урок и безумно была рада найти вашу статью! Prestashop 1.7.2 – вставляю код и тд. по вашей инструкции.Но к сожалению подкатегории все равно идут списком. А хотелось бы как на рисунке и чтоб при наведении мышкой на картинку подкатегории она подсвечивалась розовой рамкой как на вашем фото. Подскажите, как правильно сделать? Благодарю

  6. Анна, добавьте немного css, например так:

    .subcategories li img{
    border:3px solid transparent;
    }
    .subcategories li: hover img{
    border-color: #ff056f;
    }

  7. Спасибо большое за помощь! Все получилось в обычной версии сайта! Только вот в мобильной версии не отображаются подкатегории- только товары… Как это можно исправить? Очень благодарна за помощь.

  8. Возможно как-то прописать, если моб версия, то подкатегории отображаются в колонку, а не блоками…?

  9. Анна, для того чтобы категории отображались на мобильном, нужно убрать класс “hidden-sm-down” для блока субкатегорий. Для того чтобы поменять стиль блоков на мобильном используйте медиа запросы: @media only screen and (max-width: 768px) {…}

  10. Еще вопрос возник)
    Вместе с подкатегориями на странице отображаются товары из главной категории все скопом. Как их можно убрать- чтобы они были только в своей подкатегории.
    спасибо еще раз!

  11. В админке для товаров можно назначить соответствующую категорию, одну или несколько.

  12. Анна, к сожалению, нет возможности консультировать в рамках блога. Все авторы постоянно заняты на внешних и внутренних проектах, поэтому на блог остается совсем немного времени. В статьях мы даем работающие решения, если нужна помощь в настройке, вы можете обратиться в техподдержку, будем рады помочь.
    Спасибо за понимание!

  13. My subcategories are listed under each other and not next to each other
    Running Version 1.7.3.1

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *