Configurateur de néon personnalisé sur mesure

Étude de cas · Développement web fullstack · PHP · WooCommerce · JavaScript

Vendre du sur-mesure sans passer par un devis manuel

Light Genius conçoit et fabrique des enseignes lumineuses au néon LED, dont une grande partie sur mesure : texte personnalisé, forme, couleur, dimensions adaptées à chaque projet. Ce type de produit se prête mal à une fiche WooCommerce classique avec quelques variantes prédéfinies. Avant ce projet, composer un néon personnalisé passait par un échange manuel avec l'équipe commerciale pour cadrer chaque demande et en estimer le prix, un frein pour la conversion en ligne et une charge répétitive côté équipe.

Cette mission consistait à développer un plugin WordPress sur mesure : un configurateur produit interactif, intégré nativement à WooCommerce, qui permet à chaque visiteur de composer son néon, de voir son rendu en direct et de connaître son prix exact, sans intervention humaine avant la commande.

Les besoins du client : rendre le sur-mesure self-service

Le cadrage a fait ressortir des exigences précises, à la croisée du commerce, du design produit et de la contrainte de fabrication :

• Composition en direct : le client doit pouvoir choisir son texte, sa police, ses dimensions, la version intérieur ou extérieur, ainsi que la forme et la couleur du support acrylique, sans quitter la page produit.
• Un rendu crédible avant achat : voir concrètement à quoi ressemblera le néon, positionné sur un mur, pour lever le doute qui freine l'achat d'un objet aussi personnel.
• Un prix qui suit la configuration : chaque option choisie doit se répercuter immédiatement sur le prix affiché, et ce prix doit être celui réellement facturé au moment de la commande.
• Rester dans l'écosystème WooCommerce : le configurateur ne devait pas créer un système de commande parallèle, mais piloter les options et le prix du produit WooCommerce existant.
• Un filet de sécurité pour le vrai sur-mesure : logos, designs entièrement personnalisés ou projets hors gabarit devaient pouvoir basculer vers un formulaire de devis, sans bloquer le visiteur ni forcer une configuration qui ne correspond pas à son besoin.

L'enjeu n'était donc pas de construire un simple formulaire d'options, mais un vrai outil de composition produit qui reste fidèle aux contraintes réelles de fabrication d'un néon (longueurs disponibles, lisibilité des polices une fois façonnées en tube lumineux, formes de support réalisables).

Les fonctionnalités : un configurateur produit intégré nativement à WooCommerce

Le plugin ajoute une page de configuration complète à l'expérience d'achat, tout en s'appuyant sur le moteur de commande WooCommerce existant plutôt que de le doubler.

Composition guidée du néon

Le client saisit son texte personnalisé, choisit une police parmi vingt typographies sélectionnées pour rester lisibles une fois transformées en tube néon, règle les dimensions, opte pour une version intérieur ou extérieur, puis sélectionne la forme et la couleur du support acrylique. Le parcours avance par étapes claires jusqu'à l'ajout au panier.

Prévisualisation dynamique

Le rendu du néon composé s'affiche en direct sur un mockup de mur, et peut être déplacé à la souris pour se projeter dans son propre espace. Chaque modification d'option (texte, police, couleur, forme) met immédiatement à jour l'aperçu, sans rechargement de page.

Tarification en temps réel

Le prix affiché se recalcule à chaque choix de configuration et correspond exactement au prix appliqué au moment de l'ajout au panier et du paiement : la logique de calcul est branchée directement sur les mécanismes de prix et de données produit de WooCommerce, sans table de tarifs séparée à maintenir en parallèle.

Formulaire de devis pour le sur-mesure complexe

Pour les demandes qui sortent du cadre du configurateur, un logo à reproduire, un design entièrement personnalisé, un formulaire de devis dédié prend le relais et redirige la demande vers un traitement manuel par l'équipe, sans que le visiteur se retrouve bloqué devant un configurateur inadapté à son besoin.

Le process : composer avec les contraintes de fabrication avant de coder l'interface

Un configurateur produit n'a de valeur que s'il ne propose que des combinaisons réellement fabricables. Le développement a donc commencé par le métier, avant l'écran.

1. Cadrage des options et des contraintes de fabrication

Avant d'écrire l'interface, il a fallu lister avec l'équipe Light Genius les combinaisons réellement possibles : polices qui restent lisibles une fois pliées en néon, dimensions disponibles, formes de support acrylique faisables en atelier. Cette liste a directement défini les options exposées dans le configurateur, pour ne jamais laisser le client composer un néon impossible à produire.

2. Développement du configurateur front

L'interface de composition étape par étape et la prévisualisation déplaçable à la souris ont été développées en JavaScript et CSS, avec un rendu qui reflète en direct chaque choix de texte, de police, de forme et de couleur.

3. Intégration WooCommerce

Côté PHP, le plugin ajoute des champs de configuration au produit WooCommerce et branche le calcul du prix directement sur les hooks de tarification et de panier de WooCommerce, pour que la configuration choisie se retrouve fidèlement dans la commande, la facture et le suivi côté administration.

4. Formulaire de secours et bascule vers le devis manuel

Le formulaire de devis a été conçu comme une porte de sortie du configurateur plutôt que comme un module séparé, pour que le visiteur ayant un besoin hors gabarit puisse basculer vers un traitement humain sans quitter le site ni repartir de zéro dans sa démarche.

Le stack technique

Le choix technique a privilégié une intégration profonde à WooCommerce plutôt qu'un configurateur générique branché en surface, pour que la configuration produit reste cohérente de bout en bout, du front jusqu'à la facturation.

Frontend

• JavaScript pour la logique de configuration étape par étape et la mise à jour en direct du rendu
• CSS sur mesure pour la prévisualisation du néon et son positionnement déplaçable sur le mockup de mur

Backend

• PHP en plugin WordPress sur mesure, sans dépendance à un configurateur tiers
• Hooks WooCommerce pour piloter les options produit, le calcul du prix et les données de panier selon la configuration choisie
• WooCommerce comme moteur de commande, de paiement et de suivi, conservé comme source unique de vérité sur les commandes

CMS

• WordPress comme socle, pour rester compatible avec le reste du site et son administration existante

Le résultat : du sur-mesure vendu en self-service

Le configurateur permet à Light Genius de vendre du sur-mesure sans échange manuel préalable pour la majorité des demandes : le client compose son néon, voit son rendu et son prix exact, puis commande directement via WooCommerce. Les projets réellement hors norme, eux, sont automatiquement orientés vers le formulaire de devis plutôt que de forcer une configuration qui ne leur correspond pas.

Ce projet montre une facette différente de mon activité : construire une interface de personnalisation produit interactive et fluide, intégrée en profondeur à un écosystème e-commerce existant, loin des sujets SEO ou SaaS qui composent l'essentiel de mes autres missions.

Développeur fullstack · interfaces produit interactives et intégrations WooCommerce