Filtre WooCommerce à curseur de plage pour attributs et champs méta

Puissance, longueur, diagonale d’écran, année, kilométrage : les données numériques d’un produit appellent un curseur de plage plutôt qu’une longue liste de cases à cocher. Un filtre WooCommerce à curseur de plage pour les attributs s’active facilement dans HUSKY, mais il est tout aussi facile de se retrouver avec un curseur qui affiche 100000 avant 9000, qui scinde 1,9 en deux valeurs ou qui va toujours de 0 à 100. La cause est presque toujours la même : il existe deux curseurs différents, et ils traitent les nombres différemment. Ce guide explique les deux, la configuration de chacun, et les solutions pour un ordre incorrect, les décimales et les plages vides.

Deux curseurs de plage : valeurs d’attribut ou champ méta numérique

HUSKY peut construire un curseur de plage à partir de deux types de données, et ce choix détermine ce que le curseur peut faire.

La différence essentielle : les termes d’attribut sont du texte. WordPress stocke 9000 et 100000 comme des noms, et non comme des nombres ; le curseur d’attribut ne peut donc que parcourir une liste de termes dans un ordre donné. Il ne calcule jamais. Le curseur de champ méta compare des nombres dans la base de données, de sorte qu’il gère toute valeur d’une plage, y compris des valeurs qu’aucun autre produit n’a.

Les attributs personnalisés saisis directement dans l’onglet Attributs d’un produit, sans attribut global derrière eux, ne sont pas des taxonomies, et aucun type de filtre ne peut les utiliser. Créez d’abord un attribut global sous Produits → Attributs (voir la gestion des taxonomies de produits dans la documentation de WooCommerce).

Configurer un filtre à curseur de plage pour les attributs

1. Créez l’attribut global, par exemple Puissance (Power), et ajoutez ses valeurs comme termes : 5, 7.5, 10, 15. Attribuez-les aux produits comme d’habitude.
2. Ouvrez WooCommerce → Réglages → Products Filter → Structure et définissez le type de cet attribut sur Curseur (Slider). L’extension Slider ajoute ce type.
3. Cliquez sur le bouton options supplémentaires (additional options) (la roue dentée) à côté de l’attribut et définissez les options du curseur :
   • Type (Type) : double (double) pour une plage de début à fin ; simple (single) pour une seule poignée qui sélectionne tout depuis la première valeur jusqu’à la poignée (« jusqu’à 10 kW »).
   • Pas de la grille (Grid step) : quelles étiquettes sous le curseur sont visibles. 1 les affiche toutes, 2 une sur deux, -1 masque les étiquettes situées entre les extrémités. Utile lorsque de longues valeurs se chevauchent.
   • Activer le recomptage dynamique (Enable dynamic recount) : retire les valeurs sans produits dans les résultats actuels (voir plus bas).
   • Thème du curseur (Slider skin) : le design de ce curseur.
4. Laissez Logique de filtrage (Logic of filtering) sur OR. Le curseur envoie chaque terme de la portion choisie, par exemple pa_power=5,7-5,10, et il suffit qu’un produit en ait un seul. Avec AND, un produit devrait les avoir tous, et rien ne serait trouvé.

Comme une plage correspond aux « termes situés entre les poignées », l’ordre des termes constitue toute la logique du curseur. Si 6.5 se trouve après 8.2 dans la liste, une plage de 6 à 7 l’ignore. La section suivante corrige l’ordre.

Valeurs du curseur d’attribut dans le mauvais ordre

Symptômes typiques : 100000 vient avant 9000, 10 et 11 viennent avant 2, les valeurs négatives vont de -1, -2, -3 à 0, 1, ou les poignées sautent d’avant en arrière pendant le glissement. Tout cela relève d’un tri textuel. La solution consiste à donner aux termes un ordre numérique.

Idéal : laisser WooCommerce trier l’attribut numériquement

Allez dans Produits → Attributs, modifiez l’attribut et réglez Ordre de tri par défaut (Default sort order) sur Nom (numérique) (Name (numeric)). WooCommerce ordonne alors les termes selon la valeur numérique de leur nom, ce qui gère les décimales écrites avec un point, les nombres négatifs et les noms qui commencent par un nombre, comme 10 cm. Dans les options supplémentaires du curseur, laissez Trier les termes (Sort terms) sur Par défaut (Default) afin que HUSKY conserve cet ordre. Si Mettre les termes en cache (Cache terms) est activé (Avancé → Options), appuyez ensuite sur vider le cache des termes (clear terms cache).

Pour une échelle textuelle, choisissez plutôt Tri personnalisé (Custom ordering) et faites glisser les termes à leur place sur l’écran Configurer les termes (Configure terms) de l’attribut : Souple, Moyen, Moyen-dur, Dur. Le même glisser-déposer fonctionne pour toute liste numérique dont vous voulez contrôler l’ordre à la main.

