Eine detaillierte Analyse der benutzerdefinierten Checkout-Felder von WooCommerce: Eine vollständige Entwicklungsanleitung

Überblick über das Zahlungsfeldsystem von WooCommerce

Die Zahlungsseite von WooCommerce ist ein entscheidender Schritt im E-Commerce-Prozess, bei dem Kundendaten gesammelt werden. Die Flexibilität und Erweiterbarkeit dieser Seite beruht in hohem Maße auf ihrem modularen Feldsystem. Dieses System organisiert alle von den Nutzern einzufüllenden Angaben – wie Namen, Adressen, Kontaktdaten usw. – in einem strukturierten, mehrdimensionalen Assoziationsarray. Dieses Array definiert nicht nur die Bezeichnungen und Typen der Felder, sondern steuert auch die Anzeigereihenfolge, die Pflichtigkeit der Felder, die Validierungsregeln sowie die zugehörigen CSS-Klassen.

Der Kern des gesamten Systems ist… class-wc-checkout.php Die Datei sowie deren Inhalte… WC_Checkout Klassen. Alle Felder werden je nach ihrem Verwendungszweck in mehrere Haupt-“Feldsets” eingeteilt; das am häufigsten genutzte Feldset ist… billing(Bill fields)shipping(Distribution fields) und order(Felder wie Bestellnotizen usw.) Jeder Feldsatz selbst ist ein Array, das mehrere Felddefinitionen enthält. Das Verständnis dieser Hierarchie ist der erste Schritt bei jeglichen Anpassungen, da alle Änderungen darum gehen, mit diesem Gesamtfeldarray zu arbeiten. Entwickler müssen die Kerndateien nicht direkt ändern, sondern greifen in den Prozess ein, indem sie eine Reihe sorgfältig gestalteter Aktionen und Filter-Hooks verwenden. Dies gewährleistet die Nachhaltigkeit der angepassten Funktionen sowie deren Kompatibilität mit zukünftigen Versionen.

Verwenden Sie die eingebauten Hook-Funktionen, um Felder hinzuzufügen und zu ändern.

WooCommerce bietet ein leistungsstarkes und benutzerfreundliches Hook-System, das Entwicklern ermöglicht, Zahlungsfelder sicher hinzuzufügen, zu entfernen, zu ändern oder abzurufen. Dies ist die Standardmethode für individuelle Anpassungen und vermeidet die Wartungsprobleme, die mit direkten Änderungen an den Kernvorlagen entstehen.

Empfohlene Lektüre Praktischer Leitfaden zur Optimierung der Leistung von WooCommerce-E-Commerce-Webseiten und zur Entwicklung fortgeschrittener Plugins。

Wie fügt man neue Felder zu einem Bezahlformular hinzu?

Um auf der Kasse-Seite ein neues Feld hinzuzufügen – beispielsweise ein Auswahlfeld, in dem Kunden den “Art des Rechnungstitels” auswählen können – müssen Sie Folgendes tun: woocommerce_checkout_fields Filter: Dieser Filter übermittelt dem Entwicklerfunktionen ein vollständiges Array der Abrechnungsfelder, wodurch Sie auf beliebige Feldmengen zugreifen können. billingEinen neuen Eintrag hinzufügen in （）。

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

function add_invoice_title_field( $checkout_fields ) {
    $checkout_fields['billing']['billing_invoice_type'] = array(
        'type' => 'select',
        'label' => '发票抬头',
        'required' => true,
        'options' => array(
            'personal' => '个人',
            'company' => '单位'
        ),
        'class' => array('form-row-wide'),
        'priority' => 21, // 紧跟在“公司名称”字段之后
    );
    return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'add_invoice_title_field' );

Der obige Code erstellt in dem Bereich der Rechnungsfelder ein Dropdown-Menü. Jede Felddefinition besteht aus einem Assoziationsarray, in dem… type, label, required Die entsprechenden Schlüssel-Wert-Paare bestimmen das Verhalten und das Erscheinungsbild eines Feldes.priority Die Parameter sind von entscheidender Bedeutung, da sie die Anzeigereihenfolge dieses Feldes im Formular bestimmen. Je kleiner die Zahl ist, desto weiter vorne befindet sich das Feld in der Liste.

Eigenschaften von vorhandenen Feldern ändern oder löschen

