So fügen Sie der WooCommerce-Checkout-Seite ein zusätzliches Feld hinzu

Wenn Sie Online-Geschäfte betreiben, wissen Sie bereits um die Bedeutung einer Checkout-Seite. Manchmal müssen Sie aufgrund spezifischer Anforderungen Anpassungen an Ihrer E-Commerce-Website vornehmen.

In diesem Tutorial zeigen wir Ihnen, wie Sie die WooCommerce-Checkout-Seite anpassen und zusätzliche Felder hinzufügen. Wir werden zwei Möglichkeiten besprechen, wie Sie Ihre Arbeit erledigen können:

1. Hinzufügen zusätzlicher Felder zur WooCommerce-Checkout-Seite mithilfe von Code (für technische Benutzer)
2. Fügen Sie mithilfe eines WordPress-Plugins zusätzliche Felder zur WooCommerce-Checkout-Seite hinzu (für technisch nicht versierte Benutzer).

Bevor wir mit dem Tutorial beginnen, wollen wir herausfinden, was eine Checkout-Seite ist.

Was ist eine WooCommerce-Checkout-Seite?

Eine Checkout-Seite ist ein E-Commerce-Begriff, der sich auf eine Seite bezieht, die einem Kunden während des schrittweisen Checkout-Prozesses angezeigt wird. Im Allgemeinen ist es die wichtigste Seite sowohl für Verkäufer als auch für Kunden.

Kunden müssen auf dieser Seite wichtige Informationen wie Adresse, Rechnungsdetails und Zahlungsmethode angeben. Und wenn auf dieser Seite irgendwie ein Fehler auftritt, kann kein Kunde einen Kauf tätigen! Wir können uns also vorstellen, wie wichtig diese Seite für die Verkäufer ist.

Wenn Sie WordPress für den Betrieb Ihrer Website und WooCommerce als Ihre E-Commerce-Lösung verwenden, erhalten Sie Ihre eigene Checkout-Seite. Da es sich bei WooCommerce jedoch um eine kostenlose Lösung handelt, haben Sie nicht die Möglichkeit, die Checkout-Seite von WooCommerce über die Einstellungen anzupassen.

Wie würden Sie also die WooCommerce-Checkout-Seite bei Bedarf anpassen? Nun zeigen wir Ihnen die Tricks zum Anpassen der WooCommerce-Checkout-Seite.

Wie füge ich der WooCommerce-Checkout-Seite ein zusätzliches Feld hinzu?

Das Hinzufügen benutzerdefinierter Felder zu einer WooCommerce-Checkout-Seite kann manchmal eine herausfordernde Aufgabe sein. Dieses Tutorial führt Sie durch den Prozess. Nachdem Sie diesen Blog gelesen haben, wissen Sie, wie Sie der WooCommerce-Checkout-Seite ein benutzerdefiniertes Feld hinzufügen. Lassen Sie uns direkt darauf eingehen:

Stellen wir uns vor, dass dies Ihre Standard-Checkout-Seite ist.

Es gibt zwei völlig unterschiedliche Ansätze, die Ihnen beim Hinzufügen benutzerdefinierter Felder zur Checkout-Seite in WooCommerce helfen. Jene sind-

• Verwenden von benutzerdefinierter Codierung (für Programmierer)
• Verwendung eines WordPress- Plugins (für Nicht-Programmierer)

1. Fügen Sie durch Codierung zusätzliche Felder zur WooCommerce-Checkout-Seite hinzu

Personen , die sich mit Programmieren auskennen oder über grundlegende Programmierkenntnisse verfügen, können diesem Ansatz folgen. Diese Methode fügt das benutzerdefinierte Feld mithilfe des unten angegebenen Codes zur Checkout-Seite hinzu. Um mit dem WooCommerce-Checkout-Seitencode zu beginnen, führen Sie die folgenden Schritte aus:

