WooCommerce-Preisrechner für individuelle Produkte | Anleitung

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.

Die gezeigten Größen behalten: M ergänzt 0, L ergänzt 2 und XL ergänzt 4. Für Sun-Logo (+3) und L (+2) beträgt der Lehr-Stückpreis 24 + 3 + 2 = 29. Bei Menge 3 wird 29 × 3 = 87 als Zeilenzwischensumme vor Shop-Steuern, Versand oder Rabatten erwartet. Das sind Produkt-Lehrbeträge, keine Plugin-Preise.

Festlegen, welche Position den konfigurierten Produktpreis und welcher Wert die Warenkorbmenge liefert. Nicht 87 als individuellen Stückpreis und zugleich Menge 3 übergeben: Das würde die Menge doppelt zählen. Die Daten des tatsächlichen Formulars prüfen, besonders bei getrennt bepreisten Optionen.

Im untersuchten Editor wählt WooCommerce product ein bestehendes Katalogprodukt. Use current woo product ordnet das auf einer WooCommerce-Produktseite erkannte Produkt zu; der dokumentierte Umfang betrifft diese Seite, keine unabhängige Landingpage. Die Zuordnung passend zur Einbettung wählen.

Die untersuchten Woo Commerce-Formulareinstellungen enthalten Add selected items to cart und Add summary as product attribute. Laut Warenkorbeinstellung müssen alle bepreisten Positionen WooCommerce-Katalogprodukte sein: jede Zuordnung prüfen, statt anzunehmen, dass mehrere unabhängige Positionen zu einer konfigurierten Produktzeile werden. Eigene Formular-ID verwenden; eine Zusammenfassung allein belegt keine Preisübergabe.

Im untersuchten Servercode wird jeder übermittelte Produktpreis zu custom_price; die Menge geht separat an add_to_cart, und die Warenkorbberechnung ruft set_price mit diesem Preis auf. Der übermittelte Preis muss deshalb den Stückbetrag darstellen; die tatsächlich vom Formular gesendeten Daten müssen noch getestet werden.

Auf der separaten Testseite Sun und L mit Menge 3 wählen. Zuerst das beabsichtigte Formularergebnis prüfen, dann Produkt, Stückpreis 29, Menge 3 und Zeilenzwischensumme 87 im Warenkorb. Zeigt das Formular eine Zeilensumme, diese entsprechend beschriften; sie darf nicht mit dem an WooCommerce gesendeten Stückpreis verwechselt werden.

Mit Menge 1 wiederholen, dann die Logo-Option gemäß Bedingungen ändern oder ausblenden. Eine versteckte Auswahl darf keinen alten Aufpreis hinterlassen. Eine leere Pflichtmenge prüfen, aus dem Warenkorb zurückkehren und aktuelle Auswahl mit Warenkorbbetrag vergleichen. Das sind zu reproduzierende Sollwerte, keine für diesen Artikel beobachteten Warenkorbtests.