# Ajouter un onglet personnalisé au produit avec woocommerce_product_data_tabs

> Une recette pour créer un nouvel onglet dans l'écran d'édition produit afin d'y stocker des champs métier, sans toucher aux onglets natifs existants.

- Auteur : WordPress Développement
- Publié le : 2026-10-03
- Mis à jour le : 2026-09-30
- Catégorie : E-commerce
- URL : https://www.wpmoderne.fr/ecommerce/ajouter-onglet-produit-woocommerce-product-data-tabs/

## L’essentiel

- Le filtre reçoit le tableau des onglets existants avec label, target et priorité pour chacun
- La clé target doit correspondre exactement à l'identifiant du panneau HTML ajouté séparément
- L'enregistrement des valeurs saisies passe par un hook distinct de sauvegarde

Trois hooks distincts, pas un seul, sont nécessaires pour ajouter un onglet fonctionnel à l'écran d'édition produit : un pour déclarer l'onglet, un pour afficher son contenu, un pour enregistrer les valeurs saisies. Le filtre `woocommerce_product_data_tabs` ne couvre que la première étape, ce qui explique pourquoi copier seulement cet extrait trouvé en ligne laisse souvent un onglet vide ou sans effet.

## Déclarer l'onglet

Le filtre reçoit un tableau associatif de tous les onglets existants, chacun identifié par une clé unique et décrit par un sous-tableau contenant `label`, `target` et `priority`. La clé `target` correspond à l'identifiant HTML du panneau qui contiendra les champs, sans le caractère `#`.

```
add_filter( 'woocommerce_product_data_tabs', function( $tabs ) {
    $tabs['wpm_business_data'] = array(
        'label'    => 'Données métier',
        'target'   => 'wpm_business_data_panel',
        'class'    => array(),
        'priority' => 21,
    );

    return $tabs;
} );
```

La priorité place l'onglet parmi les onglets natifs, qui s'échelonnent globalement entre 10 et 100 environ selon leur position. Une priorité de 21 place ainsi le nouvel onglet juste après celui de l'inventaire, sans avoir besoin de connaître la valeur exacte de tous les onglets natifs environnants.

## Afficher le panneau correspondant

> L'essentiel à retenir : Le filtre reçoit le tableau des onglets existants avec label, target et priorité pour chacun ; La clé target doit correspondre exactement à l'identifiant du panneau HTML ajouté séparément ; L'enregistrement des valeurs saisies passe par un hook distinct de sauvegarde

L'affichage du contenu de l'onglet se fait via un second hook, `woocommerce_product_data_panels`, qui doit générer un élément HTML dont l'identifiant correspond exactement à la valeur de `target` déclarée précédemment.

```
add_action( 'woocommerce_product_data_panels', function() {
    global $post;

    echo '<div id="wpm_business_data_panel" class="panel woocommerce_options_panel">';

    woocommerce_wp_text_input( array(
        'id'          => '_wpm_reference_interne',
        'label'       => 'Référence interne',
        'desc_tip'    => true,
        'description' => 'Code utilisé par le service logistique.',
    ) );

    echo '</div>';
} );
```

Les fonctions utilitaires comme `woocommerce_wp_text_input()` génèrent des champs déjà stylés de façon cohérente avec le reste de l'écran d'édition produit, sans avoir à reconstruire manuellement le balisage attendu par les feuilles de style d'administration de WooCommerce.

## Enregistrer la valeur saisie

Sans une troisième étape, la valeur saisie dans le champ disparaît à chaque rechargement de la page : rien ne l'enregistre automatiquement. C'est le hook `woocommerce_process_product_meta` qui doit s'en charger, généralement lors de l'enregistrement du produit.

```
add_action( 'woocommerce_process_product_meta', function( $product_id ) {
    if ( isset( $_POST['_wpm_reference_interne'] ) ) {
        update_post_meta(
            $product_id,
            '_wpm_reference_interne',
            sanitize_text_field( wp_unslash( $_POST['_wpm_reference_interne'] ) )
        );
    }
} );
```

> L'erreur qu'on retrouve le plus souvent dans du code repris d'un tutoriel incomplet : le filtre des onglets et l'action d'affichage sont bien présents, mais rien n'enregistre la saisie. Le champ semble fonctionner à l'écran, jusqu'à ce qu'on recharge la page et qu'il apparaisse vide.

## Un identifiant de panneau qui doit rester unique

La cohérence entre `target` et l'identifiant du panneau dépend d'une simple correspondance de chaînes de caractères, sans validation automatique par WooCommerce. Une faute de frappe entre les deux, ou un identifiant déjà utilisé par une autre extension installée sur la même boutique, provoque un onglet visible dans la liste mais dont le clic n'affiche jamais le bon contenu, sans qu'aucune erreur ne remonte dans les journaux.

## Ce qu'il faut retenir

Ajouter un onglet fonctionnel à l'écran produit demande de coordonner trois hooks distincts : woocommerce_product_data_tabs pour le déclarer, woocommerce_product_data_panels pour afficher son contenu avec un identifiant correspondant exactement, et woocommerce_process_product_meta pour enregistrer effectivement la saisie. Omettre l'un des trois laisse un onglet qui semble fonctionner à l'écran sans jamais persister la moindre donnée.