Calculateur WooCommerce pour produits personnalisés | Guide

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.

Conservez les tailles illustrées : M ajoute 0, L ajoute 2 et XL ajoute 4. Avec le logo Sun (+3) et L (+2), le prix unitaire pédagogique est 24 + 3 + 2 = 29. Pour 3 unités, le sous-total attendu est 29 × 3 = 87 avant taxes, livraison ou remises de la boutique. Ce sont des montants de produit pédagogiques, pas les prix du plugin.

Définissez l’article qui fournit le prix du produit configuré et la valeur qui fournit la quantité panier. Ne transmettez pas 87 comme prix unitaire personnalisé avec une quantité de 3 : la quantité serait comptée deux fois. Vérifiez les données de votre formulaire, surtout avec des options tarifées séparément.

Dans l’éditeur inspecté, WooCommerce product sélectionne un produit du catalogue. Use current woo product associe le produit détecté sur une page produit WooCommerce ; son périmètre documenté est cette page, pas une landing page indépendante. Choisissez l’association adaptée au lieu d’intégration.

Dans les paramètres de formulaire, les contrôles Woo Commerce inspectés comprennent Add selected items to cart et Add summary as product attribute. Le réglage panier précise que tous les articles tarifés doivent être des produits du catalogue WooCommerce : revoir chaque association au lieu de supposer que plusieurs articles indépendants deviennent une seule ligne configurée. Utilisez votre identifiant de formulaire ; le récapitulatif seul ne prouve pas la transmission du prix.

Dans le code serveur inspecté, chaque prix produit transmis devient custom_price, la quantité est passée séparément à add_to_cart, puis le calcul panier appelle set_price avec ce prix. Le prix transmis doit donc représenter le montant unitaire ; les données réellement envoyées par votre formulaire restent à tester.

Sur le site de test séparé, choisissez Sun et L avec quantité 3. Vérifiez le résultat attendu du formulaire, puis produit, prix unitaire 29, quantité 3 et sous-total 87 au panier. Si le formulaire affiche un total de ligne, libellez-le comme tel ; ce total ne doit pas être confondu avec le prix unitaire envoyé à WooCommerce.

Recommencez avec quantité 1, puis changez ou masquez l’option logo selon vos conditions. Un choix masqué ne doit pas laisser une surcharge résiduelle. Vérifiez une quantité obligatoire vide, puis revenez du panier au formulaire et comparez choix actuels et montant panier. Résultats attendus à reproduire, pas essais panier observés pour cet article.