So fügen Sie bedingte Felder zur WooCommerce-Kaufabwicklung hinzu

Möchten Sie eine bedingte Logik für Ihr Geschäft erstellen? Sie sind an der richtigen Stelle. In dieser Anleitung erfahren Sie, wie Sie bedingte Felder zur WooCommerce-Kaufabwicklung hinzufügen .

Der Checkout ist eine der wichtigsten Seiten für jeden E-Commerce-Shop. Es gibt Millionen von Websites, die um dieselben Benutzer konkurrieren. Um Ihren Mitbewerbern einen Schritt voraus zu sein, sollten Sie Ihren Checkout so weit wie möglich anpassen und optimieren. Eine der interessantesten Möglichkeiten, dies zu tun, ist das Hinzufügen von bedingten Feldern zu Ihrer WooCommerce-Kaufabwicklung .

Mit diesen Feldern können Sie bedingte Logik erstellen und nur die Felder anzeigen, die die Kunden auf der Checkout-Seite ausfüllen müssen, um den Kaufvorgang zu beschleunigen. Lassen Sie uns also besser verstehen, was bedingte Felder sind und wie sie Ihnen helfen können, Ihr Geschäft auf die nächste Stufe zu heben.

Was sind bedingte Felder?

Bedingte Felder sind Felder mit bedingter Logik, sodass bei Erfüllung der Bedingung ein anderes Feld angezeigt oder ausgeblendet wird. Um bedingte Logik zu erstellen, benötigen Sie mindestens ein übergeordnetes Feld und ein oder mehrere untergeordnete Felder , die von den Werten abhängen, die das übergeordnete Feld annimmt. Wenn Sie Ihren Kunden beispielsweise die Möglichkeit bieten, mit PayPal oder Kreditkarte zu bezahlen, möchten Sie möglicherweise die Felder mit den Kreditkartendetails nur anzeigen, wenn die Benutzer die Option Kreditkarte auswählen. Wenn sie mit PayPal bezahlen möchten, werden diese Felder nicht angezeigt. Auf diese Weise verbessern Sie die Benutzererfahrung auf Ihrer Website und steigern Ihre Konversionsraten.

Was ist bedingte Logik?

Sie müssen eine klare Vorstellung davon haben, was bedingte Logik ist, bevor wir beginnen, also lassen Sie uns etwas tiefer graben. Wenn Sie eine Bedingungslogik erstellen, soll das Bedingungsfeld X ausführen, wenn die Bedingung erfüllt oder wahr ist, aber Y ausführen, wenn die Bedingung falsch oder nicht erfüllt ist .

Gemäß unserem Kreditkartenbeispiel möchten wir, dass die Felder mit den Kreditkartendetails nur angezeigt werden, wenn der Kunde die Zahlungsoption Kreditkarte auswählt. Dieses Beispiel ist ziemlich einfach, aber die bedingte Logik kann eine höhere Komplexität erreichen, wenn Sie mit mehreren Feldtypen arbeiten und/oder mehrere Bedingungen und Aktionen hinzufügen.

Auf der Checkout-Seite von WooCommerce können Sie eine Bedingung für ein einzelnes Feld festlegen. Der Wert, den der Kunde in dieses Feld eingibt, wird mit den Einstellungen verglichen, und wenn die Bedingung erfüllt ist, würde die Aktion darin bestehen, das Feld anzuzeigen.

Um eine bedingte Logik auf der Checkout-Seite zu erstellen, müssen Sie mindestens zwei Felder verwenden. Ein Elternteil und sein Kind. Das Feld, in dem die Werte geprüft werden, wird Elternfeld genannt. Und dasjenige, in dem Sie die Bedingungslogik erstellen, damit sie nur angezeigt wird oder nicht, wenn die Bedingung wahr ist, ist das untergeordnete Feld . Wie wir in diesem Leitfaden sehen werden, können auf ein übergeordnetes Feld mehrere untergeordnete Felder und mehrere Bedingungen angewendet werden.

So fügen Sie bedingte Felder zur WooCommerce-Kaufabwicklung hinzu

In diesem Abschnitt sehen wir, wie Sie Bedingungslogik und Bedingungsfelder zum Checkout in WooCommerce verwenden und hinzufügen. Das programmatische Erstellen nützlicher Bedingungslogik erfordert viel Codierung, daher empfehlen wir Ihnen, ein Plugin zu verwenden. Für diese Demonstration verwenden wir Checkout Manager.

