WooCommerce: Checkbox im Checkout einfügen

In diesem Artikel lernst du, wie du ein Checkbox-Feld in WooCommerce einfügen kannst, z. B. um einen Benutzer einwilligen zu lassen, dass seine persönlichen Daten an den Versanddienstleister übermittelt werden. Die Umsetzung mit dieser Anleitung ist einfach und dauert nur wenige Minuten!

Checkbox als Formular-Feld anlegen

Als erstes muss eine Checkbox für die Kassenseite angelegt werden. Füge dazu den folgenden Code in die functions.php deines Child Themes oder mittels des Code Snippets Plugins ein - in dem Beispiel nennen wir das neue Checkbox-Feld checkout_checkbox:

add_action( 'woocommerce_review_order_before_submit', 'bt_add_checkout_checkbox', 10 );
/**
 * WooCommerce zusätzliches Checkbox-Kassenfeld hinzufügen
 */
function bt_add_checkout_checkbox() {
   
    woocommerce_form_field( 'checkout_checkbox', array( // CSS ID
       'type'          => 'checkbox',
       'class'         => array('form-row mycheckbox'), // CSS Klasse
       '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, // Pflichtfeld oder Optional
       'label'         => 'Ich damit einverstanden, dass meine persönlichen Daten an den <a href="/versandbedingungen" target="_blank" rel="noopener">Versanddienstleister</a> übermittelt werden. Checkout Checkbox Page', // Label und ggf. Link
    ));    
}

add_action( 'woocommerce_checkout_process', 'bt_add_checkout_checkbox_warning' );
/**
 * Error, falls checkbox Pflichtfeld und nicht gecheckt
 */ 
function bt_add_checkout_checkbox_warning() {
    if ( ! (int) isset( $_POST['checkout_checkbox'] ) ) {
        wc_add_notice( __( 'Die Checkbox ist ein Pflichtfeld' ), 'error' );
    }
}

Wenn du die Checkbox nicht als Pflichtfeld sondern als optional markieren möchtest, fällt der zweite Codeblock weg. Ändere in dem Fall den required Wert im ersten Codeblock auf false.

Du solltest auch die CSS ID (checkout-checkbox) sinnvoll für dein Vorhaben benennen. Wenn du möchtest, kannst du auch weitere CSS Klassen hinzuzufügen. Zuletzt änderst du den Inhalt des Labels. Hier trägst du den Text ein, der neben der Checkbox auftauchen soll. Du kannst auch HTML-Tags verwenden und so z. B. Links einfügen.

Wenn du die Checkbox als Pflichtfeld setzt, solltest du noch die Error-Nachricht im zweiten Codeblock anpassen. Diese wird angezeigt, wenn die Pflicht-Checkbox nicht angewählt wurde.

Styling der Checkbox

Mit ein wenig CSS im Customizer kannst du die Checkbox so gestalten, wie du möchtest. Hier ein Beispiel, um den Style der Checkbox bei fehlgeschlagener Validierung anzupassen. Die Checkbox erhält eine rote Box, wenn sie z. B. ein Pflichtfeld ist, jedoch nicht angeklickt wurde. Verwende die oben vergebene CSS ID, um die Checkbox weiter nach deinem Bedarf zu stylen. Denk dran, dass der CSS-Code nicht in die functions.php gehört, sondern z.B. in die style.css deines Child Themes.

.woocommerce-invalid #checkout-checkbox {
    outline: 2px solid red;
    outline-offset: 2px;
}

Checkbox als Bestell-Meta-Info zur Datenbank hinzufügen

Bis jetzt wird die Checkbox nur auf dem Bildschirm angezeigt. Mit den folgenden Schritten sorgst du dafür, dass der Wert der Checkbox in der Datenbank gespeichert wird und somit zur Abfrage verfügbar ist. Dadurch kannst du im Dashboard und in E-Mails anzeigen lassen, ob die Checkbox angeklickt wurde.

Das Feld und den Wert zur WordPress Datenbank hinzuzufügen

Dazu verwendest du folgenden Code:

