WooCommerce. Benutzerdefinierte Felder im Checkout erstellen

Wenn Sie WooCommerce installieren, wird standardmäßig bereits eine Checkout-Seite mit einer Reihe von Feldern erstellt, die für die meisten Benutzer geeignet sind. Abhängig von Ihren Besonderheiten kann sich Ihr Geschäft jedoch auf eine bestimmte Zielgruppe konzentrieren. Sie können zum Beispiel Autoreifen oder Waren für Kinder verkaufen. Wenn Sie also eine Bestellung aufgeben, benötigen Sie als Eigentümer oder Administrator des Online-Shops möglicherweise zusätzliche Informationen von Ihren Kunden.

Dementsprechend wird in diesem Fall ein zusätzliches Feld benötigt, in dem der Käufer neben den Basisinformationen beispielsweise sein Geburtsdatum oder zusätzliche Wünsche angibt. In diesem Artikel zeige ich Ihnen, wie Sie solche zusätzlichen Felder zur Kasse hinzufügen. Dies kann auf zwei Arten erfolgen. Die erste Möglichkeit besteht darin, die Datei functions.php durch Hinzufügen von Code zu bearbeiten. Der zweite Weg ist mit einem Plugin.

Hinzufügen von benutzerdefinierten Feldern zum Checkout mithilfe von Code

Rufen Sie zunächst die WooCommerce-Website im Abschnitt Dokumentation auf. Als nächstes finden wir eine Seite mit einer Beschreibung der Felder im Bestellprozess.

Es enthält alle Informationen zu den verfügbaren Feldern und wie sie geändert werden können. Im Folgenden zeige ich Ihnen, wie Sie ein benutzerdefiniertes Feld nach der Bestellnotiz hinzufügen.

Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei functions.php Ihres Themes ein.

/**
 * Add the field to the checkout
 */
add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );

function my_custom_checkout_field( $checkout ) {

    echo '<div id="my_custom_checkout_field"><h2>' . __('My Field') . '</h2>';

    woocommerce_form_field( 'my_field_name', array(
        'type'          => 'text',
        'class'         => array('my-field-class form-row-wide'),
        'label'         => __('Fill in this field'),
        'placeholder'   => __('Enter something'),
        ), $checkout->get_value( 'my_field_name' ));

    echo '</div>';

}

Danach erscheint auf der Checkout-Seite ein neues Feld namens My Field. Sein Name, sowie das Label und der Platzhalter können in diesem Code auf Ihren eigenen geändert werden.

Um ein Feld zu validieren und den Benutzer zu benachrichtigen, das Feld auszufüllen, können Sie den folgenden Code hinzufügen:

/**
 * Process the checkout
 */
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name'] )
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}

Infolgedessen erscheint eine Fehlermeldung mit folgendem Inhalt „Please enter something into this new shiny field.“ Wenn dieses Feld nicht ausgefüllt ist.

Um den Wert dieses Felds in der Bestellung zu speichern, fügen Sie den folgenden Code hinzu:

/**
 * Update the order meta with field value
 */
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name'] ) ) {
        update_post_meta( $order_id, 'My Field', sanitize_text_field( $_POST['my_field_name'] ) );
    }
}

Nun werden die in diesem Feld eingegebenen Daten in der Bestellung angezeigt. Und um die Daten beim Bearbeiten der Bestellung verfügbar zu machen, fügen Sie den folgenden Code hinzu:

/**
 * Display field value on the order edit page
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('My Field').':</strong> ' . get_post_meta( $order->id, 'My Field', true ) . '</p>';
}

Checkout-Felder mit einem Plugin hinzufügen

Die erste Methode ist gut für diejenigen, die es vorziehen, die Anzahl der installierten Plugins zu minimieren und die Website mit Code zu verbessern. Für diejenigen, die keine Kenntnisse über den Code haben und neue Funktionen lieber über Plugins implementieren, eignet sich das entsprechende Plugin. Es gibt einige Plugins zum Bearbeiten von Feldern im Checkout. Ich bevorzuge ein Plugin namens Checkout Field Editor for WooCommerce. Installieren Sie es, und Sie können Bestellfelder hinzufügen, entfernen und bearbeiten.