WooCommerce: Benutzerdefinierte Checkboxen erstellen und im Backend anzeigen

Einleitung

Benutzerdefinierte Checkboxen sind eine hervorragende Möglichkeit, zusätzliche Bestätigungen von Kunden im WooCommerce-Checkout einzufordern. Ob Sie eine rechtliche Bestätigung benötigen oder spezielle Anforderungen haben – Checkboxen bieten eine einfache Lösung. In dieser Anleitung zeigen wir Ihnen Schritt für Schritt, wie Sie benutzerdefinierte Checkboxen im WooCommerce-Checkout hinzufügen und die Auswahl im Backend anzeigen können.

1. Erstellen der Checkbox-Funktion

Wir beginnen mit einer wiederverwendbaren Funktion, um Checkboxen dynamisch hinzuzufügen. Diese Funktion wird später für verschiedene Checkboxen genutzt:

<?php
/**
 * Fügt eine benutzerdefinierte Checkbox im WooCommerce-Checkout hinzu.
 *
 * @param string $id - Die ID der Checkbox.
 * @param string $label - Das Label für die Checkbox.
 */
function add_custom_checkout_checkbox( $id, $label ) {
    woocommerce_form_field( $id, array(
        'type'          => 'checkbox',
        'class'         => array('form-row mycheckbox'),
        '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,
        'label'         => $label,
    ));
}
?>

2. Hinzufügen der Checkboxen im Checkout

Jetzt fügen wir die Checkboxen zur Bestellübersicht hinzu. Dafür verwenden wir die zuvor erstellte Funktion:

<?php
add_action( 'woocommerce_review_order_before_submit', 'add_checkboxes_to_checkout', 10 );
function add_checkboxes_to_checkout() {
    // Beispiel-Checkbox 1: Bestätigung der Daten
    add_custom_checkout_checkbox(
        'checkout_checkbox_confirm', 
        'Ich habe alle meine Daten überprüft und stimme zu. Lorem ipsum dolor sit amet.'
    );

    // Beispiel-Checkbox 2: Zustimmung zu Bedingungen
    add_custom_checkout_checkbox(
        'checkout_checkbox_terms', 
        'Ich stimme den allgemeinen Geschäftsbedingungen zu. Lorem ipsum dolor sit amet.'
    );
}
?>

3. Validierung der Checkboxen

Damit die Checkboxen korrekt überprüft werden, fügen wir eine Validierungsfunktion hinzu. Diese Funktion stellt sicher, dass der Kunde die Checkboxen aktiviert hat:

<?php
add_action( 'woocommerce_checkout_process', 'validate_custom_checkout_checkboxes' );
function validate_custom_checkout_checkboxes() {
    if ( ! isset( $_POST['checkout_checkbox_confirm'] ) ) {
        wc_add_notice( __( 'Bitte bestätigen Sie, dass alle Ihre Daten korrekt sind.' ), 'error' );
    }
    
    if ( ! isset( $_POST['checkout_checkbox_terms'] ) ) {
        wc_add_notice( __( 'Bitte stimmen Sie den allgemeinen Geschäftsbedingungen zu.' ), 'error' );
    }
}
?>

4. Speichern der Checkbox-Werte in der Bestellung

Wir speichern die Auswahl der Checkboxen in den Bestell-Metadaten, um sie später im WooCommerce-Adminbereich anzuzeigen:

<?php
add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_checkbox_values' );
function save_custom_checkout_checkbox_values( $order_id ) {
    if ( ! empty( $_POST['checkout_checkbox_confirm'] ) ) {
        update_post_meta( $order_id, 'checkout_checkbox_confirm', sanitize_text_field( $_POST['checkout_checkbox_confirm'] ) );
    }
    
    if ( ! empty( $_POST['checkout_checkbox_terms'] ) ) {
        update_post_meta( $order_id, 'checkout_checkbox_terms', sanitize_text_field( $_POST['checkout_checkbox_terms'] ) );
    }
}
?>

5. Anzeige der Checkbox-Werte im WooCommerce-Adminbereich

Schließlich zeigen wir die Auswahl der Checkboxen im Backend an. Hier ist der Code:

<?php
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_checkbox_values_in_admin', 10, 1 );
function display_custom_checkout_checkbox_values_in_admin( $order ) {
    if ( get_post_meta( $order->get_id(), 'checkout_checkbox_confirm', true ) ) {
        echo '<p><strong>Datenbestätigung:</strong> Checked</p>';
    }

    if ( get_post_meta( $order->get_id(), 'checkout_checkbox_terms', true ) ) {
        echo '<p><strong>Zustimmung zu den AGB:</strong> Checked</p>';
    }
}
?>

Fazit

Mit diesen Schritten haben wir benutzerdefinierte Checkboxen im WooCommerce-Checkout erstellt und die Auswahl erfolgreich im Backend angezeigt. Diese Lösung ist ideal, um sicherzustellen, dass Kunden wichtige Informationen bestätigen, bevor sie eine Bestellung abschließen. Durch die Verwendung wiederverwendbarer Funktionen bleibt der Code sauber und leicht wartbar.