add_action( 'woocommerce_checkout_update_order_meta', 'bt_checkout_field_order_meta_db' );
/**
 * Benutzerdefiniertes Feld als Bestell-Meta mit Wert zur Datenbank hinzufügen
 */
function bt_checkout_field_order_meta_db( $order_id ) {
    if ( ! empty( $_POST['checkout_checkbox'] ) ) {
        update_post_meta( $order_id, 'checkout_checkbox', sanitize_text_field( $_POST['checkout_checkbox'] ) );
    }
}

Das Feld und das Label in der WooCommerce-Bestellung im Backend anzeigen

Das erreichst du mit diesem Code:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'bt_checkout_field_display_admin_order_meta', 10, 1 );
/**
 * Feldwert in der WooCommerce-Bestellübersicht anzeigen
 */
function bt_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Checkout Checkbox Label').':</strong> ' . get_post_meta( $order->get_id(), 'checkout_checkbox', true ) . '<p>'; 
}

Benutzerdefiniertes Feld zu WooCommerce-E-Mails hinzufügen

Damit das Feld auch in den E-Mails auftaucht, wird weiterer Code benötigt:

add_filter('woocommerce_email_order_meta_keys', 'bt_custom_order_meta_email');

function bt_custom_order_meta_email( $keys ) {
     $keys[] = 'checkout_checkbox'; // Dies wird nach einem benutzerdefinierten Feld namens 'checkout_checkbox' suchen und es zu den WooCommerce E-Mails hinzufügen
     return $keys;
}

Der obige Code wird die Checkbox mit der zuvor gewählten Beschriftung einfügen, wie auch im Checkout. Wenn du möchtest, kannst du stattdessen ein beliebiges Label und Text verwenden. Dazu nutzt du den Filter woocommerce_email_order_meta_fields:

add_filter( 'woocommerce_email_order_meta_fields', 'bt_woocommerce_email_order_meta_fields', 10, 3 );
/**
 * Hinzufügen eines benutzerdefinierten Feldes zu den Emails mit Text und Beschriftung
 */

function bt_woocommerce_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    
    $checkbox = get_post_meta( $order->get_id(), 'checkout_checkbox', true );
    
    if( $checkbox == 1 ) {
        $fields['checkout_checkbox'] = array(
            'label' => __( 'Daten an Versanddienstleister übermitteln' ),
            'value' => __( 'Daten sollen übermittelt werden' ),
        );
        return $fields;
    }
    else {
        $fields['checkout_checkbox'] = array(
            'label' => __( 'Daten an Versanddienstleister übermitteln' ),
            'value' => __( 'Daten sollen nicht übermittelt werden' ),
        );
        return $fields;
    }
}

Wir weisen also unser benutzerdefiniertes Feld einer Variablen $checkbox zu und wenn diese Variable angekreuzt ist (Wert entspricht 1), wird sie den entsprechenden Wert ausgeben: “Daten sollen übermittelt werden”. Wenn die Checkbox nicht angekreuzt ist, wird die Variable “Daten sollen nicht übermittelt werden” ausgeben.

Zusammenfassung WooCommerce Checkbox einfügen

Hoffentlich findest du diesen Artikel hilfreich. Hier eine Zusammenfassung des Inhalts:

• Manchmal benötigt man für seine digitale Kasse weitere Checkboxen, z. B. für die Datenübermittlung an Versanddienstleister oder die Newsletter-Einwilligung.
• Dies kann man ohne Plugins mit wenig Code selbst umsetzen
• Zunächst wird die gewünschte Checkbox als Formular-Element im Checkout angelegt und bei Bedarf per CSS angepasst
• Im zweiten Schritt wird der Inhalt der Checkbox als Variable angelegt und ihr Inhalt in der Datenbank gespeichert
• Zuletzt wird diese Variable z. B. bei den Bestellinformationen angezeigt oder in den Mails abgefragt

Falls etwas unklar ist, Du Fragen hast oder einfach Deine Erfahrungen teilen möchtest, freue ich mich über Deinen Kommentar. Lass mich wissen, falls es ein ähnliches oder anderes Thema gibt, zu dem Du gerne mehr erfahren würdest.

Viel Spaß bei der Checkout-Individualisierung!