Comment créer un calculateur de prix WooCommerce pour produits personnalisés

Commencez avec un produit WooCommerce simple qui représente l’article personnalisé à configurer. Dans la démo, le produit s’appelle Démo T-shirt Logo Personnalisé et utilise un prix de base de 24 $.

Le calculateur peut ensuite collecter les options produit, calculer le prix configuré et transmettre un récapitulatif lisible au workflow WooCommerce.

Gardez les principaux choix produit dans la même étape pour que l’acheteur voie l’effet de chaque sélection immédiatement. Dans les réglages de style du formulaire, appliquez le preset de thème Clean cards, puis ajoutez une ligne native à deux colonnes : Dynamic Image à gauche et les options produit à droite.

L’élément Dynamic Image utilise son champ d’image principal pour l’aperçu produit par défaut. Les images de variation sont gérées ensuite depuis ce même élément, dans sa table de calques d’images.

Cela fonctionne particulièrement bien pour les produits personnalisés car l’acheteur n’a pas à naviguer entre les étapes juste pour comparer couleurs, logos et prix.

Créez un groupe d’options pour les couleurs et un Icon Picker pour les logos. Les couleurs de la démo sont rouge, jaune, bleu et vert. Les choix de logo sont palmier, ourson, tête de mort et soleil.

Utilisez un comportement de type radio pour chaque groupe afin que l’acheteur choisisse exactement une couleur et exactement un logo. Cela empêche les combinaisons impossibles et facilite la maintenance de la logique d’image.

Ouvrez l’élément Dynamic Image depuis le constructeur visuel. Gardez le T-shirt rouge palmier par défaut dans le champ Image principal, puis faites défiler jusqu’à la table des calques d’images à l’intérieur du même éditeur d’élément.

Cette table est l’endroit où les images de variation supplémentaires sont gérées. Chaque ligne est une image qui peut apparaître au-dessus de l’image de base quand ses conditions de visibilité sont vraies.

Pour la démo T-shirt, red_palm.png est l’image de base. Les 15 combinaisons restantes sont ajoutées comme lignes de calque, par exemple Bleu soleil, Vert tête de mort ou Jaune ourson.

Après avoir cliqué sur l’icône œil d’une ligne de calque, le plugin ouvre le constructeur de conditions de visibilité du calque. C’est l’écran qui contrôle quand cette image spécifique apparaît.

Pour blue_sun.png, laissez l’opérateur sur Toutes les conditions doivent être remplies. Ajoutez ensuite deux lignes : l’élément Image de couleur Bleu doit être sélectionné, et l’Icon Picker du logo doit être égal à Soleil.

Le prix du logo n’est pas utilisé pour décider quelle image apparaît. Le calque Dynamic Image vérifie le libellé de l’Icon Picker sélectionné, donc des libellés clairs comme Palmier, Ourson, Tête de mort et Soleil comptent.

Après les choix visuels, ajoutez les contrôles de taille et de quantité dans une ligne native à deux colonnes. Dans la démo, M est inclus, L ajoute 2 $, XL ajoute 4 $, et la quantité utilise le prix produit de 24 $.

Cela garde le total transparent : les choix visuels peuvent ajouter des suppléments de logo, la taille peut ajouter un coût de production, et la quantité contrôle le nombre d’unités commandées.

Intégrez le calculateur sur une page dédiée ou dans le contenu du produit WooCommerce. Le shortcode ci-dessous est l’intégration de démo utilisée pour ce guide.

Si le formulaire doit écrire les options sélectionnées dans les détails de commande WooCommerce, ouvrez les réglages du formulaire et activez les options de récapitulatif WooCommerce dont vous avez besoin avant de publier.

Testez le frontend comme un acheteur : changez les combinaisons couleur/logo, vérifiez l’image, changez la taille, mettez à jour la quantité et confirmez que le récapitulatif correspond au produit configuré.