Komplette WooCommerce benutzerdefinierte Checkout Felder Entwicklung Guide: von Erste Schritte bis Hands-On

Warum benötigt man benutzerdefinierte Checkout-Felder?

Die Standard-Checkout-Seite von WooCommerce bietet grundlegende Felder wie Name, Adresse und E-Mail-Adresse, aber für viele spezifische Geschäftsszenarien reichen diese Felder bei weitem nicht aus. Beispielsweise müssen Geschäfte, die maßgeschneiderte Kuchen verkaufen, möglicherweise “Wünsche auf dem Kuchen” erfassen, B2B-Großhandelswebsites benötigen möglicherweise eine “Unternehmens-Steuernummer”, und Veranstaltungsticket-Websites benötigen möglicherweise eine “Personalausweisnummer” der Teilnehmer zur Überprüfung. In diesen Fällen müssen Entwickler die Funktionalität durch benutzerdefinierte Checkout-Felder erweitern, um die einzigartigen Anforderungen an die Erfassung von Geschäftsdaten zu erfüllen.

Angepasste Felder verbessern nicht nur die Benutzererfahrung und machen den Checkout-Prozess geschäftsorientierter, sondern liefern auch wichtige Daten für die spätere Kundenverwaltung, Auftragsabwicklung und sogar Marketingkampagnen. Indem diese Felder korrekt im Backend und in E-Mails angezeigt werden, kann die Informationsintegrität während des gesamten Bestellprozesses sichergestellt werden.

Ausführliche Erläuterung der Kernmethoden und -hooks

WooCommerce bietet ein leistungsstarkes und flexibles Hook-System, mit dem wir die Checkout-Seite ohne Änderung des Kerncodes umfassend anpassen können. Die Implementierung benutzerdefinierter Felder umfasst drei Hauptschritte: Hinzufügen von Feldern, Überprüfen von Feldern sowie Speichern und Anzeigen von Felddaten. Jedem Schritt entspricht ein bestimmter WooCommerce-Aktions-Hook oder Filter-Hook.

Ein Filter zum Hinzufügen von Feldern.

Das Hinzufügen von Feldern erfolgt hauptsächlich über woocommerce_checkout_fields Dies wird durch einen Filter erreicht. Dieser Filter ermöglicht es uns, neue Eingabefelder, Dropdown-Menüs oder Kontrollkästchen in verschiedene Bereiche des Checkout-Formulars einzufügen, z. B. in den Bereich “Rechnung”, den Bereich “Lieferung” oder den benutzerdefinierten Bereich “Zusätzliche Bestellinformationen”.

Die Entwickler müssen eine Rückruffunktion schreiben, die den vorhandenen Feldarray erhält und einen neuen Array mit Änderungen zurückgibt. Innerhalb der Funktion können Sie detailliert die Typen, Beschriftungen, Platzhalter, Pflichtfelder, Prioritäten (für die Sortierung) und CSS-Klassen für jedes neue Feld definieren.

UltaHost – WordPress-Hosting-Anbieter

30-tägige Geld-zurück-Garantie, unbegrenztes Bandbreiten- und Datenbankvolumen, kostenlose DDoS-Schutzmaßnahmen sowie ein Rabatt von 501 auf 4 Terabyte bei einer Kaufdauer von 3 Jahren.

Zugangsseite

Ein Hook zur Validierung von Feldern.

Wenn der Benutzer das Checkout-Formular einreicht, müssen wir sicherstellen, dass die Daten der benutzerdefinierten Felder den Anforderungen entsprechen. Hierfür müssen wir woocommerce_checkout_process Aktions-Hook. In der Rückruffunktion dieses Hooks können wir auf die Daten zugreifen, die übermittelt wurden. $_POST Überprüfen Sie die Daten, die von den globalen Variablen übermittelt werden, und validieren Sie diese.

Beispielsweise kann überprüft werden, ob ein Pflichtfeld leer ist, oder ob die Formatierung einer Telefonnummer korrekt ist. Falls die Überprüfung fehlschlägt, kann Folgendes verwendet werden: wc_add_notice() Die Funktion zeigt dem Benutzer eine Fehlermeldung an und verhindert, dass der Bestellvorgang fortgesetzt wird.

