So ordnen Sie WooCommerce Checkout-Felder neu an

Möchten Sie WooCommerce-Checkout-Felder in Ihrem Online-Shop neu anordnen? In diesem Tutorial zeigen wir Ihnen die besten Möglichkeiten, die Checkout-Felder neu anzuordnen.

Mit WooCommerce können Sie eine Reihe von Elementen auf Ihrer E-Commerce-Website neu anordnen und anordnen, um die Konversionsraten zu verbessern. Davon können auch die Checkout-Felder neu angeordnet werden, um den Bedürfnissen Ihrer Website und Ihrer Kunden gerecht zu werden.

Aber bevor wir die Schritte durchgehen, wollen wir sehen, warum Sie sie möglicherweise ändern müssen.

Warum die Reihenfolge der Checkout-Felder ändern?

Wenn Sie WooCommerce in Ihrem Online-Shop installieren, gibt es einige wichtige Seiten, die das Plugin standardmäßig erstellt. Dazu gehören der Warenkorb, der Shop, mein Konto, die Checkout-Seite und so weiter. Aber wenn es um die Checkout-Seite geht, sind die Standardfelder möglicherweise nicht für jede Art von E-Commerce-Website anwendbar .

Abhängig von Ihrer Website und Ihren Kunden müssen Sie die Checkout-Felder von WooCommerce möglicherweise von Zeit zu Zeit neu anordnen. Beispielsweise muss der Kunde auf der Standard-Checkout-Seite den Vornamen gefolgt vom Nachnamen eingeben. In manchen Fällen kann es jedoch sinnvoller sein, den Nachnamen am Anfang einzugeben oder zuerst nach der Rechnungsadresse des Kunden zu fragen.

Wenn Sie diese Felder also basierend auf ähnlichen Situationen anpassen möchten, müssen Sie sie neu anordnen.

Wie kann ich WooCommerce Checkout-Felder neu anordnen?

Sie können WooCommerce-Checkout-Felder auf zwei Arten in WordPress neu anordnen:

• Mit Plugins
• Programmatisch

Für diesen Leitfaden werden wir jeden Schritt im Detail durchgehen. Bitte stellen Sie jedoch sicher, dass Sie WooCommerce für Ihre Website richtig eingerichtet haben und verwenden Sie eines der kompatiblen WooCommerce-Designs, bevor wir beginnen.

WooCommerce Checkout-Felder mit Plugins neu anordnen

Plugins können viel dazu beitragen, die Funktionalität Ihrer Website zu verbessern. Ebenso ist eine der einfachsten Möglichkeiten , WooCommerce-Felder neu anzuordnen, die Verwendung eines Plugins. Alles, was Sie tun müssen, ist, das Plugin auf Ihrer WordPress-Website zu installieren und die Checkout-Felder damit neu anzuordnen.

Es gibt viele WooCommerce-Checkout-Plugins, mit denen Sie Ihre Checkout-Seite anpassen können. Aber nur wenige bieten Ihnen die Möglichkeit, die Checkout-Felder in WooCommerce neu anzuordnen.

Für dieses Tutorial verwenden wir das Checkout Manager for WooCommerce -Plugin, da es sehr einfach zu bedienen ist. Es ist auch eines der besten Plugins zum Anpassen der Checkout-Seite und Sie können es sogar verwenden, um die Checkout-Felder neu anzuordnen.

Aber um das Plugin verwenden zu können, müssen Sie es installieren und aktivieren.

1. Installieren und aktivieren Sie das Plugin

Um das Plugin zu installieren, gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen und suchen Sie nach den Schlüsselwörtern für das Plugin. Sobald Sie das Plugin gefunden haben, klicken Sie auf Jetzt installieren .

Nachdem die Installation abgeschlossen ist, aktivieren Sie das Plugin.

Sie können das Plugin auch manuell installieren, wenn Sie ein Premium-Plugin oder ein Plugin verwenden möchten, das nicht im WordPress-Repository enthalten ist. Das Plugin muss vom Marktplatz heruntergeladen und auf Ihre Website hochgeladen werden. Weitere Informationen finden Sie in unserer Anleitung zur manuellen Installation eines WordPress-Plugins.