Die Geschäftsanforderungen können erfordern, dass die Standardfelder angepasst werden. Zum Beispiel sollten in bestimmten Regionen das Feld “Postleitzahl” als nicht erforderlich eingestellt oder das Feld “Bundesstaat/Provinz” versteckt werden. Auch dies erfolgt über die übergebenen Anweisungen. woocommerce_checkout_fields Dies wird durch die Verwendung eines Arrays von Filtern erreicht.

function adjust_default_fields( $fields ) {
    // 将账单邮编字段设为非必填
    $fields['billing']['billing_postcode']['required'] = false;

// 完全移除账单州/省字段
    unset( $fields['billing']['billing_state'] );

// 更改邮箱字段的占位符文本
    $fields['billing']['billing_email']['placeholder'] = '用于接收订单确认信';

return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'adjust_default_fields' );

Durch unset() Eine Funktion kann ein Feld vollständig löschen. In den meisten Fällen geschieht dies, indem ein bestimmtes Attribut in einem Array überschrieben wird. required, label, classDies dient dazu, das Verhalten bei der Änderung von Feldwerten zu steuern.

Feldvalidierung und Datendauerhaftigkeit

Das Anzeigen der Felder auf der Benutzeroberfläche ist nur der erste Schritt. Um die Datenqualität zu gewährleisten, muss die von den Benutzern eingegebene Information überprüft werden und die geprüften Daten zuverlässig in die Bestellung gespeichert werden. Dieser Prozess umfasst sowohl die sofortige Überprüfung auf der Benutzeroberfläche (optional, aber verbessert das Benutzererlebnis) als auch die Überprüfung beim Absenden der Daten auf der Serverseite (zwingend erforderlich).

Empfohlene Lektüre Der ultimative Leitfaden zur Leistungsoptimierung von WooCommerce-E-Commerce-Websites: Alles von der Konfiguration bis zum Caching erklärt。

Implementieren der Backend-Validierungslogik

Wenn der Benutzer auf die Schaltfläche “Bestellung aufgeben” klickt, führt WooCommerce den Abwicklungsprozess zur Bestellabwicklung durch. Entwickler können dies für ihre Zwecke nutzen. woocommerce_checkout_process Action Hooks werden verwendet, um benutzerdefinierte Validierungsregeln einzufügen. Falls die Validierung fehlschlägt, sollte eine entsprechende Aktion ausgeführt werden. wc_add_notice() Die Funktion zeigt dem Benutzer eine Fehlermeldung an und verhindert die Erstellung der Bestellung.

function validate_custom_fields_during_checkout() {
    // 检查自定义的“发票抬头”字段
    if ( isset( $_POST['billing_invoice_type'] ) && $_POST['billing_invoice_type'] == 'company' ) {
        // 如果选择了“单位”发票，则检查是否填写了公司名称
        if ( empty( $_POST['billing_company'] ) ) {
            wc_add_notice( '选择“单位”发票抬头时，必须填写公司名称。', 'error' );
        }
    }

// 验证一个自定义的文本字段，确保其格式
    if ( ! empty( $_POST['billing_custom_id'] ) && ! preg_match( '/^CUSTd{6}$/', $_POST['billing_custom_id'] ) ) {
        wc_add_notice( '客户编号格式错误，应为 CUST 后接6位数字。', 'error' );
    }
}
add_action( 'woocommerce_checkout_process', 'validate_custom_fields_during_checkout' );

Die Feldwerte werden in die Metadaten des Auftrags gespeichert.

Nachdem die Überprüfung erfolgreich abgeschlossen wurde, ist der nächste Schritt die dauerhafte Speicherung der Werte der benutzerdefinierten Felder beim Erstellen einer Bestellung. Dies erfolgt auf folgende Weise: woocommerce_checkout_update_order_meta Die Aktionshook-Verarbeitung ist abgeschlossen. Dieser Hook wird nach der Erstellung eines Auftrags ausgelöst und übermittelt die ID des Auftrags. Sie sollten WordPress dafür verwenden. update_post_meta() Die Funktion speichert die Formulardaten als Bestellinformationen.

