How To Display Subcategories On Category Page in Prestashop 1.7

Jun 29, 2017

2687 Lena 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:

Andrey_Dubina

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey


 Add some CSS style to our subcategory list


The result you can see here.

development_prestashop

PrestaShop Development

Take your online store to the next level with BelVG PrestaShop Development

Visit the page
Andrey Dubina

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

21 Comments

  1. Hi Lena,
    How can I view listing product only for the last subcategory in PrestaShop 1.7. I.e.
    Cat1
    -Cat1.1
    -Cat1.1.1
    -Prd1
    -Prd2
    -Cat1.1.2
    -Cat1.2
    -Cat1.2.1
    -Cat1.3
    Than i will show Cat1.1 Cat1.2 Cat1.3 if i select Cat1
    If i select Cat1.1 it will show Cat1.1.1 and Cat1.1.2
    Finaly if i select Cat1.1.1 it will show product Prd1 and Prd2

    How can i achieve this in 1.7 Version

  2. Ion, disabled subcategories should already be hidden, do you have any references on this issue?

  3. hello Lena
    thanks for cod
    have you any idea how ti hide disabled subcategories from listing ?

    regards

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

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

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

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

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

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

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

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

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

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

  13. 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).

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

  15. 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

  16. 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

Post a new comment

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