2. WooCommerce-Checkout-Felder aus den Plugin-Optionen neu anordnen

Sobald das Plugin aktiviert ist, können Sie es verwenden, um die Checkout-Felder von WooCommerce neu anzuordnen. Gehen Sie einfach in Ihrem WordPress-Dashboard zu WooCommerce > Einstellungen und öffnen Sie die Registerkarte Kasse .

Eine Checkout-Seite enthält normalerweise Rechnungs- und Versanddetails. Zuerst werden wir die Abrechnungsfelder neu anordnen. Wählen Sie also die Abrechnungsoption auf der Registerkarte „Kasse“. Hier sehen Sie alle Felder für die Rechnungsdetails.

Jetzt müssen Sie nur noch per Drag & Drop die Felder der Rechnungsdetails neu anordnen. Ziehen Sie einfach die Felder und legen Sie sie an den Positionen ab, an denen Sie sie auf Ihrer Checkout-Seite platzieren möchten. Sie können die Felder auch mit den Aufwärts- und Abwärtspfeilen an die gewünschte Position verschieben.

Zusätzlich haben Sie für jedes Feld eine Positionsoption. Die Felder können entweder auf der linken oder rechten Seite des Bildschirms oder mit einem breiten Feldbereich platziert werden. Die Felder können bei Bedarf sogar ausgeblendet werden, indem Sie den Schalter in der Spalte „Deaktiviert“ aktivieren.

Nachdem Sie alle Checkout-Felder für Ihren WooCommerce-Shop neu angeordnet haben, klicken Sie auf Änderungen speichern . Wenn Sie die Checkout-Seite neu laden, können Sie die neu bestellten Felder sehen.

Auf die gleiche Weise können Sie auch die Felder der Versanddetails neu anordnen. Wählen Sie einfach die Versandoption auf der Registerkarte „Kasse“ aus und ordnen Sie die Felder erneut an. Sobald Sie alle erforderlichen Felder neu angeordnet haben, können Sie sehen, dass sie auch auf der Checkout-Seite des Frontends neu angeordnet sind.

WooCommerce Checkout-Felder programmgesteuert neu anordnen

Sie können WooCommerce-Checkout-Felder auch mithilfe von Code-Snippets neu anordnen, wenn Sie Ihrer Website keine zusätzlichen Plugins hinzufügen möchten. Dieser Ansatz ist jedoch nur für Sie geeignet, wenn Sie über fortgeschrittene Programmierkenntnisse verfügen.

Außerdem werden die Code-Snippets in der Datei functions.php Ihrer Website hinzugefügt und Sie könnten sie verlieren, wenn Sie Ihr WordPress-Theme aktualisieren. Sie müssen also ein untergeordnetes Thema erstellen, um die Snippets hinzuzufügen. Wenn Sie dabei Hilfe benötigen, können Sie sogar eines der besten Child-Theme-Plugins für WordPress verwenden, um eines zu erstellen.

Wir empfehlen Ihnen jedoch auch, Ihre WordPress-Website zu sichern, bevor Sie die Code-Snippets hinzufügen. Die Datei functions.php ist eine der Kerndateien Ihrer Website und jede unerwünschte Änderung daran kann zu weiteren Problemen führen. Lassen Sie uns nun mit dem Prozess fortfahren.

1. Greifen Sie im Design-Editor auf die Datei functions.php zu

Sie müssen die Code-Snippets in der Datei functions.php aus dem Design-Editor hinzufügen. Um darauf zuzugreifen, gehen Sie in Ihrem WordPress-Dashboard zu Darstellung > Themen-Editor . Wählen Sie dann die Datei functions.php auf der rechten Seite Ihres Bildschirms in den Themendateien aus.

Jetzt können Sie mit dem Hinzufügen der Code-Snippets beginnen, nachdem Sie zum Ende des Editors gescrollt und die Datei aktualisiert haben . Wir haben das Divi-Thema für dieses Tutorial verwendet. Es kann also je nach verwendetem Thema etwas anders aussehen als Ihr Editor.

2. Fügen Sie die Codeausschnitte hinzu

