Filtre de produits WooCommerce sur une page personnalisée ou l’accueil

18 il y a des heures

Vous placez le filtre de produits WooCommerce sur une page personnalisée, une page d’atterrissage ou la page d’accueil, et l’un de ces trois cas se produit : le formulaire s’affiche mais aucun produit n’apparaît, chaque clic renvoie vers la boutique, ou la page se recharge sans que rien ne change. Il ne s’agit pas d’un bug. Le shortcode [woof] n’affiche que le formulaire de recherche, et le plugin décide où montrer les résultats en regardant ce qui se trouve d’autre sur la page. Voici comment fonctionne cette décision, ainsi que les configurations exactes de shortcodes pour les cas courants : filtre et produits sur une même page, page limitée à une catégorie ou à un attribut, et formulaire en page d’accueil qui envoie les visiteurs vers les résultats.

Où un filtre de produits WooCommerce sur une page personnalisée envoie les visiteurs

Lorsque le visiteur clique sur Filtrer (Filter) (ou modifie une option avec l’envoi automatique activé), le script du plugin construit un lien du type ?swoof=1&pa_color=red et cherche sur la page actuelle une liste de produits qu’il peut actualiser : la sortie de [woof_products], un shortcode WooCommerce [products], ou toute liste .products située dans un conteneur .woocommerce. S’il en trouve une, les résultats s’ouvrent sur la même page. Sinon, le visiteur est dirigé vers la page boutique, c’est‑à‑dire la page sélectionnée dans WooCommerce → Réglages → Produits → Page boutique (WooCommerce → Settings → Products → Shop page).

Ce que contient la page	Où apparaissent les résultats
`[woof]` uniquement	La page boutique, avec les filtres sélectionnés
`[woof]` + `[woof_products]`	La même page ; sans rechargement avec `is_ajax=1`
`[woof]` + `[products]` de WooCommerce	La même page, après un rechargement
`[woof redirect="..."]` et aucune grille de produits AJAX	L’URL indiquée dans `redirect`
Une page de produit unique (les produits similaires ne comptent pas)	La page boutique, ou l’URL de `redirect`

Deux conséquences méritent d’être connues avant de construire quoi que ce soit. Si aucune page boutique n’est définie dans WooCommerce, il n’y a nulle part où envoyer le visiteur, et le filtre recharge la page sur laquelle il se trouve, y compris une page de produit unique. Et si votre page d’accueil affiche un bloc de produits (produits mis en avant, carrousel de promotions construit avec le balisage WooCommerce), le filtre traite ce bloc comme la grille de résultats et recharge la page d’accueil au lieu d’ouvrir la boutique.

Filtre et produits sur la même page

Pour une page qui fonctionne comme une petite boutique, placez deux shortcodes. Ils peuvent se trouver dans des blocs ou des colonnes différents, par exemple le formulaire dans une colonne étroite et les produits dans la colonne large :

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

per_page : renseignez‑le. Sans cet attribut, [woof_products] utilise Produits par page (Products per page) de l’onglet Avancé → Options (Advanced → Options) du plugin et, si cette valeur est -1 (la valeur par défaut), le réglage Les pages du blog doivent afficher au plus (Blog pages show at most) de WordPress, soit 10 sur la plupart des sites.
columns : nombre de produits par ligne. Le respect de cet attribut dépend du CSS du thème.
is_ajax=1 : les résultats sont remplacés sans rechargement de la page, et la barre d’adresse est mise à jour afin que la page filtrée puisse être partagée. Avec is_ajax=0, la page se recharge. Sur une page personnalisée, cet attribut est ce qui active l’AJAX ; l’option Essayer d’ajaxifier la boutique (Try to ajaxify the shop) n’affecte que la boutique et les archives de catégories.

[woof_products] affiche les produits avec la fiche produit de votre thème (le modèle content-product.php) et exécute les hooks standard de la boucle WooCommerce : le nombre de résultats, le tri et la pagination apparaissent donc comme sur la page boutique.

Le shortcode [products] de WooCommerce est lui aussi filtrable : tant qu’un filtre est actif, HUSKY ajoute ses conditions à la requête de ce shortcode. [products limit="12" columns="4" paginate="true"] placé à côté de [woof] fonctionne avec rechargement de page ; pour l’AJAX, utilisez son jumeau enregistré par HUSKY, [products_woof], avec les mêmes attributs.