Mit diesem Plugin können Sie verschiedene Arten von Feldern auf der Checkout-Seite hinzufügen, anpassen und löschen. Darüber hinaus können Sie unbegrenzte bedingte Validierungen mit mehreren benutzerdefinierten Feldern auf der Checkout-Seite von WooCommerce anwenden. Mit mehr als 80.000 aktiven Downloads ist es eines der besten Checkout-Plugins auf dem Markt. Es hat eine kostenlose Version mit grundlegenden Funktionen, die Sie hier herunterladen können, und drei Premium-Pläne, die bei 19 USD beginnen.

Wir haben den Beitrag in verschiedene Abschnitte unterteilt, sodass Sie direkt zu dem Abschnitt springen können, an dem Sie interessiert sind. Lassen Sie uns ohne weiteres Umschweife sehen, wie Sie bedingte Felder zur Checkout-Seite in WooCommerce hinzufügen .

1. So erstellen Sie bedingte Logik
2. Bedingte Logik mit mehreren untergeordneten benutzerdefinierten Feldern
3. So verwenden Sie mehrere benutzerdefinierte Felder und verkettete Bedingungen
4. Was Sie nicht tun können, wenn Sie bedingte Logik verwenden

1. Wie man bedingte Logik erstellt

Nachdem Sie nun eine klare Vorstellung davon haben, was bedingte Logik ist und wie sie funktioniert, sehen wir uns an, wie Sie mit dem WooCommerce Checkout Manager-Plugin ein bedingtes Logikfeld erstellen. Lassen Sie uns eine Bedingung erstellen, um eine Nachricht anzuzeigen, wenn ein Benutzer „ admin “ als Vornamen in das Abrechnungsformular eingibt. Gehen Sie dazu zunächst in Ihrem WordPress-Dashboard zu WooCommerce > Checkout > Billing . Drücken Sie dort die Schaltfläche Neues Feld hinzufügen.

Ein Fenster wird geöffnet. Das ist der Feldeditor des neuen Feldes. Wählen Sie dort Nachricht als Typ aus und füllen Sie die Optionen wie Bezeichnung, Typ und Nachricht aus. Wählen Sie außerdem den Vornamen als übergeordnetes Feld in der rechten Spalte aus. Schreiben Sie abschließend „ admin “ unter den Vornamen und klicken Sie auf Speichern .

Wie Sie sehen können, legen wir das Feld Vorname als übergeordnetes Feld fest. Jetzt ist es Zeit, es zu testen. Gehen Sie also zu Ihrer Checkout-Seite im Frontend und geben Sie „ admin “ in das Vornamensfeld ein. Sie sollten eine Warnmeldung wie diese sehen.

Dies ist ein einfaches Beispiel, aber Bedingungen können viele Felder enthalten und die Dinge können sehr komplex werden, wenn viele Bedingungen und benutzerdefinierte Felder verwendet werden. Um sie einfach zu verwalten, können Sie also sehen, welches Feld eine Bedingung und das übergeordnete Feld im Feldmanager-Bildschirm des entsprechenden Checkout-Formulars hat ( Rechnung, Versand, zusätzliche ).

So können Sie dem Checkout in WooCommerce mit dem Checkout Manager ein Bedingungsfeld hinzufügen. Schauen wir uns nun ein komplexeres Beispiel an. Und das Beste ist natürlich, dass es keine Begrenzung gibt, wie viele benutzerdefinierte Felder dieselben oder unterschiedliche Bedingungen auf dasselbe übergeordnete Feld anwenden können.

2. Bedingte Logik mit mehreren benutzerdefinierten untergeordneten Feldern

Angenommen, Sie möchten Ihren Käufern die Möglichkeit geben, die gekauften Produkte in einem Ihrer Vertriebszentren zu erhalten oder eine Standardlieferung an einen bestimmten Ort zu wählen. Dazu können Sie ein Funktypfeld verwenden, damit Kunden eine der beiden Optionen auswählen können.

Erstellen Sie ein neues übergeordnetes Feld