Haken zum Speichern und Anzeigen von Daten

Nachdem der Benutzer eine Bestellung aufgegeben hat, müssen die Daten der benutzerdefinierten Felder sicher in den Metadaten der Bestellung gespeichert werden. Dies geschieht durch woocommerce_checkout_update_order_meta Das wird mit Hilfe von Aktion-Hooks erreicht. In der Rückruffunktion dieses Hooks können wir Folgendes verwenden: update_post_meta() Die Funktion speichert die validierten Formularwerte in der entsprechenden Bestellung. wp_postmeta In der Datenbanktabelle.

Nach der Speicherung müssen wir diese Daten normalerweise an drei Stellen anzeigen: auf der Seite mit den Bestelldetails im Administratorbereich, in der Bestellbestätigungs-E-Mail, die der Benutzer erhält, und in der Bestellansicht im Kundenkonto. Dies betrifft jeweils die Anpassung der Verwaltungsoberfläche, der E-Mail-Vorlagen und der Frontend-Kontoseite.

Praktische Anwendung: Hinzufügen eines Felds für “Geschenk-Nachrichten”

Im Folgenden werden wir anhand eines vollständigen Beispiels zeigen, wie man einem Online-Blumengeschäft ein Textfeld für “Geschenkanmerkungen” hinzufügt. Dieses Feld erscheint im Bereich für Bestellinformationen und ist optional. Der Inhalt wird gespeichert und sowohl im Backend als auch in E-Mails angezeigt.

Schritt 1: Fügen Sie Felder zur Checkout-Seite hinzu.

Zunächst müssen wir woocommerce_checkout_fields Wir registrieren dieses neue Feld mit einem Filter. Wir werden es nach dem Feld “Bestellhinweise” hinzufügen. Hier ist der Implementierungscode, der zum Subthema hinzugefügt werden sollte. functions.php Sie können Dateien in das Dokument einfügen oder mithilfe von benutzerdefinierten Funktions-Plugins hinzufügen.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Dieser Code erstellt einen textarea Ein Textfeld mit dem Label “Grußbotschaft zum Geschenk” und entsprechenden Platzhaltern und CSS-Klassen wurde als Typ hinzugefügt.priority Die Parameter steuern ihre Anzeigeposition.

Schritt zwei: Speichern Sie die Felddaten in der Bestellung.

Als nächstes müssen wir die vom Benutzer eingegebenen Nachrichten beim Erstellen einer Bestellung speichern. Dazu verwenden wir woocommerce_checkout_update_order_meta Das wird mit einem „Hook“ umgesetzt.

hosting.com Shared Hosting

Hohe Leistung mit AMD EPYC-CPUs, NVMe-SSD-Speicher und LiteSpeed, fachkundiger Inhouse-Support rund um die Uhr, erweiterte Sicherheitsmaßnahmen einschließlich SSL, Brute-Force-, Malware- und DDoS-Schutz, Einsparungen von bis zu 73%

Zugangsseite

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Hier überprüfen wir $_POST['gift_message'] Gibt es einen Wert, und wenn ja, wird er verwendet? sanitize_textarea_field() Nachdem die Funktion die sichere Bereinigung durchgeführt hat, wird sie durch update_post_meta() Speichern Sie es als Bestell-Metadaten, wobei der Name des Metaschlüssels lautet _gift_message。

Schritt drei: Anzeigen der Daten im Hintergrund und in E-Mails

Nachdem die Daten gespeichert wurden, müssen wir sie sichtbar machen. Der folgende Code zeigt, wie dieses Feld auf der Seite mit den Bestelldetails im Administratorbereich und in E-Mails an Kunden angezeigt wird.

