Une boutique de mobilier sur mesure nous a contactés avec une demande précise : permettre à ses clients de choisir la couleur d’un plateau de table et la finition des pieds, avec un aperçu du prix qui change instantanément, sans passer par une extension de configurateur 3D hors de prix et surdimensionnée pour son besoin réel. Le produit comptait quatre couleurs de plateau et trois finitions de pieds, soit douze variations gérées nativement par WooCommerce.
La tentation classique est de partir chercher une extension spécialisée. Sur un catalogue aussi limité en combinaisons, cela revient à payer un abonnement mensuel pour un besoin qu’Elementor Pro et les Dynamic Tags couvrent déjà, moyennant un peu de JavaScript pour la synchronisation visuelle.
Le montage côté Elementor
La structure de page repose sur le widget natif de sélection de variation WooCommerce, posé dans un container à côté d’une zone d’aperçu construite avec des widgets Image classiques, un par couleur de plateau, superposés et masqués par défaut sauf le premier. Le prix affiché utilise un Dynamic Tag Post Meta pointant vers le prix de la variation, mais ce tag seul ne se met pas à jour tout seul au changement de sélection : il faut lui donner un coup de main en JavaScript.
Le script de synchronisation
Le script écoute l’événement standard émis par WooCommerce lors d’un changement de variation, puis ajuste la classe CSS active sur les images d’aperçu et force une relecture du prix affiché.
jQuery( document ).on( 'found_variation', 'form.variations_form', function( event, variation ) {
var wrapper = jQuery( this ).closest( '.e-woo-config' );
wrapper.find( '.apercu-plateau' ).removeClass( 'actif' );
wrapper.find( '.apercu-plateau[data-attribut="' + variation.attributes.attribute_pa_couleur + '"]' )
.addClass( 'actif' );
wrapper.find( '.prix-configurateur' ).text( variation.display_price + ' €' );
} );
jQuery( document ).on( 'reset_data', 'form.variations_form', function() {
jQuery( '.apercu-plateau' ).removeClass( 'actif' );
jQuery( '.apercu-plateau:first' ).addClass( 'actif' );
} );Pourquoi les Dynamic Tags seuls ne suffisent pas
Les Dynamic Tags d’Elementor Pro savent parfaitement afficher une donnée au chargement de la page : le prix par défaut, la description courte, l’image principale. Ce qu’ils ne font pas nativement, c’est réagir à une interaction client après le chargement, puisqu’ils sont résolus côté serveur au moment du rendu. Le JavaScript prend le relais exactement là où s’arrête la logique des Dynamic Tags, sans les remplacer : le prix initial reste géré par le tag, seule sa mise à jour dynamique passe par le script.
Les limites honnêtes de cette approche
- Au-delà d’une vingtaine de combinaisons de variantes, la gestion manuelle des images d’aperçu devient ingérable.
- Aucune visualisation 3D ou composition d’image en couches n’est possible sans développement supplémentaire conséquent.
- La solution dépend du widget natif WooCommerce de sélection de variation ; un widget de configurateur maison plus poussé demanderait un développement de widget custom à part entière.
- Chaque nouvelle variante ajoutée côté produit implique d’ajouter manuellement une image d’aperçu correspondante.
Pour ce client, ces limites n’ont posé aucun problème : le catalogue reste stable, les combinaisons sont peu nombreuses, et la maintenance revient à ajouter une image lors d’un ajout de couleur, ce qui arrive une ou deux fois par an.
Le test de validation avant mise en production
Avant de livrer, nous avons systématiquement testé le comportement du script sur trois scénarios : sélection complète des attributs, réinitialisation via le bouton natif WooCommerce, et rechargement de page avec une variation déjà en mémoire de session. Ce dernier cas est souvent oublié et provoque un décalage entre le prix affiché et l’aperçu visuel si le script ne relit pas correctement l’état initial du formulaire.
Un configurateur maison bien ciblé sur un catalogue simple coûte une demi-journée de développement. Une extension généraliste mal dimensionnée coûte un abonnement chaque mois, pour une flexibilité que le projet n’exploitera jamais.
En résumé
Avant d’investir dans une extension de configurateur produit, il vaut la peine d’évaluer si le nombre réel de variantes gérées par le catalogue justifie cette dépense. Sur un produit à combinaisons limitées, la combinaison native de WooCommerce, des Dynamic Tags Elementor Pro et d’un script de synchronisation ciblé livre un résultat fluide, sans dépendance supplémentaire à maintenir dans le temps.
