Activer le bouton filtre de la navigation à facettes horizontale PrestaShop

Le problème : un bouton filtre invisible sur la navigation horizontale

Sur certains thèmes PrestaShop — notamment les thèmes premium comme Warehouse — la navigation à facettes peut être configurée en mode horizontal. Cependant, il arrive que le bouton permettant de déclencher le filtrage soit tout simplement invisible, bien que le module de navigation à facettes soit correctement installé et configuré.

Le symptôme est clair : les filtres sont présents dans le DOM HTML, le module fonctionne, mais le bouton d'activation du panneau de filtres ne s'affiche pas côté front-office. Le marchand a l'impression que la fonctionnalité est cassée, alors qu'il s'agit d'un simple problème CSS.

Diagnostic : identifier la règle CSS responsable

La cause la plus fréquente est une règle display: none appliquée sur le conteneur du bloc de recherche à facettes. Dans la majorité des cas, c'est l'élément #facets_search_center qui est masqué par le CSS du thème.

Étape 1 : Désactiver la compression CSS

Avant de chercher la ligne fautive, il faut pouvoir lire le CSS de manière lisible. Rendez-vous dans :

Back-office → Paramètres avancés → Performances

Désactivez temporairement :

• La concaténation CSS (CCC)
• La minification CSS

Cela permet d'inspecter les fichiers CSS non compressés et de localiser précisément la règle problématique.

Étape 2 : Localiser la règle dans le fichier thème

Ouvrez les outils de développement de votre navigateur (F12), inspectez la zone où le bouton filtre devrait apparaître, et cherchez l'élément #facets_search_center.

Dans le cas du thème Warehouse, la règle se trouve typiquement dans :

/themes/votre-theme/assets/css/theme.css

Vous y trouverez une déclaration similaire à :

#facets_search_center {
  display: none;
}

La correction

Solution 1 : Modification directe du fichier CSS du thème

Localisez la règle #facets_search_center dans votre fichier theme.css et remplacez display: none par display: block (ou retirez simplement la propriété) :

/* Avant */
#facets_search_center {
  display: none;
}

/* Après */
#facets_search_center {
  display: block;
}

Solution 2 : Surcharge via le CSS personnalisé (recommandé)

Pour éviter de modifier directement le fichier du thème — ce qui serait écrasé à la prochaine mise à jour — privilégiez une surcharge CSS. Ajoutez cette règle dans votre fichier custom.css ou via le module de personnalisation CSS de votre thème :

#facets_search_center {
  display: block !important;
}

Le !important garantit que votre règle prend le dessus sur celle du thème, quelle que soit la spécificité d'origine.

Solution 3 : Utiliser un thème enfant (PrestaShop 8.x)

Sur PrestaShop 8.x, la bonne pratique consiste à créer un thème enfant pour surcharger le CSS sans toucher au thème parent :

/themes/votre-theme-child/assets/css/custom.css

#facets_search_center {
  display: block;
}

Cela assure la pérennité de votre correction lors des mises à jour du thème parent.

Pourquoi cette règle existe-t-elle ?

Les développeurs de thèmes masquent parfois le bloc de filtres horizontaux par défaut car :

• **Le thème supporte plusieurs dispositions** (verticale en sidebar, horizontale en haut de listing) et le mode horizontal est désactivé par défaut
• **La gestion se fait via JavaScript** : le thème attend un événement ou un paramètre de configuration pour afficher dynamiquement le panneau
• **Conflit entre versions** : certaines mises à jour du thème réinitialisent les paramètres d'affichage

Dans tous les cas, la solution reste de forcer l'affichage du conteneur #facets_search_center via CSS.

Vérification après correction

Après avoir appliqué la correction :

1. Videz le cache PrestaShop (**Paramètres avancés → Performances → Vider le cache**)
2. Réactivez la compression CSS si vous l'aviez désactivée
3. Videz le cache de votre navigateur (Ctrl + Shift + R)
4. Vérifiez que le bouton filtre apparaît bien sur vos pages catégories
5. Testez sur mobile — certains thèmes ont des règles CSS responsive qui peuvent masquer l'élément à nouveau via des media queries

/* Vérifiez aussi les media queries */
@media (max-width: 768px) {
  #facets_search_center {
    display: block !important; /* Assurez-vous qu'il reste visible sur mobile */
  }
}

Bonnes pratiques pour la navigation à facettes

• **Performances** : limitez le nombre de filtres affichés simultanément (5-7 maximum) pour ne pas surcharger la page
• **SEO** : configurez les URLs de filtres en `noindex` ou utilisez le canonical vers la catégorie parente pour éviter le contenu dupliqué
• **UX** : sur mobile, préférez un panneau de filtres en overlay plutôt qu'un affichage horizontal qui consomme de l'espace vertical