// Anzeige auf der Verwaltungsseite der Bestellungsdetails
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>'\n' . __( 'Geschenk-Nachricht:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message)`.'</p>'Wenn Sie einen WooCommerce-Shop betreiben, können Sie mit diesem Plugin benutzerdefinierte Felder in E-Mails anzeigen. Das Plugin fügt automatisch ein Feld mit der Bezeichnung 'Gift Message' hinzu, in dem der Kunde eine Nachricht für den Empfänger des Geschenks hinterlassen kann. Diese Nachricht wird dann beim Versenden der Bestellbestätigungs-E-Mail angezeigt.  

// Hinzufügen eines Felds zur Bestellbestätigungs-E-Mail  
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );  
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {  
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );  
    if ( $gift_message ) {  
        $fields['gift_message'] = array(  
            'label' =&gt; __( 'Gift Message', 'your-text-domain' ),  
            'value' =&gt; wptexturize( $gift_message ),  
        );  
    }  
    return $fields;  
}

Der erste Funktionsaufruf zeigt die Nachricht unter der Rechnungsadresse der Hintergrundbestellung an. Der zweite Funktionsaufruf fügt die Nachricht als neue Datenzeile in die von WooCommerce gesendete Bestellbestätigungs-E-Mail ein.

Erweiterte Tipps und Hinweise

Nachdem wir die grundlegenden Methoden beherrschen, können wir komplexere Anwendungsszenarien und Optimierungslösungen erforschen, um benutzerdefinierte Felder noch leistungsfähiger und benutzerfreundlicher zu machen.

Erstellt ein Bedingungs-Anzeigefeld.

Manchmal hängt die Anzeige eines Feldes vom Wert eines anderen Feldes ab. Beispielsweise wird das Feld “Rechnungsstellung” nur angezeigt, wenn der Benutzer “Rechnung erforderlich” auswählt. Dies erfordert die Integration von JavaScript für die Frontend-Interaktion. Wir können dem auslösenden Feld (z. B. einem Kontrollkästchen) ein < einfügen. change Sie können dann Ereignis-Listener verwenden, um die Anzeige oder das Ausblenden der Zielfelder dynamisch zu steuern. Gleichzeitig müssen Sie auch entsprechende Änderungen in der Validierungslogik auf dem Server vornehmen.

Die Sicherheit und Bereinigung der Felddaten

Sicherheit ist von entscheidender Bedeutung. Bei der Verarbeitung von Benutzereingaben müssen diese stets überprüft und bereinigt werden. Für Textfelder sollte Folgendes verwendet werden: sanitize_text_field() oder sanitize_textarea_field()Für E-Mails verwenden Sie sanitize_email()Beim Ausgeben von Daten an die Benutzeroberfläche ist es unerlässlich, sicherzustellen, dass… esc_html() oder wp_kses_post() Es ist notwendig, Funktionen wie diese zu entkommen, um Cross-Site-Scripting (XSS)-Angriffe zu verhindern.

InterServer Shared Hosting

Shared Hosting $2.50 USD pro Monat, erster Monat $0.1 USD Promo-Code tryinterserver, 461 Cloud-Apps Skripte, ein Klick installieren.

Zugangsseite

Die Kompatibilität mit Plugins und Themes von Drittanbietern

Bei der Hinzufügung von benutzerdefinierten Feldern kann es zu Konflikten mit den Stylesheets oder Skripten bestimmter Themes oder anderer Plugins (insbesondere Checkout-Optimierungs-Plugins) kommen. Es wird empfohlen, die Entwicklung immer in einem Sub-Theme durchzuführen und den Container-Elementen der benutzerdefinierten Felder eindeutige CSS-Klassennamen hinzuzufügen. Vor der offiziellen Bereitstellung sollten Sie die Elemente und Skriptfehler in verschiedenen Szenarien testen, einschließlich unterschiedlicher Themes und aktivierter gängiger Plugins. Die Verwendung der Browser-Entwicklertools zum Überprüfen von Elementen und Skriptfehlern ist ein wichtiges Mittel zur Fehlerbehebung bei Kompatibilitätsproblemen.

Zusammenfassungen