Es gibt eine Reihe von Code-Snippets, die Sie Ihrer Website hinzufügen können, um die Checkout-Felder von WooCommerce neu anzuordnen. Aber zuerst müssen Sie verstehen, dass die Felder in 4 Gruppen unterteilt sind:

• Rechnungsadresse – Rechnung
• Lieferadresse – Versand
• Kontoanmeldung – Konto
• Zusätzliche Informationen – Bestellung

Darüber hinaus hat jedes der Felder in diesen Gruppen seine spezifische Priorität. Sie müssen auch ihre Priorität kennen, wenn Sie die Felder neu anordnen möchten.

Sie finden die Felder in der folgenden Liste unten. Die hinter den Feldern dargestellte Zahl ist ihre Priorität.

• Abrechnung
  • billing_first_name – 10
  • billing_last_name – 20
  • billing_company – 30
  • billing_address_1 – 40
  • billing_address_2 – 50
  • billing_city – 60
  • billing_postcode – 70
  • billing_country – 80
  • billing_state – 90
  • billing_email – 100
  • billing_phone – 110
• Versand
  • shipping_first_name – 10
  • shipping_last_name – 20
  • shipping_company – 30
  • shipping_address_1 – 40
  • shipping_address_2 – 50
  • shipping_city – 60
  • shipping_postcode – 70
  • shipping_country – 80
  • shipping_state – 90
• Konto
  • account_password (keine Priorität)
• Befehl
  • order_comments (keine Priorität)

Schauen wir uns nun ein paar Beispiele an:

2.1. Verschieben Sie ein Feld nach oben

Wenn Sie ein Checkout-Feld verschieben möchten, um es ganz oben oder in der ersten Zeile anzuzeigen, können Sie das folgende Code-Snippet verwenden.

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_email_top' );

Funktion quadlayers_email_top( $checkout_fields ) {
$checkout_fields['billing']['billing_email']['priority'] = 5;
$checkout_fields zurückgeben;
}

Standardmäßig hat der Vorname mit 10 die höchste Priorität. Wenn Sie also ein Feld nach oben neu anordnen möchten, stellen Sie einfach sicher, dass die Priorität des Felds kleiner als 10 ist .

In unserem Fall ist die Priorität des E-Mail-Felds 5. Deshalb wird es im Checkout-Feld ganz oben platziert.

2.2. Verschieben Sie ein Feld in eine andere Gruppe

Die Verwendung des Code-Snippets zum Neuordnen des WooCommerce-Checkout-Felds ist nicht nur darauf beschränkt, ein Feld nach oben zu verschieben. Sie können auch weitere Codeausschnitte ändern oder erstellen, um ein Feld in eine andere Gruppe zu verschieben.

Betrachten wir zum Beispiel das folgende Snippet:

 add_filter( 'woocommerce_checkout_fields', 'quadlayers_billing_email_another_group' );
Funktion quadlayers_billing_email_another_group( $checkout_fields ){
// 1. Hier weisen wir ein Feldarray einer anderen Gruppe zu
$checkout_fields['order']['billing_email'] = $checkout_fields['billing']['billing_email'];
// 2. Entfernen Sie ein Feld von einer vorherigen Position
unset( $checkout_fields['billing']['billing_email'] );
$checkout_fields zurückgeben;
}

Wie Sie sehen können, wurde die Rechnungs-E-Mail in die Gruppe der zusätzlichen Informationen verschoben. Ebenso können Sie den Code entsprechend den Anforderungen Ihrer Website ändern und ihn auch zum Verschieben von Feldern in verschiedenen Gruppen verwenden.

Wenn Sie weitere Hilfe benötigen, hat sogar WooCommerce eine detaillierte Anleitung zum Bearbeiten der Checkout-Felder mit Codes bereitgestellt. Klicken Sie einfach hier, um es anzuzeigen.

Bonus: Aktivieren Sie den direkten Checkout in WooCommerce

