Leitfaden: WooCommerce Checkout-Felder per Code anpassen

In diesem Beitrag erfahren Sie, wie Sie standardmäßige Checkout-Felder in WooCommerce ändern, entfernen oder neu positionieren und wie Sie Ihr eigenes benutzerdefiniertes Feld hinzufügen.

Der Kassenfeldfilter

WooCommerce bietet einen Filter für alle Checkout-Felder: woocommerce_checkout_fields. Es gibt auch spezielle Filter für Rechnungs- und Versandfelder; woocommerce_billing_fieldsund woocommerce_shipping_fieldsdoch landen beide im oben erwähnten ersten Filter.

Die Felder in woocommerce_checkout_fieldssind in einem mehrdimensionalen Array wie folgt strukturiert:

• billing
  • billing_first_name
  • billing_last_name
  • billing_company
  • billing_address_1
  • billing_address_2
  • billing_city
  • billing_postcode
  • billing_country
  • billing_state
  • billing_email
  • billing_phone
• order
  • order_comments
• shipping
  • shipping_first_name
  • shipping_last_name
  • shipping_company
  • shipping_address_1
  • shipping_address_2
  • shipping_city
  • shipping_postcode
  • shipping_country
  • shipping_state
• account
  • account_username
  • account_password
  • account_password-2

Jedes Feld ist ein Array, das die folgenden Einstellungen enthält (nicht alle Felder enthalten alle Eigenschaften):

• label: Die sichtbare Bezeichnung des Felds beim Checkout
• placeholder: Der Platzhalter der Eingabe
• type: Definiert den Feldtyp. Wenn nicht gesetzt, ist es standardmäßig die Texteingabe, ansonsten kann es select, tel, email, textarea, usw. sein.
• required: Ein boolescher Wert, ob das Feld erforderlich ist oder nicht
• class: Klassen, die auf das Wrapper-Element des Felds angewendet werden. Denken Sie daran, dass dies ein Array ist.
• priority: Ganzzahl, die WooCommerce über die Reihenfolge des Felds informiert

Einige Felder haben zusätzliche Eigenschaften, die speziell für bestimmte Felder angepasst sind und normalerweise nichts sind, worüber Sie nachdenken müssen.

Ändern von Standardfeldern

Wenn Sie einen Filter hinzufügen woocommerce_checkout_fieldsund sich die obige Übersicht ansehen, sollte es ziemlich einfach sein zu verstehen, wie Sie die vorhandenen Felder ändern können.

Hier ist ein Beispiel dafür, wie Sie die Bezeichnung im Telefonfeld ändern:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['label'] = __('Mobile phone', 'textdomain');
    return $fields;
});

Oder möchten Sie vielleicht die erforderliche Eigenschaft ändern, indem Sie das Feld optional machen (oder umgekehrt)?

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['required'] = false;
    return $fields;
});

Wenn Sie jedoch die Adressfelder bearbeiten möchten (gilt insbesondere für _address_1, _postcodeund _city), müssen Sie möglicherweise einen anderen Filter verwenden; nämlich woocommerce_default_address_fields. Als Argument für diesen Filter ist das Array nicht mehr mit Rechnungs- und Versandschlüsseln strukturiert, und den Feldschlüsseln fehlen die vorangestellten „ billing_” oder „ shipping_“-Teile. Adresse 1 steht zB in diesem Filter unter dem Schlüssel address_1.

Hier ist ein Beispiel für die Änderung des Labels der Postleitzahl:

add_filter('woocommerce_default_address_fields', function($address_fields) {
    $address_fields['postcode']['label'] = __('Postcode', 'textdomain');
    return $address_fields;
});

Standardfelder entfernen

Das Entfernen von Standardfeldern ist einfach, indem die unset()Array-Funktion von PHP im woocommerce_checkout_fieldsFilter verwendet wird. Zum Beispiel:

add_filter('woocommerce_checkout_fields', function($fields) {
    unset($fields['billing']['billing_city']);
    return $fields;
});

Felder neu anordnen

Das Neuordnen von Feldern erfolgt durch Ändern der Eigenschaften priorityder Felder. Diese Eigenschaft wurde kürzlich hinzugefügt (WooCommerce 3+) und machte die Neuordnung viel einfacher als zuvor, wo Sie das Array neu anordnen mussten.

Je niedriger die Zahl, desto höher kommt sie. Die Priorität jedes Felds gibt etwas Spielraum, um Felder zwischen ihnen zu verschieben, zum Beispiel beginnt der Vorname bei 10, der Nachname bei 20 und die Firma bei 30. Wenn Sie ein Feld nach dem Nachnamen und vor der Firma haben möchten, können Sie die Priorität auf 25 setzen.

Beispiel für das Verschieben des Telefonfelds vor der Adresse:

add_filter('woocommerce_checkout_fields', function($fields) {
    $fields['billing']['billing_phone']['priority'] = 35;
    return $fields;
});

Auch hier gilt der bereits erwähnte Sonderfall für Adressfelder. Wenn Sie beispielsweise die Priorität einer Stadt ändern möchten, verwenden Sie den Filter woocommerce_default_address_fields.

add_filter('woocommerce_default_address_fields', function($address_fields) {  
    $address_fields['city']['priority'] = 45;
    return $address_fields;
});

Hinweis: Je nach Land überschreibt WooCommerce häufig die Priorität im Postleitzahlenfeld (setzt es auf 65).

