Champs personnalisés pour woocommerce (Siret, CGV)

Comment ajouter un checkbox de validation des CGV à Woocommerce

Comme vous tous qui venez de débarquer sur ce post, je trouve cela hallucinant que Woocommerce ne propose pas la validation des conditions générales de ventes d'un site ecommerce.

Vous devrez le coder vous-même, mais pas de panique, on est là pour vous aider !

Afin d'être complet sur les besoins de chacun, nous allons traiter dans ce tuto l'ajout du checkbox des CGV mais également l'ajout d'un champ texte permettant par exemple à l'e-commerçant de demander à son client pro son numéro Siret, afin de justifier qu'il est bien une entreprise.

Nous verrons également la manière d'insérer un select dans le processus de commande pour ceux d'entre vous qui auraient besoin d'un select plutôt que d'un input ou d'un checkbox.

Le checkbox pour cocher les conditions générales de ventes

On demande le numéro Siret et la validation des CGV pour valider la commande

On crée d'abord l'élément du formulaire :

add_action( 'woocommerce_review_order_before_submit', 'bbloomer_add_checkout_privacy_policy', 9 );
function bbloomer_add_checkout_privacy_policy() {
    woocommerce_form_field( 'validCGV', array(
        'type'     => 'checkbox',
        'class'    => array( 'input-checkbox' ),
        'label'    => __( 'J\'ai lu et j\'accepte les conditions générales de vente' ),
        'required' => true,
    ) );
    // ici on présente un lien menant aux CGV
    echo '<a href="' . esc_url( wc_get_page_permalink( 'terms' ) ) . '" target="_blank" rel="noopener">Voir les conditions générales de vente</a>';
}

Nous allons ensuite le rendre obligatoire pour la validation de la commande :

// Alerte si la case n'est pas cochée à l'envoi du formulaire
add_action( 'woocommerce_checkout_process', 'bbloomer_not_approved_privacy' );
function bbloomer_not_approved_privacy() {
    if ( ! (int) isset( $_POST['validCGV'] ) ) {
        wc_add_notice( __( 'Merci de valider les conditions générales de vente.' ), 'error' );
    }
}

Et voilà le travail !

Dans ce cas aucune information n'a besoin d'être insérée en base de données ni retranscrite sur l'espace de commande de woocommerce.

Création d'un champ personnalisé pour le numéro Siret dans le process de commande woocommerce

On crée d'abord le champ de texte dans le formulaire :

add_action( 'woocommerce_after_order_notes', 'my_custom_checkout_field' );
function my_custom_checkout_field( $checkout ) {
    echo '<div id="my_custom_checkout_field"><h3>' . __( 'information entreprise' ) . '</h3>';
    woocommerce_form_field( 'siretField', array(
        'type'        => 'text',
        'class'       => array( 'my-field-class form-row-wide' ),
        'label'       => __( 'Numéro de Siret' ),
        'placeholder' => __( 'siret' ),
    ), $checkout->get_value( 'siretField' ) );
    echo '</div>';
}

Nous allons ensuite le rendre obligatoire pour la validation de la commande :

add_action( 'woocommerce_checkout_process', 'my_custom_checkout_field_process' );
function my_custom_checkout_field_process() {
    if ( empty( $_POST['siretField'] ) ) {
        wc_add_notice( __( 'Merci de renseigner votre numéro de Siret.' ), 'error' );
    }
}

On enregistre la valeur en base de données pour pouvoir l'afficher dans l'espace de commande de notre ecommerce :

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['siretField'] ) ) {
        update_post_meta( $order_id, 'Siret', sanitize_text_field( $_POST['siretField'] ) );
    }
}

Et enfin on va chercher la valeur insérée en base de données pour pouvoir l'afficher comme ceci dans le détail de la commande de woocommerce :

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>' . __( 'Siret' ) . ':</strong> ' . esc_html( get_post_meta( $order->get_id(), 'Siret', true ) ) . '</p>';
}

Le numéro de siret affiché dans la commande dans l'admin

Pour insérer un select au formulaire de commande de woocommerce

Il vous suffira de remplacer, dans la première étape, le code d'insertion du champ de texte par celui du select ci-dessous :

woocommerce_form_field( 'fieldx', array(
    'type'    => 'select',
    'class'   => array( 'wps-drop' ),
    'label'   => __( 'Choisissez …' ),
    'options' => array(
        'opt1' => __( 'opt1', 'wps' ),
        'opt2' => __( 'opt2', 'wps' ),
    ),
), $checkout->get_value( 'fieldx' ) );

Voilà, vous êtes en mesure d'ajouter des champs supplémentaires au processus de commande de woocommerce, ou encore de changer la place du prix.