Limiter la page à une catégorie, une étiquette ou un attribut

Une page pour une marque, un lieu ou « uniquement les smartphones reconditionnés » nécessite une condition permanente que les visiteurs ne peuvent pas supprimer. C’est le rôle de l’attribut taxonomies, qui doit figurer dans les deux shortcodes :

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

La syntaxe est taxonomie:ID. Plusieurs ID d’une même taxonomie sont séparés par des virgules ; des taxonomies différentes sont reliées par + et doivent toutes correspondre. Avec la logique OR par défaut, product_cat:87,92+pa_brand:14 signifie « dans la catégorie 87 ou 92, et de la marque 14 », et les produits des catégories enfants de 87 et 92 sont inclus. Si vous avez basculé une taxonomie en logique AND dans les réglages du plugin, cette logique s’applique aussi à ses ID ici.

Des ID de termes, pas des slugs ni des noms

Le plugin convertit chaque valeur en terme à partir de l’ID indiqué. Un slug comme cadeau ou un nom comme Yes n’est pas un ID : il ne correspond à rien, et cette partie de la condition est ignorée sans aucune erreur, de sorte que la page affiche tous les produits. Pour trouver un ID, ouvrez Produits → Catégories (Products → Categories) (ou Étiquettes (Tags), ou Produits → Attributs → Configurer les termes (Products → Attributes → Configure terms)), survolez le lien Modifier (Edit) du terme et lisez le nombre qui suit tag_ID= dans le lien.

Le nom de la taxonomie doit être exact : product_cat, product_tag, pa_ suivi du slug de l’attribut pour les attributs globaux (pa_color, et non color), ou le slug d’une taxonomie personnalisée, par exemple une taxonomie de marques. Les attributs personnalisés saisis directement dans un produit ne sont pas des taxonomies et ne peuvent pas être utilisés ici.

Ce que fait chaque shortcode de la valeur

Dans [woof_products], elle limite les produits. C’est cette partie qui fait le travail.
Dans [woof], elle limite ce que le formulaire compte : avec Afficher le compteur (Show count) et Recomptage dynamique (Dynamic recount) activés, les nombres à côté des options et la plage de prix décrivent ce même ensemble limité, et avec Masquer les termes vides (Hide empty terms), les options sans produit sur cette page disparaissent. En mode AJAX, le formulaire est redessiné après chaque filtrage avec la valeur de [woof_products] ; gardez donc les deux identiques, sinon les compteurs changent dès le premier clic.

La condition ne figure pas dans l’URL ; elle fait partie de la page. La réinitialisation, ou le fait de tout décocher, ramène à la page, et la condition y est toujours. Masquez les blocs que vous avez préfiltrés avec tax_exclude (noms de taxonomies, séparés par des virgules), ou construisez un formulaire réduit avec tax_only et by_only, par exemple [woof tax_only="pa_brand,pa_size" by_only="by_price"] ; by_only="none" masque le prix, la recherche textuelle et les autres filtres qui ne sont pas des taxonomies. D’autres combinaisons figurent dans comment afficher des filtres différents sur différentes pages, et la liste complète des attributs sur la page du shortcode [woof]. Pour préfiltrer par un champ meta plutôt que par une taxonomie, consultez manipuler les données de recherche.

Un filtre en page d’accueil qui redirige vers la boutique

La configuration la plus fiable pour une page d’accueil est un formulaire de recherche qui envoie les visiteurs vers une page de résultats :

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

redirect : la page de résultats. Ce peut être la boutique, une archive de catégorie comme https://example.com/product-category/tires/ (les résultats restent alors dans cette catégorie, car la catégorie figure dans l’adresse), ou une page personnalisée contenant [woof] et [woof_products]. Utilisez une URL propre, sans ? ; le plugin y ajoute ?swoof=1&....
autosubmit=1 seul envoie le visiteur ailleurs dès le premier changement, ce qui convient à une liste déroulante unique. Pour un formulaire à plusieurs champs, ajoutez ajax_redraw=1 : chaque choix ne fait qu’actualiser le formulaire (compteurs, options dépendantes), et le bouton Filtrer (Filter) ouvre la page de résultats. Avec autosubmit=0, rien ne se passe tant que le visiteur n’a pas cliqué sur Filtrer (Filter).

Les règles à l’origine de la plupart des signalements « la redirection ne fonctionne pas » :

La redirection est ignorée en mode AJAX. Si la même page contient aussi [woof_products is_ajax=1] ou [products_woof], le formulaire filtre cette grille à la place.
Une page, un filtre. Lorsque plusieurs formulaires se trouvent sur une page, le script prend redirect, autosubmit et ajax_redraw dans le premier formulaire qu’il trouve. Un second formulaire dans une barre latérale ou un filtre automatique au‑dessus des produits peut écraser sans bruit le formulaire que vous avez configuré. Le widget HUSKY dispose de son propre champ Rediriger vers (Redirect to) pour cet usage.
Une condition taxonomies sur le formulaire de la page d’accueil ne suit pas la redirection ; seul ce que le visiteur a sélectionné est transmis dans l’URL. Si le formulaire concerne une seule catégorie, redirigez vers l’archive de cette catégorie.

Pourquoi ne pas filtrer sur la page d’accueil statique elle‑même

Le filtrage sur place fonctionne sur les pages ordinaires. La page d’accueil statique fait exception : des paramètres comme product_cat ou product_tag sont aussi des variables de requête WordPress, et lorsqu’ils apparaissent à l’adresse racine du site, WordPress cesse de traiter la requête comme votre page d’accueil. Selon le thème, les visiteurs voient alors une archive de catégorie, une page vide, ou un titre Page introuvable (Page not found) ajouté par le plugin SEO. Placez le filtre et [woof_products] sur une page normale (par exemple /products/) et laissez le formulaire de la page d’accueil rediriger vers elle.

Afficher les produits seulement après le filtrage du visiteur

Pour une page d’atterrissage qui doit s’ouvrir avec le formulaire seul, ajoutez display_on_search=1 à [woof_products]. Tant qu’aucun filtre n’est appliqué, la zone des produits reste vide ; après la première recherche, la page affiche les résultats. La documentation décrit cet attribut pour le mode avec rechargement ; utilisez‑le donc avec is_ajax=0. Détails sur la page du shortcode [woof_products].

Pages de produit unique, menus et grilles des constructeurs de pages

Pages de produit unique. Un filtre placé dans la barre latérale d’une page de produit ouvre toujours la boutique (ou son URL redirect) ; les produits similaires et les ventes incitatives ne sont pas considérés comme des résultats.
Menus et méga‑menus. Faites pointer les éléments de catégorie vers les vraies archives de catégories (/product-category/.../), et non vers des pages qui contiennent un shortcode. Les archives sont filtrables sans aucune configuration et conservent la catégorie pendant le filtrage.
Grilles de produits des constructeurs. Une grille d’Elementor, de Divi ou d’un autre constructeur qui exécute sa propre requête de produits ne réagit pas au filtre, même si le formulaire reste sur la page. Remplacez‑la par [woof_products], ou rendez sa requête filtrable comme décrit dans l’URL du filtre change mais les produits ne changent pas.
[woof_products] sur les modèles de catégories. Le shortcode ne sait pas sur quelle archive de catégorie il est placé ; il est conçu pour les pages. Sur un modèle de catégorie, il affiche tous les produits sauf si vous indiquez taxonomies ; conservez donc la boucle de produits standard de l’archive à cet endroit.

Si cela ne fonctionne toujours pas

Les guillemets sont droits. Les shortcodes copiés depuis un traitement de texte ou certaines pages web arrivent avec des guillemets typographiques (’pa_age’), que WordPress n’accepte pas comme guillemets d’attributs. Retapez‑les dans un bloc Shortcode.
Chaque valeur de taxonomies est un ID de terme numérique, le nom de la taxonomie est exact, il n’y a pas d’espaces autour de + ou de :, et les deux shortcodes portent la même valeur.
[woof_products] comporte per_page, de sorte que la page ne s’arrête pas à 10 produits.
Une page boutique est sélectionnée dans les réglages de WooCommerce.
Un seul formulaire de filtre se trouve sur la page, ou le premier porte le redirect souhaité.
La grille de produits de la page est [woof_products], [products] ou [products_woof], et non un widget de constructeur avec sa propre requête.

Si tout est en ordre et que la page se comporte encore de travers, publiez le lien de la page et les deux shortcodes exactement tels qu’ils figurent dans l’éditeur sur le forum de support HUSKY.