Un configurateur produit pensé pour du grand public (couleurs, tailles, options esthétiques) ne ressemble en rien à ce qu’attend un fabricant industriel : ici, il s’agit de sélectionner une référence technique précise parmi des dizaines de variantes, définies par des critères comme le diamètre, la matière ou la tolérance de fabrication, sans aucune dimension esthétique dans le choix.
Ce tutoriel détaille la construction d’un composant de sélection de références techniques avec l’éditeur atomique Elementor V4, pensé pour être réutilisé sur plusieurs gammes de produits d’un même fabricant. La demande de devis en ligne, souvent associée à ce type d’outil, ne fait pas partie de ce périmètre : le composant se limite à aider le visiteur à identifier la référence qui correspond à son besoin.
Modéliser les données techniques en amont
Avant toute construction visuelle, chaque référence produit doit exister comme un article d’un type de contenu personnalisé dédié, avec des champs de métadonnées structurés pour chaque critère technique pertinent (diamètre, matière, tolérance, gamme d’appartenance). Cette modélisation conditionne directement la capacité du configurateur à filtrer correctement les résultats par la suite.
Un exemple de structure de données
{
"reference": "RX-4402",
"gamme": "brides-inox",
"diametre_mm": 60,
"matiere": "inox 316L",
"tolerance": "H7"
}Construire le composant de sélection
- Créer un widget Loop Grid interrogeant le type de contenu des références techniques, filtré par la gamme concernée.
- Ajouter des widgets de formulaire permettant au visiteur de restreindre la liste selon un ou plusieurs critères (diamètre, matière), en s’appuyant sur des paramètres d’URL transmis à la requête du Loop Grid.
- Afficher, pour chaque référence retenue, une fiche technique synthétique construite avec des balises dynamiques personnalisées pointant vers les métadonnées de la référence.
- Convertir l’ensemble en composant réutilisable, avec la gamme de produits comme seul paramètre variant d’une instance à l’autre.
- Dupliquer ce composant sur les pages des autres gammes, en changeant uniquement le filtre de gamme appliqué à la requête.
Le filtrage par critères, point le plus délicat
Le filtrage dynamique par critère technique dépasse ce que le Loop Grid propose nativement en configuration standard : il a fallu ajouter un filtre personnalisé sur la requête du Loop Grid, accroché au hook elementor/query/query_args, pour injecter les paramètres de filtrage transmis depuis le formulaire de sélection.
add_action( 'elementor/query/piece_technique_query', function( $query ) {
if ( ! empty( $_GET['diametre'] ) ) {
$query->set( 'meta_key', 'diametre_mm' );
$query->set( 'meta_value', absint( $_GET['diametre'] ) );
}
} );Cette approche garde la souplesse visuelle d’Elementor pour l’affichage des résultats, tout en confiant la logique de filtrage à du code PHP classique, plus fiable qu’un montage entièrement visuel pour ce type de croisement de critères multiples.
Ce que ce composant apporte concrètement au fabricant
- Un seul composant à maintenir pour l’ensemble des gammes, plutôt qu’une page de sélection reconstruite manuellement pour chacune.
- Une cohérence visuelle garantie entre les différentes gammes de produits, grâce au composant partagé.
- Une évolution facilitée : l’ajout d’un nouveau critère de filtrage se fait une seule fois, dans le composant source, plutôt que sur chaque page de gamme séparément.
Sur ce type de projet B2B, mieux vaut toujours valider la structure des critères techniques avec le bureau d’études avant de construire le composant : un critère mal modélisé dès le départ complique ensuite tout le filtrage côté visiteur.
En résumé
Un configurateur de références techniques n’a pas besoin d’une logique commerciale sophistiquée pour être utile : l’essentiel de sa valeur tient dans la qualité de la modélisation des données techniques en amont, et dans la capacité du composant Elementor à s’adapter à plusieurs gammes sans duplication. La demande de devis, elle, reste une brique fonctionnelle à part entière, à traiter séparément.