Hinzufügen von benutzerdefinierten Feldern zur Kasse

Sie haben zwei Möglichkeiten, benutzerdefinierte Felder hinzuzufügen; Sie können über den Filter entweder ein benutzerdefiniertes Feld zum Rechnungs- oder Versandarray hinzufügen woocommerce_checkout_fields, und WooCommerce kümmert sich um die Verarbeitung und das Speichern in der Bestellung. Alternativ können Sie Aktionen im Checkout (z. B. woocommerce_after_order_notes) verwenden, um ein Feld hinzuzufügen, aber in diesem Fall müssen Sie Code schreiben, um es manuell zu verarbeiten und zu speichern.

Methode 1: Hinzufügen eines benutzerdefinierten Felds zur Abrechnung oder zum Versand mithilfe des Checkout-Filters

Die einfache Methode besteht darin, denselben Filter zu verwenden, den wir die ganze Zeit verwendet haben. woocommerce_checkout_fieldsund fügen Sie einfach ein neues Array-Element hinzu.

Die WooCommerce-Dokumentation macht dies nicht deutlich, aber diese Methode funktioniert nur, um Felder zu „Abrechnung” oder „Versand” hinzuzufügen. Außerdem muss Ihrem Schlüssel/Feldnamen der entsprechende übergeordnete Schlüssel vorangestellt werden. Um beispielsweise ein Feld „ my_custom_input” zum Abrechnungsarray hinzuzufügen, muss es „ billing_my_custom_input” heißen. Andernfalls speichert WooCommerce Ihr Feld nicht.

Hier ist ein Beispiel für das Hinzufügen einer nicht erforderlichen benutzerdefinierten Auswahl/Dropdown-Liste für die Abrechnung, die direkt vor dem Telefon positioniert ist. Indem Sie ‘ type‘ auf ‘ select‘ setzen und ein Array für die Optionen der optionsEigenschaft ‘ ‘ bereitstellen, machen Sie eine Auswahleingabe.

WooCommerce verarbeitet und speichert dieses Feld automatisch als Teil der Checkout-Felder.

Es gibt keine automatische Möglichkeit, Ihr Feld in der Auftragsverwaltung sichtbar zu machen. Sie können sich in die Aktion woocommerce_admin_order_data_after_billing_addresseinklinken und das Metafeld manuell abrufen, indem Sie die Auftrags-ID aus dem Auftragsobjekt verwenden, das als Argument für die Aktion bereitgestellt wird. Denken Sie daran, dass der Wert als Post-Meta mit einem führenden „_” gespeichert wird. Im obigen Beispiel wird das Feld als „ _billing_my_custom_select” in der Datenbank gespeichert.

Methode 2: Hinzufügen eines benutzerdefinierten Felds mithilfe von Aktionen

Wenn Sie mit der obigen Methode auf Probleme stoßen oder Ihr Feld anders positionieren möchten, empfehle ich Ihnen, sich für diese Methode zu entscheiden. Es ist etwas mehr Code, aber Sie haben mehr Kontrolle. Ich persönlich bevorzuge diese Methode.

Der erste Schritt ist die Auswahl einer Aktion an der Kasse, in der Sie Ihr Feld hinzufügen möchten. Dies ist einfach eine Frage der Präferenz, wo Ihr Feld erscheinen soll. Werfen Sie einen Blick in die /woocommerce/templates/checkout/Vorlagendateien; zB form-checkout.php, form-billing.phpoder form-shipping.php. In meinem Beispiel habe ich die Aktion gewählt, woocommerce_after_order_notesdie in erscheint form-shipping.php, nach Bestellnotizen.

Sie verwenden die Funktion woocommerce_form_field und geben die gleichen Eigenschaften an, die Sie im woocommerce_checkout_fieldsFilter gesehen haben (siehe oben). Optional können Sie HTML um Ihr benutzerdefiniertes Feld hinzufügen, wie ich es getan habe. Hier ist ein Beispiel für das Hinzufügen eines benutzerdefinierten Felds zur Eingabe der Mitglieds-ID:

Das Feld sollte nun im Checkout erscheinen.

Die Validierung Ihres Feldes ist optional. Ich habe ein Beispiel für die Validierung eingefügt, um sicherzustellen, dass eine gültige Mitglieds-ID bereitgestellt wurde, indem ich ihre Länge überprüft habe. Verwenden Sie zur Validierung den Hook woocommerce_checkout_processund wenn Sie einen Fehler zurückgeben und den Checkout-Prozess stoppen müssen, verwenden Sie wc_add_notice().

Der nächste Schritt besteht darin, den Wert des Felds zu speichern, wenn jemand eine Bestellung aufgibt. Dazu verwenden wir die Aktion woocommerce_checkout_update_order_metaund speichern das Feld einfach als Post-Meta in der Bestell-ID (als Parameter für die Aktion bereitgestellt) und holen den Wert aus $_POST.

add_action('woocommerce_checkout_update_order_meta', function($order_id) {
    if (!empty($_POST['member_id'])) {
        update_post_meta($order_id, 'member_id', sanitize_text_field($_POST['member_id']));
    }
}

Ihr benutzerdefiniertes Feld sollte jetzt in Bestellungen gespeichert werden.

Wenn Sie das Feld in der Auftragsverwaltung anzeigen möchten, fügen Sie denselben Code wie in Methode 1 hinzu. Ich füge ihn hier erneut ein, angepasst an den Feldnamen dieses Beispiels: