# Ajouter des champs de commande personnalisés au tunnel d’achat WooCommerce

> Un fabricant de mobilier sur mesure a besoin de récupérer une information métier au paiement. Voici comment ajouter un champ personnalisé au tunnel de commande et le sauvegarder proprement.

- Auteur : Clément Hadrot
- Publié le : 2021-01-21
- Mis à jour le : 2021-01-21
- Catégorie : E-commerce
- URL : https://wpmoderne.dev.wordpress-developpement.fr/ecommerce/ajouter-champs-commande-personnalises-tunnel-achat-woocommerce/

## L’essentiel

- Le filtre woocommerce_checkout_fields cible précisément l'emplacement voulu
- La sauvegarde en meta suit le cycle de vie normal de WC_Order
- Le champ doit apparaître partout où la commande est consultée

Un fabricant de mobilier sur mesure vend ses pièces via WooCommerce, mais a besoin d'une information que ni l'adresse de livraison ni les champs standards ne couvrent : la date souhaitée de livraison, contrainte par ses délais d'atelier. Sans ce champ, l'information circule par e-mail après coup, avec le risque classique de la perdre ou de l'oublier dans le suivi de production.

Ce tutoriel montre comment ajouter un champ personnalisé au tunnel de commande WooCommerce et le sauvegarder en meta de commande, de façon à ce qu'il apparaisse aussi bien dans l'e-mail de confirmation que dans l'administration. Il ne traite pas la validation fiscale de ce type de champ, un sujet propre à d'autres cas d'usage comme un numéro de TVA intracommunautaire.

## Étape 1 : choisir le bon emplacement du champ

WooCommerce structure la page de paiement en plusieurs groupes de champs, chacun modifiable via le filtre `woocommerce_checkout_fields` : `billing`, `shipping` et `order`, ce dernier groupe étant réservé aux informations qui ne rentrent ni dans la facturation ni dans la livraison, comme une note de commande ou, ici, une date souhaitée.

```
add_filter( 'woocommerce_checkout_fields', 'atelier_ajouter_champ_date_livraison' );

function atelier_ajouter_champ_date_livraison( $fields ) {
    $fields['order']['date_livraison_souhaitee'] = array(
        'type'        => 'date',
        'label'       => __( 'Date de livraison souhaitée', 'atelier' ),
        'placeholder' => '',
        'required'    => false,
        'class'       => array( 'form-row-wide' ),
        'priority'    => 120,
    );

    return $fields;
}
```

## Étape 2 : afficher le champ au bon endroit du gabarit

> L'essentiel à retenir : Le filtre woocommerce_checkout_fields cible précisément l'emplacement voulu ; La sauvegarde en meta suit le cycle de vie normal de WC_Order ; Le champ doit apparaître partout où la commande est consultée

Pour un champ de type `order`, WooCommerce ne l'affiche pas automatiquement sur la page de paiement : il faut l'insérer explicitement dans le gabarit via un hook. L'emplacement classique se situe juste après la note de commande, grâce à `woocommerce_after_order_notes` :

```
add_action( 'woocommerce_after_order_notes', 'atelier_afficher_champ_date_livraison' );

function atelier_afficher_champ_date_livraison( $checkout ) {
    echo '';

    woocommerce_form_field(
        'date_livraison_souhaitee',
        array(
            'type'        => 'date',
            'class'       => array( 'form-row-wide' ),
            'label'       => __( 'Date de livraison souhaitée', 'atelier' ),
            'required'    => false,
        ),
        $checkout->get_value( 'date_livraison_souhaitee' )
    );

    echo '';
}
```

## Étape 3 : valider la saisie avant validation de commande

Une contrainte métier simple — refuser une date antérieure au délai minimal de fabrication — se vérifie avec le hook `woocommerce_checkout_process` :

```
add_action( 'woocommerce_checkout_process', 'atelier_valider_date_livraison' );

function atelier_valider_date_livraison() {
    if ( empty( $_POST['date_livraison_souhaitee'] ) ) {
        return;
    }

    $date_choisie = sanitize_text_field( wp_unslash( $_POST['date_livraison_souhaitee'] ) );
    $delai_minimum = strtotime( '+21 days' );

    if ( strtotime( $date_choisie ) < $delai_minimum ) {
        wc_add_notice(
            __( 'La date de livraison doit être choisie au moins 3 semaines après la commande, le temps de fabrication en atelier.', 'atelier' ),
            'error'
        );
    }
}
```

## Étape 4 : sauvegarder la valeur en meta de commande

La sauvegarde suit le cycle normal des métadonnées de `WC_Order`, via le hook `woocommerce_checkout_update_order_meta`, déclenché juste après la création de la commande :

```
add_action( 'woocommerce_checkout_update_order_meta', 'atelier_sauvegarder_date_livraison' );

function atelier_sauvegarder_date_livraison( $order_id ) {
    if ( empty( $_POST['date_livraison_souhaitee'] ) ) {
        return;
    }

    $order = wc_get_order( $order_id );
    $order->update_meta_data(
        '_date_livraison_souhaitee',
        sanitize_text_field( wp_unslash( $_POST['date_livraison_souhaitee'] ) )
    );
    $order->save();
}
```

## Étape 5 : afficher la valeur là où elle sert vraiment

Un champ sauvegardé mais invisible ailleurs ne sert à rien à l'atelier de production. Trois emplacements méritent l'affichage de cette information :

- L'écran d'édition de commande en back-office, via `woocommerce_admin_order_data_after_shipping_address`.
- L'e-mail de confirmation envoyé au client, via `woocommerce_email_after_order_table`.
- La page « Mes commandes » du compte client, pour que le client retrouve lui-même la date choisie.

```
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'atelier_afficher_date_admin' );

function atelier_afficher_date_admin( $order ) {
    $date = $order->get_meta( '_date_livraison_souhaitee' );

    if ( $date ) {
        echo '' . esc_html__( 'Date de livraison souhaitée', 'atelier' ) . ' : ' . esc_html( $date ) . '';
    }
}
```

> Un piège fréquent sur ce genre de champ : oublier de l'afficher dans l'e-mail de confirmation. Le client, lui, considère souvent l'e-mail comme la preuve écrite de ce qu'il a demandé, bien plus que la page de remerciement affichée une seule fois dans le navigateur.

## Variante : rendre le champ obligatoire selon le contenu du panier

Certains articles du catalogue de l'atelier, comme les pièces prêtes à expédier, n'ont pas besoin de ce champ. Il est possible de conditionner son affichage et son obligation au contenu réel du panier, en vérifiant la présence d'une catégorie de produit spécifique avant d'afficher le champ, plutôt que de l'imposer uniformément à toutes les commandes.

## En résumé

Ajouter un champ personnalisé au tunnel de commande WooCommerce demande de couvrir tout le cycle de vie de l'information : sa saisie, sa validation, sa sauvegarde en meta et surtout son affichage à chaque endroit où une personne — client, service administratif, atelier de production — en a réellement besoin. Négliger l'un de ces emplacements revient à collecter une donnée qui finit par se perdre exactement comme avant, simplement un peu plus tard dans le processus.