# Un configurateur de pièces industrielles sous Elementor V4 pour un site B2B

> Construire un composant de sélection de références techniques réutilisable entre plusieurs gammes, sans intégrer de demande de devis en ligne.

- Auteur : Clément Hadrot
- Publié le : 2026-04-08
- Mis à jour le : 2026-04-08
- Catégorie : Elementor
- URL : https://wpmoderne.dev.wordpress-developpement.fr/elementor/configurateur-pieces-industrielles-elementor-v4/

## L’essentiel

- Un seul composant paramétrable évite de dupliquer la logique de sélection par gamme
- Les balises dynamiques personnalisées relient le configurateur aux données techniques existantes
- La demande de devis en ligne reste hors périmètre de ce composant

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

> L'essentiel à retenir : Un seul composant paramétrable évite de dupliquer la logique de sélection par gamme ; Les balises dynamiques personnalisées relient le configurateur aux données techniques existantes ; La demande de devis en ligne reste hors périmètre de ce composant

1. Créer un widget Loop Grid interrogeant le type de contenu des références techniques, filtré par la gamme concernée.
2. 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.
3. 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.
4. Convertir l'ensemble en composant réutilisable, avec la gamme de produits comme seul paramètre variant d'une instance à l'autre.
5. 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.