Warum benötigt man benutzerdefinierte Checkout-Felder?
Die standardmäßig von WooCommerce beim Bezahlvorgang erfassten Informationen sind grundlegend und allgemein gültig – beispielsweise Name, Adresse, Telefonnummer und E-Mail-Adresse. Wenn Ihr Geschäft jedoch besondere Anforderungen hat, reichen diese Daten oft nicht aus. Durch die Hinzufügung von benutzerdefinierten Feldern können Sie Ihren Kunden ein persönlicheres und genaueres Einkaufserlebnis bieten.
Beispielsweise benötigen Läden, die maßgeschneiderte Kuchen verkaufen, von den Kunden Angaben zu den Wünschen, die auf dem Kuchen stehen sollen, oder ob Kerzen gewünscht werden; B2B-Geschäfte müssen möglicherweise die Unternehmenssteuernummer oder die Bestellnummer der Kunden erfassen; Geschäfte, die Eventtickets verkaufen, benötigen hingegen die Personalausweise der Teilnehmer zur Überprüfung. Benutzerdefinierte Felder ermöglichen es Ihnen, zusätzliche, wichtige Daten zu sammeln, die über den Standardprozess hinausgehen. Diese Daten können für die Bearbeitung von Bestellungen, die Segmentierung von Kunden, personalisierte Marketingmaßnahmen sowie die Einhaltung gesetzlicher Vorgaben verwendet werden.
Aus technischer Sicht besteht die Zahlungsseite von WooCommerce aus einem Formular, das aus einer Reihe von Standardfeldern besteht. Die Struktur dieses Formulars wird durch sogenannte Action-Hooks und Filter-Hooks definiert. Das bedeutet, dass wir mithilfe von Plugins oder Funktionen in den Themes diese Hooks nutzen können, um Prozesse im Zahlungsablauf zu modifizieren – beispielsweise Felder hinzuzufügen, zu entfernen oder zu ändern. Das Verständnis dieser grundlegenden Mechanismen ist die Voraussetzung für jegliche individuelle Anpassungen.
Empfohlene Lektüre WooCommerce-Entwicklungshandbuch für E-Commerce-Websites: Von der Einrichtung bis zur Implementierung fortgeschrittener Funktionen。
Drei Methoden, um benutzerdefinierte Bezahlungsfelder zu erstellen
WooCommerce bietet flexible Möglichkeiten, um benutzerdefinierte Felder hinzuzufügen. Sie können je nach Ihrem technischen Können und Ihren Anforderungen die am besten geeignete Methode auswählen.
Schnelle, kodiertelementfreie Ergänzungen mithilfe von Plugins
Für Webadministratoren, die sich mit Code wenig auskennen, oder für Projekte, die schnell in Betrieb genommen werden müssen, ist die Verwendung spezieller Plugins der einfachste Weg. Auf dem Markt gibt es hervorragende Plugins wie “Checkout Field Editor for WooCommerce” oder “WooCommerce Checkout Manager”.
Diese Plugins bieten in der Regel eine intuitive Backend-Oberfläche, mit der Sie neue Felder durch Klicken und Auswählen hinzufügen können. Sie können die Feldtypen (z. B. Textfelder, Dropdown-Menüs, Kontrollkästchen, Einzelauswahlfelder), Beschriftungen, Platzhalter sowie die Angabe, ob ein Feld erforderlich ist, definieren. Außerdem können Sie festlegen, an welcher Stelle auf der Kasse-Seite das Feld angezeigt werden soll – im Rechnungsbereich oder im Versandbereich. Die Verwendung dieser Plugins erfordert keinen Code, was die technischen Hürden erheblich senkt und sie für die meisten Standardanforderungen geeignet macht. Es sollte jedoch beachtet werden, dass Plugins die Website belasten können und bei sehr komplexer benutzerdefinierter Logik möglicherweise nicht flexibel genug sind.
Durch den Einsatz von Code können benutzerdefinierte Felder hinzugefügt werden.
Dies ist die leistungsstärkste und flexibelste Methode – sie ermöglicht es, indem man das Thema bearbeitet… functions.php Sie können entweder eine Datei verwenden oder ein benutzerdefiniertes Plugin erstellen, um dies zu realisieren. Der Schlüssel dabei ist die Nutzung bestimmter Funktionen bzw. Methoden. woocommerce_checkout_fields Filter-Hook.
Dieser Hook ermöglicht es Ihnen, das Array der Bezahlungsfelder zu ändern. Wenn Sie beispielsweise ein Feld hinzufügen möchten, in das der Firmenname eingegeben werden kann, im Abschnitt “Rechnungsinformationen”, können Sie den folgenden Code schreiben:
Empfohlene Lektüre Wie fügt man benutzerdefinierte Felder und Metadaten zu den Produktseiten von WooCommerce hinzu?。
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
$fields['billing']['billing_company_custom'] = array(
'label' => __('公司名称（自定义）', 'woocommerce'),
'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
'required' => true,
'class' => array('form-row-wide'),
'clear' => true,
'priority' => 25, // 控制显示顺序，数字越小越靠前
);
return $fields;
}Dieser Code fügt ein erforderliches Textfeld zum Rechnungsfeld hinzu. Der Schlüssel liegt in den Namen der Elemente im Feldarray (z. B. …) billing_company_custom) sowie das zugehörige Feldset (['billing'] oder ['shipping']、['order']）。
Verwendung der Bedingungslogik-Funktionen von WooCommerce
Manchmal möchten Sie, dass ein Feld nur unter bestimmten Bedingungen angezeigt wird. Zum Beispiel soll das Feld “Geschenkkarten-Nachricht” nur dann sichtbar sein, wenn der Kunde den Service “Geschenkpaketierung” ausgewählt hat. Dies kann durch die Kombination von JavaScript oder durch die Verwendung von Plugins, die bedingte Logik unterstützen, erreicht werden.
Die reine Implementierung mit Code erfordert in der Regel die Hilfe von… woocommerce_after_checkout_billing_form oder woocommerce_after_checkout_shipping_form Es wird ein „Hook“ verwendet, um die HTML-Struktur der Felder auszugeben, und ein jQuery-Skript wird geschrieben, um Veränderungen in anderen Feldern (z. B. in Kontrollkästchen) zu überwachen, um so die Anzeige oder Verdeckung des Zielfeldes zu steuern. Dieser Ansatz setzt jedoch bestimmte JavaScript-Fähigkeiten voraus. Einfacher ist es weiterhin, hochentwickelte Feldverwaltungs-Plugins zu verwenden, die eine visuelle Bedingungslogik zur Einstellung der Felde ermöglichen.
Die Daten der benutzerdefinierten Felder werden überprüft und anschließend gespeichert.
Es reicht nicht aus, die Felder lediglich auf der Seite anzuzeigen; es ist ein entscheidender Schritt, die Gültigkeit der Daten zu überprüfen und sie sicher in die Datenbank zu speichern.
Datenerstellung und -validierung auf der Front-End- sowie Back-End-Seite
Um das Einreichen ungültiger oder bösartiger Daten zu verhindern, muss die Überprüfung auf der Serverseite (Backend) durchgeführt werden. Dies erfolgt durch… woocommerce_checkout_process Die Funktion wird durch die Implementierung von Action-Hooks realisiert.
Fortsetzung des vorherigen Beispiels: Wenn wir etwas hinzufügen… billing_company_custom Dies ist ein erforderliches Feld – wir müssen sicherstellen, dass der Kunde es nicht leer lässt.
Empfohlene Lektüre WooCommerce-Entwicklung in der Praxis: Von Null an eine professionelle E-Commerce-Website aufbauen。
add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
}
}wc_add_notice() Die Funktion zeigt eine Fehlermeldung an der oberen Seite der Kasse an, die die Bestellabgabe verhindert, bis der Benutzer den Fehler korrigiert hat. Dort können Sie auch komplexere Validierungslogiken implementieren – beispielsweise die Überprüfung der E-Mail-Formatierung, von Zahlenbereichen oder die Abgleich mit regulären Ausdrücken.
Die Felddaten werden in die Bestellung gespeichert.
Nachdem die Überprüfung abgeschlossen ist, müssen wir den Wert des benutzerdefinierten Feldes in die Bestellmetadaten (Order Meta) speichern, damit er später im Backend sowie in den E-Mails angezeigt werden kann. Dafür ist die folgende Vorgehensweise erforderlich: woocommerce_checkout_update_order_meta Action Hook.
add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
if ( ! empty($_POST['billing_company_custom']) ) {
update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
}
}update_post_meta() Die Funktion speichert die bereinigten Feldwerte in Form von Schlüssel-Wert-Paaren. wp_postmeta In der Tabelle beginnen die Schlüsselnamen in der Regel mit einem Unterstrich (z. B. _billing_company_customDies hilft dabei, es in bestimmten Backend-Benutzeroberflächen als “verstecktes” Metadatum zu betrachten.
Felddaten werden sowohl auf der Frontend- als auch auf der Backend-Seite angezeigt.
Nachdem die Daten gespeichert wurden, müssen Sie sicherstellen, dass sie an mehreren wichtigen Stellen angezeigt und verwaltet werden können.
In den Bestelldetails sowie in der E-Mail anzeigen.
Damit sowohl der Ladenbesitzer als auch die Kunden die gespeicherten Informationen sehen können, müssen diese auf der Bestellübersichtsseite im Management-Backend angezeigt werden sowie in den Bestell-E-Mails an die Kunden und Administratoren verschickt werden.
Um die Bestelldetails im Management-Bereich zu ändern, können Sie folgende Methoden verwenden: woocommerce_admin_order_data_after_billing_address Hook:
add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
$company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
if ( $company_custom ) {
echo '<p><strong>'.__('自定义公司名').':</strong> '.$company_custom.'</p>';
}
}Ähnlich dazu kann man auch… woocommerce_email_order_meta_fields Der Filter kann dieses Feld in den Inhalt der Bestell-E-Mail einfügen.
In der Bestellansicht unter “Mein Konto” anzeigen.
Wenn Kunden auf ihrer Kontoseite die Details ihrer vergangenen Bestellungen einsehen, sollten sie auch die Informationen erkennen können, die sie zu diesem Zeitpunkt eingefügt haben. Dies wird durch… woocommerce_order_details_after_order_table Implementierung von Aktionshookern:
add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
$company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
if ( $company_custom ) {
echo '<h2>'.__('额外信息').'</h2>'echo '<table class="woocommerce-table shop_table extra_info"><tbody>'echo '<tr><th>'.__('自定义公司名').':</th><td>'.$company_custom.'</td></tr>'echo '</tbody></table>';
}
}Zusammenfassungen
Das Hinzufügen benutzerdefinierter Felder zum Zahlungsprozess von WooCommerce ist ein Prozess, der von der Anforderungsanalyse über die Entwicklung und Implementierung bis hin zur Datenverwaltung reicht. Der Schlüssel liegt darin, das Hook-System von WooCommerce zu verstehen und zu nutzen: woocommerce_checkout_fields Felder werden zum Hinzufügen von Filtern verwendet. woocommerce_checkout_process Die Aktion wurde überprüft und als gültig befunden. woocommerce_checkout_update_order_meta Die Aktionen speichern die Daten, und anschließend werden diese mithilfe mehrerer Anzeigemöglichkeiten im Hintergrund, per E-Mail sowie auf der Benutzeroberfläche des Benutzers dargestellt. Für Anfänger eignen sich zuverlässige Plugins als Ausgangspunkt; für Entwickler, die eine hohe Anpassbarkeit und Leistung anstreben, ist das Schreiben von Code der beste Weg. Unabhängig von der gewählten Methode sind ein klarer Datenfluss sowie strenge Validierungsverfahren entscheidend, um die Stabilität der Funktionen und die Verbesserung der Benutzererfahrung zu gewährleisten.
FAQ Häufig gestellte Fragen
Warum werden die hinzugefügten benutzerdefinierten Felder auf der Kasse-Seite nicht angezeigt?
Folgen Sie den folgenden Schritten zur Fehlerbehebung: Zuerst stellen Sie sicher, dass Ihr Code korrekt in das Thema integriert wurde. functions.php Entweder befindet sich der Fehler in einer Datei oder in einem benutzerdefinierten Plugin – und es gibt keine Syntaxfehler. Zweitens sollten Sie überprüfen, ob die Schlüssel des Feldarrays korrekt ineinander eingeschachtelt sind. $fields['billing']、$fields['shipping'] oder $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。
Wie kann man benutzerdefinierte Felder als optional oder obligatorisch einstellen?
Beim Hinzufügen von Feldern über Code können Sie diese im Feldarray entsprechend einstellen. 'required' => true oder 'required' => falseFalls ein Feld bereits als Pflichtfeld definiert ist, aber Sie es in ein optionales Feld ändern möchten, genügt es, dies im entsprechenden Bereich anzugeben. woocommerce_checkout_fields In der Filterfunktion wird dieses Feld verwendet… required Sie können den Parameter einfach auf „false“ ändern. Bitte beachten Sie, dass Sie nach der Änderung auch die entsprechenden Einträge anpassen oder entfernen müssen. woocommerce_checkout_process Die Validierungslogik im Text.
Wo werden die Daten der benutzerdefinierten Felder in der Datenbank gespeichert?
Die Werte der benutzerdefinierten Felder werden hauptsächlich in WordPress gespeichert. wp_postmeta In den Datenbanktabellen (der Tabellennamen kann unterschiedlich sein) wird jede Zeile durch… gekennzeichnet. post_id(Gegenüber dem Bestell-ID) und wp_posts Die Bestelldaten in der Tabelle sind miteinander verknüpft. meta_key(Das heißt, der Schlüsselname, den Sie beim Speichern verwendet haben, wie zum Beispiel…) _billing_company_custom) werden verwendet, um sie zu kennzeichnen.meta_value Dann wird der tatsächliche Wert des Speicherfeldes gespeichert. Sie können dies mithilfe von Datenbankverwaltungswerkzeugen oder in WordPress tun. get_post_meta() Die Funktion erfragt diese Daten.
Können unterschiedliche benutzerdefinierte Felder je nach Produkt angezeigt werden?
Ja, das ist möglich – allerdings erfordert dies eine komplexere Logik. Eine gängige Methode besteht darin, zunächst einer Produktart eine benutzerdefinierte Kategorie oder ein Metadatum hinzuzufügen, um deren Typ zu kennzeichnen. Anschließend wird auf der Kasse-Seite diese Information verwendet… woocommerce_after_checkout_form Geben Sie alle möglichen benutzerdefinierten Felder in HTML-Formate aus – entweder mithilfe von „Hooks“ oder ähnlichen Mechanismen –, verbergen Sie diese jedoch standardmäßig mit CSS. Danach schreiben Sie ein JavaScript-Skript, das auf Veränderungen im Inhalt des Warenkorbs oder auf die Auswahl bestimmter Produkte reagiert und entsprechende Feldgruppen dynamisch anzeigt oder versteckt. Schließlich müssen die Daten der entsprechenden Felder auch auf der Serverseite entsprechend der Produktart konditionell verarbeitet werden, wenn diese gespeichert werden.
Was kommt als Nächstes, was kommt als Nächstes?
Erweiterte Lektüre und praktische Kenntnisse
Die folgenden Artikel stehen im Zusammenhang mit dem Thema dieses Artikels und eignen sich für eine vertiefte Lektüre. Oft ist es besser, mit dem Artikel zu beginnen, der Ihrem aktuellen Problem am nächsten kommt, und dann nach und nach die umliegenden Themen zu behandeln.
- WooCommerce-Deutschsprachige Einführungsanleitung: Erstelle deinen Online-Shop von Grund auf
- Wie kann man die Zahlungsseite von WooCommerce anpassen, um die Konversionsrate zu erhöhen?
- Warum hast du dich für WooCommerce entschieden, um deinen Online-Shop zu erstellen?
- WooCommerce-Website-Optimierung: Die komplette Anleitung – Schlüsselstrategien zur Steigerung der Konvertierungsrate und des Benutzererlebnisses
- WooCommerce-Grundlagenhandbuch: Erstellen Sie von Grund auf Ihre eigene professionelle E-Commerce-Website
Deutsch