Da Sie nun mit dem Prozess zum Neuordnen von WooCommerce-Checkout-Feldern vertraut sind, ist es möglicherweise besser, den Checkout-Prozess auch für Ihre Website zu verkürzen . Und wenn Sie den Prozess vereinfachen möchten, ist das Überspringen der Warenkorbseite eine der bewährten Methoden. Auf diese Weise können die Kunden direkt auf die Checkout-Seite weitergeleitet werden, wenn sie nur wenige Produkte kaufen möchten.

Um den direkten Checkout zu ermöglichen, verwenden wir das Direct Checkout for WooCommerce- Plugin. Es ist ein einfaches Plugin, mit dem Ihre Kunden die Warenkorbseite überspringen und auf die Checkout-Seite umleiten können. Aber um das Plugin verwenden zu können, müssen Sie es zuerst installieren und aktivieren.

Gehen Sie also in Ihrem WordPress-Dashboard erneut zu Plugins > Neu hinzufügen und suchen Sie nach dem Plugin. Klicken Sie anschließend auf Jetzt installieren und aktivieren Sie das Plugin , sobald die Installation abgeschlossen ist.

Jetzt müssen Sie einige standardmäßige WooCommerce-Einstellungen anpassen. Sie finden sie in WooCommerce > Einstellungen unter der Registerkarte Produkte in Ihrem WordPress-Dashboard. Wählen Sie hier die Option Allgemein und Sie können die allgemeinen Optionen für WooCommerce-Produkte sehen.

Navigieren Sie dann zum Verhalten zum Hinzufügen zum Warenkorb und überprüfen Sie beide Optionen , damit sie die Plugin-Einstellungen nicht beeinträchtigen.

Öffnen Sie danach die Registerkarte Direct Checkout und wählen Sie auch hier die Option Allgemein . Stellen Sie nun die Weiterleitung Zum Einkaufswagen hinzugefügt im Dropdown-Menü auf Checkout ein. Speichern Sie abschließend die Änderungen .

Das war's, die Kunden werden auf die Checkout-Seite statt auf die Warenkorbseite auf Ihrer Website weitergeleitet. Wir haben auch eine detaillierte Anleitung, um die Warenkorbseite zu überspringen, wenn Sie weitere Informationen benötigen.

Fazit

Dies sind die verschiedenen Möglichkeiten, wie Sie WooCommerce-Checkout-Felder auf Ihrer Website neu anordnen können. Es ist eine sehr gute Anpassung, die Sie zur Zufriedenheit Ihrer Kunden auf Ihrer Checkout-Seite anwenden können. Und abhängig von Ihrer Website kann es auch für Sie einfacher sein.

Zusammenfassend haben wir die beiden besten Möglichkeiten zur Neuordnung der Checkout-Felder überprüft. Sie sind:

• Verwenden eines Plugins
• Programmatisch

Die Verwendung eines Plugins ist eine der schnellsten Möglichkeiten, die Felder neu anzuordnen. Sie müssen nur einige Optionen in Ihrem WooCommerce-Dashboard anpassen und die Felder neu anordnen. Wenn Sie jedoch einen fortgeschritteneren Ansatz wünschen und über technische Kenntnisse verfügen, können Sie sie auch mithilfe von Code-Snippets neu anordnen.

Zusätzlich haben wir ein kurzes Tutorial hinzugefügt, um den Bestellvorgang zu vereinfachen, indem die Warenkorbseite übersprungen wird. Wenn Sie Ihre Checkout-Seite weiter verbessern möchten, haben wir auch detaillierte Anleitungen zum Optimieren des WooCommerce-Checkout, zum Erstellen eines One-Page-Checkout, zum Ändern des Texts „Fortfahren mit dem Checkout“ und so weiter.

Wir hoffen, dass dieses Tutorial für Sie nützlich war. Hier sind einige weitere Artikel, die für Sie interessant sein könnten:

• So ändern Sie WooCommerce Checkout-Fehlermeldungen
• Beste WooCommerce One Page Checkout-Plugins (kostenlos und kostenpflichtig)
• So fügen Sie bedingte Felder zur WooCommerce-Kaufabwicklung hinzu

Können Sie die Checkout-Felder jetzt neu anordnen? Gab es Probleme? Bitte teilen Sie uns dies in den Kommentaren mit!