WooCommerce für WordPress erlaubt es, auf relativ einfache Weise einen eigenen Online-Shop zu erstellen und zu betreiben. Doch die Standard-Funktionen von WooCommerce sind relativ beschränkt und vieles muss über zusätzliche Plugins oder Code-Anpassungen realisiert werden. Dies macht das WooCommerce System nicht nur anfälliger für Fehlverhalten und Sicherheitslücken, sondern kann sogar den ganzen E-Commerce auftritt langsamer und komplizierter machen.

Nichtsdestotrotz sind manche Funktionen notwendig, um beispielsweise gesetzliche oder logistische Anforderungen im eigenen Online-Shop zu realisieren. Aus diesem Grund zeigen wir dir in diesem Hilfeartikel wie Du Deine WooCommerce Funktion um zusätzliche Felder auf der Checkout-Seite ergänzen kannst.

Warum sind zusätzliche Felder auf der Checkout-Seite notwendig?

Bevor Du jetzt eine Code-Anpassung vornimmst oder ein zusätzliches Plugin installierst, solltest Du natürlich den Bedarf an zusätzlichen Feldern bei Deinem eigenen Online-Shop haben. Welche Anforderungen könnten das beispielsweise sein?

• Du möchtest eine zusätzliche Information bei Deinem Kunden abfragen, wie z.B. ein weiteres Telefonfeld für den Paketdienst oder einen Hinweis, wo man das Paket ablegen darf
• Du benötigst ein Einverständnis, wie z.B. ob Du auf die E-Mail-Adresse auch ein Warenkorb-Reminder oder Newsletter oder Rabatt-Aktionen übermitteln darfst
• Du möchtest eine Checkbox hinterlegen, die den Kunden nochmals explizit fragt, ob er beispielsweise volljährig ist (bei alkoholischen Produkten sehr sinnvoll)

Du siehst, der Bedarf an zusätzlichen Feldern auf Deiner Checkout-Seite in Deinem eigenen Online-Shop ist gegeben und kann je nach Portfolio ein oder mehrere Felder umfassen.

Wie kann ich eine zusätzliche Checkbox bei WooCommerce einbauen?

Verpflichtende Checkbox im Checkout einbauen

Um eine verpflichtende Checkbox in Deinem Checkout unter WooCOmmerce hinzuzufügen, die vom Benutzer ausgewählt werden muss, kannst Du folgenden Code zu Deiner functions.php-Datei im Theme oder einem Custom Plugin hinzufügen:

// Verpflichtende Checkbox im Checkout unter WooCommerce
add_action('woocommerce_review_order_before_submit', 'add_mandatory_checkbox_to_checkout', 10);
function add_mandatory_checkbox_to_checkout() {
    echo '<div class="form-row form-row-wide">';
    woocommerce_form_field('mandatory_checkbox', array(
        'type'          => 'checkbox',
        'class'         => array('input-checkbox'),
        'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'required'      => true, // Macht die Checkbox verpflichtend
        'label'         => __('Hier kommt dein Text der angezeigt wird'),
    ), WC()->checkout->get_value('mandatory_checkbox'));
    echo '</div>';
}

// Prüfung ob die Checkbox vom Benutzer aktiviert wurde
add_action('woocommerce_checkout_process', 'mandatory_checkbox_validation');
function mandatory_checkbox_validation() {
    if (!isset($_POST['mandatory_checkbox']))
        wc_add_notice(__('Bitte akzeptiere die Bedingungen.'), 'error');
}

Freiwillige Checkbox im Checkout einbauen

Für eine freiwillige Checkbox kannst du diese ähnliche Codeblock verwenden:

// Freiwillige Checkbox im Checkout unter WooCommerce
add_action('woocommerce_review_order_before_submit', 'add_optional_checkbox_to_checkout', 10);
function add_optional_checkbox_to_checkout() {
    echo '<div class="form-row form-row-wide">';
    woocommerce_form_field('optional_checkbox', array(
        'type'          => 'checkbox',
        'class'         => array('input-checkbox'),
        'label_class'   => array('woocommerce-form__label woocommerce-form__label-for-checkbox checkbox'),
        'input_class'   => array('woocommerce-form__input woocommerce-form__input-checkbox input-checkbox'),
        'label'         => __('Hier kommt dein Text der angezeigt wird'),
    ), WC()->checkout->get_value('optional_checkbox'));
    echo '</div>';
}

Wie kann ich ein zusätzliches Textfeld bei WooCommerce einbauen?

Um ein verpflichtendes und ein freiwilliges Textfeld hinzuzufügen, müssen wir ein benutzerdefiniertes Plugin erstellen oder den Code in die Datei functions.php Deines aktiven WordPress-Themes einfügen. Hier ist ein Beispielcode, um ein verpflichtendes und ein freiwilliges Textfeld hinzuzufügen:

// Funktion zum Hinzufügen des verpflichtenden Textfeldes
add_action( 'woocommerce_after_order_notes', 'custom_checkout_field_required' );
function custom_checkout_field_required( $checkout ) {
    echo '<div id="custom_checkout_field_required"><h2>' . __('Benötigtes Feld') . '</h2>';
    woocommerce_form_field( 'custom_field_required', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'label'         => __('Benötigtes Feld'),
        'placeholder'   => __('Hier kommt dein Text der angezeigt wird'),
        'required'      => true, // Hier setzen wir es als verpflichtend
    ), $checkout->get_value( 'custom_field_required' ) );
    echo '</div>';
}

// Funktion zum Hinzufügen des freiwilligen Textfeldes
add_action( 'woocommerce_after_order_notes', 'custom_checkout_field_optional' );
function custom_checkout_field_optional( $checkout ) {
    echo '<div id="custom_checkout_field_optional"><h2>' . __('Optionales Feld') . '</h2>';
    woocommerce_form_field( 'custom_field_optional', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'label'         => __('Optionales Feld'),
        'placeholder'   => __('Hier kommt dein Text der angezeigt wird'),
        'required'      => false, // Hier ist es nicht verpflichtend
    ), $checkout->get_value( 'custom_field_optional' ) );
    echo '</div>';
}

// Funktion zum Speichern der Werte des benutzerdefinierten Feldes
add_action('woocommerce_checkout_update_order_meta', 'save_custom_checkout_field_values');
function save_custom_checkout_field_values( $order_id ) {
    if ( ! empty( $_POST['custom_field_required'] ) ) {
        update_post_meta( $order_id, 'Benötigtes Feld', sanitize_text_field( $_POST['custom_field_required'] ) );
    }
    if ( ! empty( $_POST['custom_field_optional'] ) ) {
        update_post_meta( $order_id, 'Optionales Feld', sanitize_text_field( $_POST['custom_field_optional'] ) );
    }
}

Checkout Field Manager (Checkout Manager) for WooCommerce

Viel einfacher und auch sicherer geht das alles mit dem WordPress Plugin Checkout Field Manager (Checkout Manager) for WooCommerce. Dieses Plugin ist sogar kostenlos (für die meisten Funktionen) und bedarf nur bei komplexen Feldern eine Pro-Version. Mit diesem WordPress Plugin kannst Du auf einfache Weise jedes beliebige Feld in Deinem Checkout-Prozess verankern und einfügen.

Eine entsprechende Dokumentation, sowie Screenshots zum Layout des Plugins findest Du unter Checkout Field Manager (Checkout Manager) for WooCommerce