Zuerst müssen Sie eine Aktion an unserer Datei „functions.php“ ausführen . Kopieren Sie den gesamten Code in die Datei „function.php“ Ihres Themes.

 /** * Add custom field to the checkout page */ add_action('woocommerce_after_order_notes', 'custom_checkout_field'); function custom_checkout_field($checkout) { echo '<div><h2>' . __('New Heading') . '</h2>'; woocommerce_form_field('custom_field_name', array( 'type' => 'text', 'class' => array( 'my-field-class form-row-wide' ) , 'label' => __('Custom Additional Field') , 'placeholder' => __('New Custom Field') , ) , $checkout->get_value('custom_field_name')); echo '</div>'; }

Nach dem Hinzufügen dieses Codes sollte die Checkout-Seite wie folgt aussehen:

Für die Datenvalidierung des benutzerdefinierten Felds können Sie den unten angegebenen Code verwenden:

 /** * Checkout Process */ add_action('woocommerce_checkout_process', 'customised_checkout_field_process'); function customised_checkout_field_process() { // Show an error message if the field is not set. if (!$_POST['customised_field_name']) wc_add_notice(__('Please enter value!') , 'error'); }

Deshalb haben wir zusammen mit der Validierungsprüfung ein Ersatzfeld zur Checkout-Seite hinzugefügt! Großartig!
Lassen Sie uns bestätigen, dass die vom Kunden in das benutzerdefinierte Feld eingegebenen Daten gespeichert werden oder nicht.

Dies kann mit dem folgenden Code erfolgen:

 /** * Update the value given in custom field */ add_action('woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta'); function custom_checkout_field_update_order_meta($order_id) { if (!empty($_POST['customised_field_name'])) { update_post_meta($order_id, 'Some Field',sanitize_text_field($_POST['customised_field_name'])); } }

Fügen Sie mithilfe eines Plugins ein benutzerdefiniertes Feld zur WooCommerce-Checkout-Seite hinzu

Mit den obigen Codezeilen haben wir benutzerdefinierte Felder zu unserem WooCommerce-Webshop hinzugefügt!

Wenn Sie kein Programmierer sind, können Sie auch ein Plugin verwenden, um der Checkout-Seite ein neues Feld hinzuzufügen. Es gibt viele Plugins, die für diesen Zweck verwendet werden können. Einige sind wie folgt:

• WooCommerce Checkout Manager
• Checkout-Feldeditor
• Checkout-Feld-Editor und Manager für WooCommerce

Durch die Verwendung dieser Plugins kann jeder ohne Programmierkenntnisse zusätzliche benutzerdefinierte Felder zur WooCommerce-Checkout-Seite hinzufügen. Sehen wir uns an, wie man mit dem Checkout Field Editor und Manager für WooCommerce ein Feld hinzufügt.

Einfach das Plugin installieren und aktivieren. Unter WooCommerce finden Sie ein neues Menü mit dem Namen „Checkout-Felder“. Navigieren Sie zu WP Admin Dashboard > WooCommerce > Checkout Fields .

Auf der linken Seite finden Sie unter der Option „Felder“ 6 verschiedene Feldtypen. Je nachdem, welchen Feldtyp Sie hinzufügen möchten, wählen Sie diesen entsprechend aus. Wir möchten ein Feld für die Telefonnummer hinzufügen und wählen daher „Text“ aus. Wir ziehen einfach die Schaltfläche „Text“ unter die Namensfelder.

Beim Hinzufügen neuer Felder ist uns aufgefallen, dass wir das Feld zu einem Pflichtfeld gemacht haben. Sie können sich dafür entscheiden, dies nicht zu tun, wenn Sie nicht möchten, dass das Feld ein Pflichtfeld ist.

Auf die gleiche Weise können Sie jede Art von Feld hinzufügen, die dieses Plugin bietet.

Das neue Feld wurde Ihrer Checkout-Seite hinzugefügt. Einfach richtig?

Felder zur WooCommerce-Kaufabwicklung hinzufügen – Endbemerkung

Von nun an wissen Sie, wie Sie ein zusätzliches WooCommerce-Checkout-Feld hinzufügen, und es ist gar nicht so schwer.

Was auch immer der Grund sein mag – eine obligatorische Kundenanfrage oder Ihre eigenen Bedürfnisse – Sie können jetzt die WooCommerce-Checkout-Seite anpassen!

Wenn Sie Fragen haben, zögern Sie nicht, einen Kommentar abzugeben. Wir versprechen, dass wir uns bei Ihnen melden werden.