Les options Trier les termes propres à HUSKY

L’option Trier les termes (Sort terms) dans les options supplémentaires du curseur remplace l’ordre par défaut :

• Titre (Title) utilise le tri naturel des noms : correct pour les nombres entiers positifs (2 avant 10) et pour des noms comme 10 cm, mais pas pour les décimales ni les nombres négatifs.
• Numérique (Numeric.) compare la valeur entière du slug (slug) du terme. Cela ne fonctionne que pour les nombres entiers positifs : le slug de 6.5 est 6-5, qui compte pour 6, et WordPress supprime le signe moins initial lorsqu’il crée un slug, de sorte que -3 est trié comme 3.

Code : ordre numérique pour tout curseur de taxonomie

Pour une taxonomie personnalisée, où Nom (numérique) (Name (numeric)) de WooCommerce n’est pas disponible, triez les valeurs du curseur dans le code. Le filtre woof_sort_terms_before_out reçoit les termes de chaque filtre et le type de filtre :

/**
 * HUSKY: order the values of every taxonomy range slider by their number
 * (decimals with a dot and negative numbers included).
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_sort_terms_before_out', function ( $terms, $type ) {
    if ( 'slider' === $type && is_array( $terms ) ) {
        uasort( $terms, function ( $a, $b ) {
            return (float) $a['name'] <=> (float) $b['name'];
        } );
    }
    return $terms;
}, 20, 2 );

Les termes sans nombre initial (une échelle textuelle) comptent tous pour 0 ici et conservent leur ordre existant ; l’extrait ne perturbe donc pas ces curseurs.

Décimales, virgules et pas irréguliers dans les curseurs d’attribut

• Écrivez les décimales avec un point. Le curseur reçoit ses étiquettes sous la forme d’une seule liste séparée par des virgules ; un terme nommé 1,9 devient donc deux étiquettes, 1 et 9, et chaque position qui suit pointe vers le mauvais terme. Renommez ces termes en 1.9. Cela n’a rien à voir avec le réglage du séparateur décimal de la boutique : les noms de termes sont du texte brut.
• Les positions sont espacées régulièrement par terme, et non par valeur. Les termes 1, 2, 5 et 50 obtiennent quatre crans égaux. Si le curseur doit paraître proportionnel, ajoutez les valeurs intermédiaires manquantes comme termes.
• Un curseur a besoin d’au moins deux valeurs. Avec seulement deux termes, les poignées ne peuvent se placer qu’aux deux extrémités. S’il reste moins de deux valeurs après le recomptage dynamique, le curseur n’est pas affiché du tout.
• Seuls les termes existants peuvent être choisis. Un produit dont la valeur est 6.5 n’est trouvé que si le terme 6.5 existe et se situe entre les poignées.

Curseur de plage pour les champs méta : dimensions, années et autres nombres

Lorsque la valeur est une véritable mesure, un curseur de champ méta est généralement le meilleur outil : il compare des nombres, accepte des champs de début/fin et reste rapide avec des milliers de valeurs différentes. Configuration avec l’extension Meta Fields :

1. Ouvrez l’onglet Données méta (Meta Data) des réglages du filtre. Saisissez la clé sous Ajouter une clé personnalisée à la main (Add Custom key by hands), ou utilisez Obtenir les clés de n’importe quel produit à partir de son ID (Get keys from any product by its ID) pour voir quelles clés possède un produit.
2. Définissez le type du champ sur nombre (number) et son affichage sur Curseur (Slider). Le curseur n’est pas proposé pour les champs de texte ou de date. Enregistrez.
3. Ouvrez les options supplémentaires du champ et renseignez Plage (Range) sous la forme min^max, par exemple 10^250. Définissez Pas (Step) (0.5 fonctionne) et, si nécessaire, Préfixe (Prefix), Suffixe (Postfix) (cm), Afficher les champs de saisie (Show inputs) pour les champs numériques de début/fin, et Utiliser la mise en forme (Use prettify) pour un séparateur de milliers.
4. Placez le nouvel élément de filtre dans l’onglet Structure comme n’importe quel autre.

Clés utiles : WooCommerce stocke les dimensions d’expédition et le poids d’un produit sous _length, _width, _height et _weight. Un champ numérique ACF est stocké sous son nom de champ. Les détails sur les clés méta se trouvent dans la documentation sur les données méta.

À savoir sur les curseurs de champ méta :

• La plage n’est jamais calculée. Le curseur affiche exactement la Plage (Range) que vous avez saisie ; un champ vide revient à 0–100. Trouver le véritable minimum et maximum reviendrait à lire chaque produit à chaque affichage de page. Le recomptage dynamique décide quels filtres et quelles valeurs sont affichés, pas où un curseur commence et finit. Mettez la plage à jour lorsque de nouveaux produits la dépassent.
• Stockez des nombres simples avec un point comme séparateur décimal et sans séparateur de milliers : 1250.5. La base de données ne lit que le nombre en début de valeur ; 1,250.5 est donc comparé comme 1 et 1250,5 comme 1250.
• Années : plage telle que 1990^2026, pas de 1, et Utiliser la mise en forme (Use prettify) sur Non (No), sinon 2026 s’affiche sous la forme 2 026.
• Variations : ce sont les métadonnées du produit lui-même qui sont consultées. Si la valeur n’existe que sur les variations, enregistrez-la aussi sur le produit parent, ou utilisez un attribut.

Valeurs décimales : woof_slider_meta_query_type

Par défaut, le curseur de champ méta compare les valeurs comme NUMERIC, que MySQL traite comme des nombres entiers. Un produit à 10.11 est alors trouvé dans la plage 1–10, et 4.2, 4.4 et 4.6 comptent tous pour 4. Pour comparer des décimales, changez le type avec le filtre woof_slider_meta_query_type :

/**
 * HUSKY: compare these meta sliders as decimal numbers.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_slider_meta_query_type', function ( $type, $meta_key ) {
    if ( in_array( $meta_key, array( '_length', '_width', '_height', 'screen_size' ), true ) ) {
        return 'DECIMAL(10,2)'; // up to 99999999.99
    }
    return $type;
}, 10, 2 );

Dans DECIMAL(M,D), M est le nombre total de chiffres et D le nombre de chiffres après la virgule. Choisissez-les en fonction de votre plus grande valeur : avec DECIMAL(5,3), le maximum est 99.999, et toute valeur supérieure est traitée comme 99.999.

Masquer les curseurs qui ne s’appliquent pas à la catégorie courante

• Curseur d’attribut : réglez Activer le recomptage dynamique (Enable dynamic recount) sur Oui (Yes) dans ses options supplémentaires. Les valeurs sans produits dans la catégorie courante et la sélection de filtres disparaissent, et s’il reste moins de deux valeurs, le curseur est retiré. Chaque valeur coûte une requête de comptage supplémentaire ; sur des attributs de plusieurs centaines de termes, surveillez donc la vitesse de la page ou utilisez un curseur de champ méta.
• Curseur de champ méta : avec Masquer les termes vides (Hide empty terms) sur Oui (Yes) dans l’onglet Options, un curseur de champ méta qui n’a aucun produit dans sa plage parmi les résultats actuels n’est pas affiché.

Un curseur d’attribut sans valeurs est retiré par le script du plugin après le chargement de la page ; son titre peut donc apparaître brièvement. Ce CSS le masque dès le départ (Apparence → Personnaliser → CSS additionnel, ou la feuille de style de votre thème enfant) :

/* HUSKY: hide empty taxonomy sliders before the script removes them */
.woof_container_slider:has(.woof_hide_slider) {
    display: none;
}