function save_custom_checkout_field_data( $order_id ) {
    // 保存发票类型
    if ( ! empty( $_POST['billing_invoice_type'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_type', sanitize_text_field( $_POST['billing_invoice_type'] ) );
    }

// 保存客户编号
    if ( ! empty( $_POST['billing_custom_id'] ) ) {
        update_post_meta( $order_id, '_billing_custom_id', sanitize_text_field( $_POST['billing_custom_id'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_data' );

Bei der Speicherung werden Schlüsselnamen mit einem Bindestrich-Prefix verwendet (z. B. …) _billing_invoice_typeEs handelt sich dabei um eine Vereinbarung, die verhindert, dass dieses Feld im Metadatenfeld “Benutzerdefinierte Felder” auf der Seite zur Bearbeitung von Bestellungen im Hintergrund angezeigt wird – dadurch werden Fehlbedienungen durch Administratoren vermieden. Bitte verwenden Sie diese Regel unbedingt. sanitize_text_field() Funktionen wie diese werden verwendet, um Daten zu bereinigen, um Sicherheitsrisiken zu vermeiden.

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

Benutzerdefinierte Daten werden auf den Bestellbezogenen Seiten angezeigt.

Nachdem die Daten gespeichert wurden, müssen sie normalerweise an mehreren Stellen erneut angezeigt werden, darunter: 1) das Backend-Bestellverwaltungsinterface von WordPress; 2) die Bestellungsdetails-Seite im “Mein Konto”-Bereich für registrierte Benutzer; 3) Bestellungs-E-Mails, die an Kunden und Administratoren gesendet werden. Dies gewährleistet die Integrität und Transparenz der Transaktionsinformationen.

Integration von benutzerdefinierten Feldern auf der Seite mit den Bestelldetails im Hintergrund

Damit die Administratoren die von den Kunden eingegebenen Informationen im Backend leicht überprüfen können, müssen die gespeicherten Bestellmetadaten auf die Bestellbearbeitungsseite ausgegeben werden. Dazu wird die folgende Methode verwendet: woocommerce_admin_order_data_after_billing_address und woocommerce_admin_order_data_after_shipping_address Warteschlüssel („Wait Hooks“) ermöglichen es, Inhalte nach bestehenden Informationen einzufügen.

function display_custom_order_meta_in_admin( $order ) {
    $invoice_type = get_post_meta( $order->get_id(), '_billing_invoice_type', true );
    if ( $invoice_type ) {
        $display_type = ( $invoice_type == 'company' ) ? '单位' : '个人';
        echo '<p><strong>Art des Rechnungsausstellers:</strong> '`. esc_html($display_type)`.'</p>';
    }

$custom_id = get_post_meta( $order-&gt;get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<p><strong>Kundennummer:</strong> '`. esc_html($custom_id)`.'</p>';
    }
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_order_meta_in_admin' );

Die Daten werden sowohl auf der Benutzeroberfläche als auch in den E-Mails angezeigt.

Um sicherzustellen, dass auch die Kunden die von ihnen bereitgestellten Informationen sehen können, müssen Sie außerdem das Vorlagendesign der Bestellansicht sowie den Inhalt der E-Mails anpassen. Für die Bestelldetailsseite können Sie… woocommerce_order_details_after_order_table Haken. Für E-Mails müssen diese Haken verwendet werden. woocommerce_email_order_meta_keys Der Filter teilt dem E-Mail-System die benutzerdefinierten Metadatenschlüssel mit, wodurch diese automatisch in den Inhalt der E-Mails aufgenommen werden.

Empfohlene Lektüre WordPress-Plugin-Entwicklung meistern: Effiziente, benutzerdefinierte Funktionen von Grund auf erstellen。

// 在前台“查看订单”页面显示
function display_custom_data_in_order_view( $order ) {
    $custom_id = get_post_meta( $order->get_id(), '_billing_custom_id', true );
    if ( $custom_id ) {
        echo '<h2>Zusätzliche Informationen</h2><table class="shop_table custom-info"><tbody><tr><th>Kundennummer:</th><td>'`. esc_html($custom_id)`.'</td></tr></tbody></table>';
    }
}
add_action( 'woocommerce_order_details_after_order_table', 'display_custom_data_in_order_view' );

// 将自定义字段加入订单邮件
function add_custom_field_to_emails( $keys ) {
    $keys[] = '_billing_custom_id'; // 这个键对应的值会被加入到邮件中
    $keys[] = '_billing_invoice_type';
    return $keys;
}
add_filter( 'woocommerce_email_order_meta_keys', 'add_custom_field_to_emails' );

Zusammenfassungen

Die Definition benutzerdefinierter Zahlungsfelder in WooCommerce stellt einen vollständigen Entwicklungsprozess dar, der von der Anzeige auf der Benutzeroberfläche bis zum Speichern der Daten reicht. Der Schlüssel dazu liegt darin, das von WooCommerce bereitgestellte Hook-System zu verstehen und flexibel einzusetzen: woocommerce_checkout_fields Filter werden verwendet, um die Struktur von Feldern zu definieren und zu ändern. woocommerce_checkout_process Die Aktion führt die notwendige Validierungslogik durch; mithilfe von… woocommerce_checkout_update_order_meta Die Aktion dient der Persistenz der validen Daten; abschließend werden verschiedene, mit der Anzeige verbundene Haken („Hooks“) genutzt… woocommerce_admin_order_data_after_billing_address und woocommerce_email_order_meta_keysDie Daten werden im Hintergrund, auf der Benutzeroberfläche sowie in E-Mails angezeigt. Indem Entwickler diesem Muster folgen, können sie eine leistungsstarke, stabile und den Geschäftsanforderungen gerechte Abrechnungserfahrung erstellen, während gleichzeitig die Wartbarkeit des Codes sowie die Sicherheit bei Upgrades gewährleistet werden.

FAQ Häufig gestellte Fragen

Können bei benutzerdefinierten Feldern Validierungsregeln hinzugefügt werden, zum Beispiel solche, die nur die Eingabe von Zahlen zulassen?

Ja, wie im Abschnitt “Feldvalidierung und Datendauerhaftigkeit” dieses Artikels beschrieben, können Sie dies tun. woocommerce_checkout_process Sie können beliebige PHP-Validierungslogik in die Callback-Funktion des Hooks schreiben. Zum Beispiel: is_numeric() Funktion oder regulärer Ausdruck preg_match() Überprüfen Sie, ob der Wert des Feldes eine reine Zahl ist. Falls die Überprüfung fehlschlägt, rufen Sie die entsprechende Funktion auf. wc_add_notice() Es reicht aus, wenn der Fehler angezeigt wird.

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

Wie kann man sicherstellen, dass ein benutzerdefiniertes Feld nur für bestimmte Liefermethoden angezeigt wird?

Dies erfordert die Kombination von Bedingungslogik. Sie können in der Funktion, die Felder hinzufügt oder ändert, überprüfen, welche Liefermethode im aktuellen Warenkorb oder in der Sitzung verwendet wird. Zum Beispiel können Sie dazu… WC()->session->get('chosen_shipping_methods') Erhalten Sie die ID der ausgewählten Liefermethode. Falls diese nicht den Anforderungen entspricht, kann eine andere Methode verwendet werden. unset() Entfernen Sie dieses Feld aus dem Feldarray oder fügen Sie eine bestimmte CSS-Klasse hinzu (z. B. „class-name“). hiddenDiese Funktion wird in Kombination mit JavaScript verwendet, um Inhalte dynamisch anzuzeigen oder zu verbergen.

Ich habe die Felder geändert, aber die Kasse-Seite hat sich nicht verändert. Was könnte der Grund dafür sein?

Zuerst stellen Sie sicher, dass Ihr benutzerdefinierter Code korrekt ausgeführt wird (z. B. der Code, der die Anpassungen an das Thema vornimmt). functions.php Der Datei fehlen keine Syntaxfehler. Zweitens sollten Sie die Logik des Codes überprüfen und sicherstellen, dass Sie die richtigen Schlüsselnamen der Feldarrays geändert haben (z. B.). billing Dennoch shippingAnschließend löschen Sie alle möglichen Caches – einschließlich Objekt-Caches, Seiten-Caches und Browser-Caches. Versuchen Sie schließlich, auf das Standard-Thema (z. B. Storefront) umzustellen und andere Plugins deaktivieren, um mögliche Konflikte auszuschließen.

Können die gespeicherten Daten der benutzerdefinierten Felder für spätere Bestellsuchen oder Berichtsanalysen verwendet werden?

Ja, das ist möglich – allerdings könnten zusätzliche Schritte erforderlich sein. Da die Daten als Post-Meta-Informationen zu den Bestellungen gespeichert werden, können Sie die Bestellungen mithilfe der Metadatenabfragemöglichkeiten von WordPress abrufen. Für die Suche in der Bestellliste im WooCommerce-Backend benötigen Sie möglicherweise ein Plugin, das die Suche nach benutzerdefinierten Feldern unterstützt, oder Sie müssen Code schreiben, um die Standard-Suchfunktion zu erweitern. Bei der Erstellung von Berichten bieten hochentwickelte Berichtsplattformen in der Regel die Möglichkeit, Bestellmetadaten in die Filter- und Anzeigeeinstellungen einzubeziehen. Die Exportierung der Felddaten als CSV hängt davon ab, ob das Export-Tool die Auswahl benutzerdefinierter Metadatenspalten unterstützt.