Mit der Anleitung in diesem Artikel beginnen wir mit dem Verständnis der Anforderungen und gehen dann schrittweise in den Entwicklungsprozess für benutzerdefinierte Checkout-Felder in WooCommerce ein. Wir haben gelernt, wie man woocommerce_checkout_fields、woocommerce_checkout_process und woocommerce_checkout_update_order_meta Diese drei Kern-Hooks dienen zum Hinzufügen, Überprüfen und Speichern von Feldern. Anhand eines praktischen Beispiels für “Geschenk-Nachrichten” wird der gesamte Prozess von der Erstellung der Felder bis zur Datenanzeige vollständig demonstriert. Abschließend werden fortgeschrittene Themen wie bedingte Felder, sichere Verarbeitung und Kompatibilität erörtert.

Wenn Sie diese Fähigkeiten beherrschen, können Sie flexibel auf die einzigartigen Anforderungen an die Datenerfassung in verschiedenen E-Commerce-Geschäften reagieren und einen professionelleren und individuelleren WooCommerce-Shop erstellen, um die Conversion-Rate und die Kundenzufriedenheit zu steigern.

FAQ Häufig gestellte Fragen

Wo werden die Daten der benutzerdefinierten Felder gespeichert?

Die Daten der benutzerdefinierten Felder werden normalerweise als “Bestellmetadaten” in der WordPress-Datenbank gespeichert. wp_postmeta In der Tabelle. Jede Datenzeile enthält die entsprechende Bestellungs-ID (post_id) und die von Ihnen definierten Metaschlüssel (z. B. _gift_messageDie WooCommerce-Bestellobjekte enthalten Informationen wie den Bestellstatus, den Gesamtbetrag und den Warenwert. Sie können auf die Methoden der WooCommerce-Bestellobjekte zugreifen, um diese Informationen abzurufen. $order->get_meta(‘_gift_message’) Oder WordPress-Funktionen get_post_meta() Um diese Daten zu erhalten.

Wie fügt man Frontend-Validierung (z. B. Formatprüfung) für benutzerdefinierte Felder hinzu?

Neben der Verwendung von woocommerce_checkout_process Neben der serverseitigen Validierung durch Hooks können Sie Feldern auch HTML5-native Attribute hinzufügen, um eine grundlegende Validierung durchzuführen, beispielsweise pattern Für reguläre Ausdrücke.type=”email” Für E-Mail-Formate. Für komplexere Echtzeit-Validierungen muss JavaScript/jQuery-Code geschrieben werden, der die Felder überwacht. blur oder input Bei einem Ereignis wird überprüft, ob der Wert den Regeln entspricht, und es wird sofort Feedback gegeben.

Ist es möglich, benutzerdefinierte Felder zur Benutzerregistrierungsseite hinzuzufügen?

Das ist möglich, aber der Prozess ist etwas anders. Die Checkout-Field-Hooks von WooCommerce sind speziell für Checkout-Seiten gedacht. Wenn Sie Felder zur Registrierung auf der “Mein Konto”-Seite hinzufügen möchten, müssen Sie andere Hooks verwenden, die von WordPress und WooCommerce bereitgestellt werden, z. B. woocommerce_register_form Um Felder hinzuzufügen,woocommerce_created_customer Um die Felddaten in den Benutzer-Metadaten zu speichern. Das Prinzip ist ähnlich wie bei den Checkout-Feldern, aber die Ziel-Hooks und der Speicherort der Daten (Benutzer-Metadaten) sind unterschiedlich.

Warum werden meine benutzerdefinierten Felder nicht angezeigt?

Zunächst überprüfen Sie, ob Ihr Code korrekt hinzugefügt wurde zu functions.php Und es gibt keine Grammatikfehler. Zweitens, überprüfen Sie, ob die Schlüssel des Feldes korrekt sind, z. B. wenn Sie sie hinzugefügt haben. $fields[‘order’] Dennoch $fields[‘billing’] Teilweise. Überprüfen Sie erneut, ob der Code anderer Plugins oder Themes Ihre Felder überschreibt oder entfernt. Zuletzt sollten Sie versuchen, den Cache der Website und des Browsers zu löschen, da alte CSS/JS-Dateien die Darstellung beeinträchtigen können.