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_fields
und woocommerce_shipping_fields
doch landen beide im oben erwähnten ersten Filter.
Die Felder in woocommerce_checkout_fields
sind 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 Checkoutplaceholder
: Der Platzhalter der Eingabetype
: Definiert den Feldtyp. Wenn nicht gesetzt, ist es standardmäßig die Texteingabe, ansonsten kann esselect
,tel
,email
,textarea
, usw. sein.required
: Ein boolescher Wert, ob das Feld erforderlich ist oder nichtclass
: 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_fields
und 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
, _postcode
und _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_fields
Filter 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 priority
der 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_fields
und 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 options
Eigenschaft ‘ ‘ bereitstellen, machen Sie eine Auswahleingabe.
add_filter('woocommerce_checkout_fields', function($fields) {
$fields['billing']['billing_my_custom_select'] = [
'label' => __('My custom select', 'textdomain'),
'required' => false,
'type' => 'select',
'options' => [
'' => __('Choose which you prefer', 'textdomain'),
'dogs' => __('Dogs are best', 'textdomain'),
'cats' => __('I prefer cats', 'textdomain')
],
'class' => ['form-row-wide'],
'priority' => 85
];
return $fields;
});
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_address
einklinken 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.
add_action('woocommerce_admin_order_data_after_billing_address', function($order) {
$my_value = get_post_meta($order->id, '_billing_my_custom_select', true);
if (!empty($my_value)) {
echo '<p><strong>'. __('My custom select', 'textdomain'). ':</strong> '. $my_value. '</p>';
}
});
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.php
oder form-shipping.php
. In meinem Beispiel habe ich die Aktion gewählt, woocommerce_after_order_notes
die 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_fields
Filter 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:
add_action('woocommerce_after_order_notes', function($checkout) {
echo '<div id="my_custom_checkout_field"><h3>'. __('Members', 'textdomain'). '</h3>';
woocommerce_form_field('member_id', [
'type' => 'text',
'class' => ['form-row-wide'],
'label' => __('Member ID', 'textdomain'),
], $checkout->get_value('member_id'));
echo '</div>';
});
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_process
und wenn Sie einen Fehler zurückgeben und den Checkout-Prozess stoppen müssen, verwenden Sie wc_add_notice()
.
add_action('woocommerce_checkout_process', function() {
if (!empty($_POST['member_id'])) {
$given_member_id = $_POST['member_id'];
if (strlen($given_member_id) < 5 || strlen($given_member_id) > 10) {
wc_add_notice(__('Invalid member ID', 'textdomain'), 'error');
}
}
});
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_meta
und 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:
add_action('woocommerce_admin_order_data_after_billing_address', function($order) {
$member_id = get_post_meta($order->id, 'member_id', true);
if (!empty($member_id)) {
echo '<p><strong>'. __('Member ID', 'textdomain'). ':</strong> '. $member_id. '</p>';
}
});