Gehen Sie also zuerst zu WooCommerce > Checkout und erstellen Sie ein Radiotyp-Feld. In diesem Beispiel nennen wir dieses Feld „Lieferung“. Geben Sie dann die Optionen ein. Wir nennen sie Takeaway und Delivery. Hier können Sie auch einen Preis für jede Option auswählen und einen als Standard festlegen. Da wir den Kunden je nach ausgewähltem Kontrollkästchen unterschiedliche Felder anzeigen möchten, werden wir einige der standardmäßigen Checkout-Felder von WooCommerce für die Lieferoption verwenden. Auf diese Weise können Käufer ihre Daten eingeben, um ihre Produkte an einer von ihnen gewählten Adresse zu erhalten. Bearbeiten Sie also die standardmäßigen WooCommerce-Felder: Staat, Stadt, Postleitzahl und Straße. Erstellen Sie dann für jeden von ihnen dieselbe bedingte Logik. Darüber hinaus erstellen wir eine Bedingung und wählen den Optionsfeldtyp Delivery als übergeordnetes Feld aus und zeigen das Feld State an, wenn die Benutzer die Option Delivery auswählen. Natürlich können Sie dasselbe für alle diese Felder oder einige davon tun. In diesem Beispiel erstellen wir eine Bedingung für die folgenden Felder:

• Abrechnungs Zustand
• Abrechnungsstadt
• Rechnungs_Postleitzahl
• Rechnungsadresse 1

Erstellen Sie ein benutzerdefiniertes untergeordnetes Feld

Dann müssen Sie ein neues benutzerdefiniertes Feld erstellen, das angezeigt wird, wenn der Kunde die Option zum Mitnehmen auswählt, damit Sie das Produkt an eines der Vertriebszentren senden können. Gehen Sie erneut zu den Einstellungen des Plugins und erstellen Sie einen Feldtyp auswählen. Aktivieren Sie das bedingte Kontrollkästchen, wählen Sie Delivery als übergeordnetes Element aus und nennen Sie es Take away unter Delivery . Danach müssen Sie die Adressen für die Verteilzentren anlegen. Gehen Sie also zum Abschnitt Optionen und fügen Sie ein paar Adressen hinzu. Speichern Sie abschließend die Änderungen. Jetzt ist es an der Zeit, das Frontend zu überprüfen. Gehen Sie zur Checkout-Seite und wählen Sie einige der Optionen aus, die Sie gerade erstellt haben. Wenn die Benutzer beispielsweise die Option zum Mitnehmen auswählen, können Sie eines der Verteilungszentren auswählen. Wenn sie dagegen Lieferung auswählen, müssen sie die Adresse eingeben, an der sie ihre Produkte erhalten möchten. HINWEIS : Wir haben zwei weitere Felder hinzugefügt, um die Informationsmeldung anzuzeigen, eines für jede Option, wobei dieselben Bedingungen verwendet werden, die wir in den anderen Feldern verwendet haben. Jetzt wissen Sie, wie Sie mit komplexerer Logik bedingte Felder zur WooCommerce-Kaufabwicklung hinzufügen. Sie können jedoch noch etwas weiter gehen und eine noch komplexere Logik erstellen. Sehen wir uns an, wie man verkettete Bedingungen erstellt.

3. So verwenden Sie mehrere benutzerdefinierte Felder und verkettete Bedingungen

Wenn Sie mit vielen verwandten Bedingungen arbeiten, können die Dinge ziemlich komplex werden. Verkettete Bedingungen sind ein gutes Beispiel dafür. Dies ist der Fall, wenn eine Bedingung auf ein Feld angewendet wird, das eine andere Bedingung auf einem anderen Feld hat. Um es besser zu verstehen, können Sie sich eine Bedingung mit einer Unterbedingung vorstellen, die wiederum eine Unterbedingung hat, und so weiter. Die Hierarchieebene der Bedingungen und die Anzahl der benutzerdefinierten Felder, die Sie verwenden können, ist unbegrenzt, sodass Sie eine sehr komplexe Logik mit vielen Abhängigkeiten erstellen können.

Erstellen einer verketteten Bedingung

Lassen Sie uns also ein komplexeres Beispiel mit verketteten Bedingungen erstellen. Angenommen, Sie möchten Ihren Kunden die Möglichkeit geben, ihrer Bestellung ein zusätzliches Paket hinzuzufügen. Die Optionen sind Pappe, Geschenk und Styropor. Fügen Sie zuerst einen Kontrollkästchen-Feldtyp hinzu, damit der Kunde nach dem Extra-Paket fragen kann. Geben Sie auf der Registerkarte „ Preis “ des Feldeditors den Preis ein, den Sie der aktuellen Bestellung hinzufügen möchten, wenn der Kunde das Kontrollkästchen „Zusätzliches Paket“ aktiviert. Dann müssen Sie an den Verpackungsoptionen arbeiten, die Sie Ihren Kunden anbieten. Wir werden Käufern erlauben, mehr als eine Option auszuwählen, also erstellen wir einen Mehrfachauswahl-Feldtyp. Fügen Sie ein Label hinzu und wählen Sie Extra Package als übergeordnetes Feld aus, damit Ihre bedingte Logik wie folgt aussieht: Gehen Sie dann zur Registerkarte Optionen und erstellen Sie die Optionen für Ihre Kunden. Auf diesem Bildschirm können Sie für jede Alternative einen anderen Preis festlegen. Da wir den Preis bereits beim Erstellen des Kontrollkästchenfelds festgelegt haben, verwenden wir diese Option hier nicht. Sobald Sie damit fertig sind, ist es an der Zeit, das Frontend zu überprüfen. Wenn alles richtig funktioniert, sollten Sie mehrere Optionen auswählen können, wenn Sie das Feld Zusätzliche Verpackung aktivieren: Wir haben hier eine einzelne Bedingung verwendet, um ein Mehrfachauswahlfeld anzuzeigen. Lassen Sie uns nun eine verkettete Bedingung mit jeder der Optionen/Werte des übergeordneten Felds erstellen.

Fügen Sie mehrere Optionen hinzu

Wählen wir also die Geschenkverpackungsoption und wenden einige Bedingungen an. Lassen Sie uns ein benutzerdefiniertes Funkfeld erstellen und den Editor wie folgt ausfüllen. Wir werden mehrere Papierdrucke für Geschenkverpackungen anbieten, also werden wir dieses Feld nutzen, um Kunden eine davon auswählen zu lassen. Gehen Sie dazu in den Bereich Optionen und richten Sie die Papierausdrucke für das Funkfeld ein. Wir haben die Optionen wie folgt konfiguriert: Und auf dem Frontend sehen Sie so etwas: Da wir Geschenkverpackungen zeigen, ist es besser, Bilder statt Text zu zeigen. Um Bilder in jeder Option anzuzeigen, haben wir einige Bilder verwendet, die wir zuvor in die Bibliothek hochgeladen hatten. Mit dem folgenden Code können Sie Bilder für die Bezeichnung jeder Option eingeben: <img class=”paper-style” src=”#path of your image url”> Bisher haben Sie eine verkettete Bedingungslogik erstellt, die zwei Ebenen umfasst und zwei Bedingungen, die voneinander abhängen. Zusätzliche Verpackung ->(Zustand 1)-> Verpackungstyp ->(Zustand 2)-> Geschenkverpackung

Hinzufügen einer weiteren bedingten Ebene

Gehen wir noch ein bisschen weiter und fügen eine neue Bedingungsebene hinzu. Im letzten Screenshot sehen Sie, dass es ein neues Feld namens Geschenkkarte gibt, das Benutzern die Möglichkeit gibt, dem Paket eine spezielle Geschenkkarte hinzuzufügen. Dafür berechnen wir zusätzlich 4 $. Darüber hinaus werden wir eine Bedingung verwenden, um ein neues benutzerdefiniertes Feld anzuzeigen und Benutzer den Text eingeben zu lassen, den sie auf die Geschenkkarte drucken möchten. Erstellen wir also ein neues Kontrollkästchenfeld und richten es wie folgt ein: Sie können sehen, dass wir uns auf dasselbe übergeordnete Feld beziehen und dieselbe Bedingung verwenden, die wir im vorherigen Schritt für die Geschenkverpackung verwendet haben. Fügen Sie dann einen Textbereich hinzu, damit Benutzer den Text eingeben können, den sie auf der Geschenkkarte sehen möchten, und konfigurieren Sie ihn wie folgt: Dies ist die letzte Bedingung. Es hat das benutzerdefinierte Feld Geschenkkarte als übergeordnetes Feld und den Text der Geschenkkarte als untergeordnetes Feld. Wenn Käufer jetzt also die Geschenkkartenoption auswählen, sehen sie Folgendes: Und so erstellen Sie eine komplexe Logik und fügen der Checkout-Seite in WooCommerce mehrere bedingte Felder hinzu. Wir haben drei Bedingungen und mehrere benutzerdefinierte Felder in dieser Reihenfolge verkettet: Zusätzliche Verpackung -> (Bedingung 1) -> Verpackungstyp -> (Bedingung 2) -> Geschenkverpackung -> (Bedingung 3) -> Geschenkkarte

4. Was Sie nicht tun können, wenn Sie bedingte Logik verwenden

Verwenden Sie Felder aus verschiedenen Formularen

In WooCommerce müssen bedingte Felder auf ein übergeordnetes Feld verweisen, das sich im selben Formular befindet. Auf der Checkout-Seite gibt es drei Formulare: Rechnungs-, Versand- und zusätzliche Formulare. Jedes von ihnen funktioniert als separates Formular und kann keine Bedingungen haben, die von Feldern aus einem anderen Formular abhängen.

Bedingt für Felder ohne Wert (Schaltfläche, Überschrift, Nachrichten)

Sie können Schaltflächen, Meldungen und Überschriftenfeldtypen nicht als übergeordnete Felder verwenden, da sie keinen Wert haben, um zu prüfen, ob die Bedingung erfüllt ist.

Bearbeiten Sie die IDs oder Namen der Felder

Um eine ordnungsgemäße Integration mit WooCommerce zu gewährleisten, können Sie die Feldnamen und IDs nicht bearbeiten. Dies gilt sowohl für die standardmäßigen WooCommerce-Felder als auch für alle benutzerdefinierten Felder, die Sie hinzufügen.

Lösen Sie eine andere Aktion als das Anzeigen/Ausblenden eines Felds aus

In WooCommerce können Bedingungsfelder eine einzige Aktion ausführen: das angegebene Feld anzeigen, wenn die Bedingung wahr ist. Das bedeutet, dass Sie leider keinen Rabatt oder kein Produkt hinzufügen, die Bestellung bearbeiten oder andere Aktionen ausführen können, wenn die Bedingung erfüllt ist.

Wenden Sie Bedingungen auf Feldwerte außerhalb der Kasse an

Schließlich können Bedingungen nur die Werte eines anderen Checkout-Felds auf demselben Formular überprüfen. Sie können also keine Bedingungen prüfen, die die Produktmenge, den Gesamtpreis, die Benutzerrolle oder irgendetwas anderes prüfen, das kein Checkout-Feldwert ist.

Fazit

Alles in allem kann Ihnen die bedingte Logik dabei helfen, die Benutzererfahrung zu verbessern und die Konversionsraten auf Ihrer Website zu steigern. Aus diesem Grund ist das Hinzufügen von bedingten Feldern zu Ihrem WooCommerce-Checkout eine großartige Möglichkeit, Ihren Shop auf die nächste Stufe zu heben.

In diesem Leitfaden haben Sie gelernt, wie Sie zusätzliche Felder mit dem WooCommerce Checkout Manager-Plugin erstellen und einrichten. Wir haben benutzerdefinierte Felder hinzugefügt und sowohl einfache Bedingungslogik als auch komplexere Beispiele mit verketteten Bedingungen erstellt. Abschließend haben wir uns die Einschränkungen der bedingten Logik in WooCommerce angesehen.

Hier haben wir einige Beispiele gesehen, aber das ist nur die Spitze des Eisbergs. Es gibt viele Dinge, die Sie mit bedingten Feldern tun können, um Ihren Checkout zu verbessern. Wir empfehlen Ihnen daher, benutzerdefinierte Felder zu erstellen und mit der Bedingung herumzuspielen.

Weitere Informationen dazu, wie Sie Ihren Checkout optimal nutzen, finden Sie in unserem Leitfaden zur Optimierung des WooCommerce-Checkouts und in unserem Tutorial zur Deaktivierung der Postleitzahl-Validierung. Teilen Sie uns mit, wenn Sie Fragen oder Zweifel haben, ob Sie bedingte Felder zum Checkout hinzufügen möchten. Wir helfen Ihnen gerne weiter!