Lorsque le produit lui-même couvre une plage

Un curseur trouve des produits à partir d’une seule valeur par produit. Si un produit couvre une plage (convient aux tailles de 150 à 190 cm, de 3 à 10 joueurs), il n’existe pas de recherche intégrée de « chevauchement de plages ». Deux modèles possibles :

• Deux champs méta, par exemple players_min et players_max, chacun avec son propre curseur. Un visiteur qui cherche un jeu pour 4 joueurs règle le premier curseur sur 1–4 et le second sur 4–10.
• Un attribut avec un terme par valeur (150, 151 ... 190), tous les termes qui conviennent étant attribués au produit, et l’attribut affiché sous forme de curseur. Attribuez les termes en masse plutôt qu’à la main.

Liste de contrôle

• Curseur d’attribut : attribut global, décimales écrites avec un point, Ordre de tri par défaut (Default sort order) réglé sur Nom (numérique) (Name (numeric)) ou termes glissés dans l’ordre, Logique de filtrage (Logic of filtering) sur OR.
• Curseur de champ méta : type de champ nombre (number), valeurs numériques simples, Plage (Range) renseignée sous la forme min^max, un type décimal pour les valeurs fractionnaires.
• Nombreuses valeurs distinctes ou véritables mesures : un curseur de champ méta plutôt qu’un attribut de plusieurs centaines de termes.
• Curseurs dans les mauvaises catégories : Activer le recomptage dynamique (Enable dynamic recount) pour les curseurs d’attribut, Masquer les termes vides (Hide empty terms) pour les curseurs de champ méta.

Si un curseur affiche toujours des valeurs incorrectes après ces étapes, posez la question sur le forum d’assistance HUSKY en indiquant l’attribut ou la clé méta, quelques exemples de valeurs et un lien vers la page.