So bauen Sie einen WooCommerce-Preisrechner fuer individuelle Produkte

Starten Sie mit einem einfachen WooCommerce-Produkt, das den zu konfigurierenden individuellen Artikel repraesentiert. In der Demo heisst das Produkt Demo Individuelles Logo-T-Shirt und nutzt einen Grundpreis von 24 $.

Der Rechner kann dann die Produktoptionen erfassen, den konfigurierten Preis berechnen und eine lesbare Zusammenfassung in den WooCommerce-Workflow uebergeben.

Halten Sie die Hauptproduktwahlen im selben Schritt, damit der Kaeufer die Wirkung jeder Auswahl sofort sieht. Wenden Sie in den Stileinstellungen des Formulars das Theme-Preset Clean cards an und fuegen Sie dann eine native zweispaltige Zeile hinzu: Dynamic Image links und Produktoptionen rechts.

Das Dynamic-Image-Element nutzt sein Hauptbildfeld fuer die Standard-Produktvorschau. Die Variationsbilder werden spaeter aus demselben Element verwaltet, in seiner Bildebenen-Tabelle.

Das funktioniert besonders gut fuer individuelle Produkte, weil der Kaeufer nicht zwischen Schritten wechseln muss, nur um Farben, Logos und Preise zu vergleichen.

Erstellen Sie eine Optionsgruppe fuer Farben und einen Icon Picker fuer Logos. Die Demo-Farben sind rot, gelb, blau und gruen. Die Logo-Wahlen sind Palme, Teddy, Totenkopf und Sonne.

Nutzen Sie ein radioartiges Verhalten fuer jede Gruppe, damit der Kaeufer genau eine Farbe und genau ein Logo waehlt. Das verhindert unmoegliche Kombinationen und erleichtert die Pflege der Bildlogik.

Oeffnen Sie das Dynamic-Image-Element aus dem visuellen Builder. Behalten Sie das rote Palmen-T-Shirt als Standard im Hauptbildfeld und scrollen Sie dann zur Bildebenen-Tabelle innerhalb desselben Element-Editors.

Diese Tabelle verwaltet die zusaetzlichen Variationsbilder. Jede Zeile ist ein Bild, das ueber dem Basisbild erscheinen kann, wenn seine Sichtbarkeitsbedingungen wahr sind.

Fuer die T-Shirt-Demo ist red_palm.png das Basisbild. Die uebrigen 15 Kombinationen werden als Ebenenzeilen hinzugefuegt, etwa Blau Sonne, Gruen Totenkopf oder Gelb Teddy.

Nach dem Klick auf das Augensymbol einer Ebenenzeile oeffnet das Plugin den Builder fuer die Ebenensichtbarkeit. Das ist der Bildschirm, der steuert, wann dieses spezifische Bild erscheint.

Lassen Sie fuer blue_sun.png den Operator auf Alle Bedingungen muessen erfuellt sein. Fuegen Sie dann zwei Zeilen hinzu: Das Image-Element der Farbe Blau muss ausgewaehlt sein, und der Logo-Icon-Picker muss gleich Sonne sein.

Der Logo-Preis entscheidet nicht, welches Bild erscheint. Die Dynamic-Image-Ebene prueft das gewaehlte Icon-Picker-Label, daher sind klare Labels wie Palme, Teddy, Totenkopf und Sonne wichtig.

Fuegen Sie nach den visuellen Wahlen Groessen- und Mengensteuerung in einer nativen zweispaltigen Zeile hinzu. In der Demo ist M inklusive, L fuegt 2 $ hinzu, XL fuegt 4 $ hinzu, und die Menge nutzt den Produktpreis von 24 $.

Das haelt die Summe transparent: visuelle Wahlen koennen Logo-Aufpreise hinzufuegen, die Groesse kann Produktionskosten hinzufuegen, und die Menge steuert, wie viele Einheiten bestellt werden.

Betten Sie den Rechner auf einer dedizierten Seite oder im WooCommerce-Produktinhalt ein. Der Shortcode unten ist die fuer diese Anleitung genutzte Demo-Einbettung.

Wenn das Formular die gewaehlten Optionen in WooCommerce-Bestelldetails schreiben soll, oeffnen Sie die Formulareinstellungen und aktivieren Sie die benoetigten WooCommerce-Zusammenfassungsoptionen vor der Veroeffentlichung.

Testen Sie das Frontend als Kaeufer: wechseln Sie Farb- und Logo-Kombinationen, pruefen Sie das Bild, aendern Sie die Groesse, aktualisieren Sie die Menge und bestaetigen Sie, dass die Zusammenfassung dem konfigurierten Produkt entspricht.