Afficher les sous-catégories sur la page catégorie | Prestashop 1.7

Vous l’avez peut-être constaté mais sur la version Prestashop 1.7, les sous-catégories ne s’affichent pas sur les pages catégories comme sur Prestashop 1.6.

Voici un petit tutoriel, qui vous permettra de les faire apparaître rapidement.

Comment insérer les sous-catégories sur la page catégorie ?

Etape 1: Ouvrir le fichier category.tpl qui se situe dans ../themes/nomdevotretheme/templates/catalog/listing/category.tpl

Nom de votre thème = dans l’exemple suivant je prend le thème par defaut de Prestashop 1.7 qui se nomme “Classic”

Afficher les sous-catégories sur la page catégorie | Prestashop 1.7

 

Etape 2 : juste avant la dernière balise </block>, insérez le code suivant :

Ce qui doit donner

 

Etape 3: Ouvrir le fichier theme.css qui se situe dans ../themes/nomdevotretheme/assets/css/theme.css

1-theme-css-prestashop-1_7

 

Etape 4 : ajoutez le code suivant :

 

Etape 5 : et voila :

1-sous-categories-prestashop-1_7

ATTENTION: si ne vous visualisez pas les modifications, c’est sûrement un problème de cache. Veuillez consulter l’article suivant : Comment vider dans Prestashop 1.6 et Prestashop 1.7

Articles similaires

Ajouter gratuitement un live chat sur votre site | Astuce Prestashop 1.6
views 1795
Qu'est qu'un live chat ?  Le terme live chat désigne l'ensemble des moyens qui permet à un internaute de rentrer instantanément en contact  avec un e...
15% de réduction pour tous les produits de la boutique | Astuce Prestashop 1.6
views 1344
Vous désirez mettre en place une campagne de promotion :  15% de réduction pour tous les produits de la boutique Il est très facile de configurer c...
Transformer les tabs de la page d’accueil en bloc | Astuce Prestashop 1.6
views 4588
Ce tutorial va vous permettre de transformer les tabs "Populaire", "Meilleurs ventes", "Nouveaux Produits" et "Promotions" de la page d'accueil en blo...
Ajouter les fabricants dans la page produit | Astuce Prestashop 1.6
views 2312
Ce tuto va vous expliquer comment insérer les fabricants dans la page produit dans la version Prestashop 1.6 A) Mettre le nom du fabricant avec le ...
Désactiver les deux zooms de la page produit | Astuce Prestashop 1.6
views 3263
Ce tuto simple et rapide va vous permettre de désactiver les deux zooms de la page produit. Cette astuce est valable Prestashop 1.6. Le code étant ...
Comment configurer le diaporama de la page d’accueil | Prestashop 1.6 et 1.7
views 8993
Aujourd’hui, nous allons voir comment configurer le diaporama de votre page d'accueil sur votre boutique en ligne sur Prestashop 1.6 &Prestashop 1...
COMMENT AJOUTER UN TRANSPORTEUR DANS PRESTASHOP 1.6 ?
views 2362
Dans ce tutoriel, nous allons voir comment ajouter et paramétrer un transporteur, afin que vos clients puissent choisir son mode de livraison sur votr...
Installer manuellement un module PrestaShop
views 2580
Voici un petit tuto pour vous permettre d'installer manuellement votre module PrestaShop Pour ce tuto, nous allons partir du fait que vous avez ach...
Quelques variables qui peuvent vous aider pour votre mise en page – Prestashop 1.7 ...
views 7400
Dans le tuto du jour, je vais énumérer quelques variables de PrestaShop 1.6 PrestaShop 1.7 qui peuvent vous aider pour personnaliser votre site. N'...
Quelques astuces pour vous aider à créer un site e-commerce avec Prestashop
views 914
Créer son site e-commerce avec Prestashop n'est pas toujours facile. Je mettrais régulièrement des documents que vous pourrez télécharger afin de mieu...
  1. Ratha

    Bonjour et merci pour ce tuto, en effectuant les différentes insertions de codes. Les sous catégories s’affichent bien mais elles s’affichent colonne et non en ligne. Ai je loupé quelque chose. J’a regardé côté css et il me semble que le css n’est pris en compte. Problème dans le code ? ou de configuraiton ?

  2. c_majory Auteur de l’article

    Bonjour,

    difficile à dire mais je pense qu’effectivement c’est le css qui pose problème. Vous avez regardé avec firebug ?

  3. thierry

    Presta 1.7.6.3

    Bonjour, désolé de revenir depuis 2017 mais j’ai une petite quesion 🙂

    Comment rendre l’affichage responsive ?
    Car en version mobile les vignettes se chevauche au lieu de se reduire ou au lieu de s’afficher les unes en dessous des autres …

    Lorsque par exemple je mets 5 sous catégories, je peux les afficher alignés grace a la modification dans le css
    width: 25%;
    en mettant par exemple a 20% ce qui doit repondre egalement a la question precedente 🙂

    Merci beaucoup de votre avis 😉

  4. Aurelien

    pour ma part, j’ai mis ceci

    #subcategories ul li {
    float: none;
    width: 225px;
    text-align: center;
    display: inline-block;
    }

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *