Champs ACF dans un tableau de produits WooCommerce : colonnes, liens et filtres

Pour afficher des champs ACF dans un tableau de produits WooCommerce, il faut d’abord savoir où se trouve la valeur. Les attributs de produit, les catégories et les marques sont des taxonomies, et le tableau les propose de lui-même comme colonnes. Les champs ACF, et les champs que la plupart des autres plugins ajoutent aux produits, sont des métadonnées d’article (post meta) : le tableau ne les affiche qu’une fois que vous lui avez indiqué la clé méta exacte. Voici comment fonctionnent les deux cas, quels types de champs ACF s’affichent correctement sans code, et comment transformer des URL, des fichiers et des identifiants en liens ou en images.

Ajouter des champs ACF à un tableau de produits WooCommerce dans l’onglet Meta

ACF enregistre chaque valeur dans la table standard wp_postmeta sous le nom du champ. Le tableau peut lire n’importe quelle valeur de ce type, mais il ne peut pas deviner lesquelles des centaines de clés méta d’une boutique comptent pour vous ; les champs d’ACF, de Pods, des plugins de tarification et d’autres sources n’apparaissent donc jamais automatiquement. Vous les enregistrez tableau par tableau :

1. Sur la page d’administration de WOOT, cliquez sur l’icône en forme de roue dentée (options du tableau) de votre tableau et ouvrez l’onglet Meta.
2. Cliquez sur Ajouter un champ méta (Add meta field). Une ligne apparaît avec la clé fictive 0 write key here.
3. Renseignez Titre (Title), saisissez le nom exact du champ dans Clé méta (Meta key) et choisissez le Type : text, number ou calendar. Ne le laissez pas sur non défini (not defined) : le type détermine la façon dont la valeur est triée et filtrée.
4. Allez dans l’onglet Colonnes (Columns), ajoutez une colonne et sélectionnez le nouveau champ (il est listé sous son titre). Activez-le avec Actif (Active).
5. Pour filtrer d’après ce champ, faites-le glisser dans le formulaire de filtre, dans l’onglet Filtre (Filter).

Trois détails font gagner du temps. Utilisez le nom du champ (spec_sheet), pas la clé du champ (field_5f2a…) ni son jumeau caché qui commence par un tiret bas (_spec_sheet) : ACF y enregistre la clé du champ ; une cellule qui affiche field_… signifie donc que la clé est la mauvaise. Trier selon une clé méta masque les produits qui n’ont aucune valeur pour elle, c’est ainsi que fonctionnent les requêtes WordPress ; cette FAQ montre comment les conserver. Enfin, les champs méta appartiennent à un seul tableau ; pour ajouter une clé à tous les tableaux à la fois, voir ajouter une clé méta globalement.

Quels types de champs ACF fonctionnent sans code

Ce que la cellule affiche dépend de ce qu’ACF écrit dans la base de données, et non du Format de retour (Return Format) que vous avez choisi dans ACF (ce réglage n’affecte que get_field() dans les modèles).

Liens, manuels PDF, images : formater la cellule avec woot_meta_data_cell

Une première tentative classique consiste à saisir <a href="…">Spec PDF</a> dans un attribut de produit. Cela ne peut pas fonctionner : la valeur d’un attribut est un nom de terme, WordPress supprime le HTML des noms de termes, et le tableau enveloppe déjà chaque terme dans un lien vers son archive. Enregistrez plutôt uniquement l’URL dans un champ méta (un champ URL ou Fichier d’ACF, ou un champ personnalisé simple dont la clé ne contient pas d’espaces), ajoutez-le dans l’onglet Meta avec le type text, et construisez le lien dans le filtre woot_meta_data_cell. Il reçoit la valeur brute, la ligne de l’onglet Meta, l’identifiant du produit et l’identifiant du tableau, et ce qu’il retourne est placé dans la cellule comme HTML :

/*
 * Products tables: display meta fields added in the Meta tab.
 * Child theme functions.php or a code snippets plugin.
 * Replace the keys in "case" with your own ACF field names.
 */
add_filter('woot_meta_data_cell', function ($value, $meta_data, $post_id, $table_id) {

    switch ($meta_data['meta_key']) {

        case 'spec_sheet': // ACF URL field: the value is a web address
            $value = $value ? '<a href="' . esc_url($value) . '" target="_blank" rel="noopener">Spec sheet (PDF)</a>' : '';
            break;

        case 'manual': // ACF File field: the database holds the attachment ID
            $url = $value ? wp_get_attachment_url((int) $value) : '';
            $value = $url ? '<a href="' . esc_url($url) . '" target="_blank" rel="noopener">Manual</a>' : '';
            break;

        case 'energy_label': // ACF Image field: attachment ID
            $value = $value ? wp_get_attachment_image((int) $value, 'thumbnail') : '';
            break;

        case 'colors': // ACF Checkbox or multiple Select: an array of values
            $value = is_array($value) ? implode(', ', $value) : $value;
            break;

        case 'release_date': // ACF Date Picker: stored as Ymd
            $date = $value ? DateTime::createFromFormat('!Ymd', $value) : false;
            $value = $date ? date_i18n(get_option('date_format'), $date->getTimestamp()) : '';
            break;
    }

    return $value;
}, 10, 4);

Les contrôles de valeur vide comptent : sans eux, chaque ligne affiche un lien, y compris les produits qui n’ont aucun fichier. Pour limiter une règle à un seul tableau, ajoutez une condition telle que (int) $table_id === 21. Utilisez ce filtre avec des champs text et number ; un champ calendar convertit ensuite la valeur retournée en date, de sorte que le HTML retourné pour lui serait perdu. Pour renseigner de nombreuses valeurs d’un coup, le plus simple est d’utiliser un éditeur en masse capable de modifier les champs personnalisés.

Valeurs qui ne sont pas une clé méta unique : une colonne personnalisée

Lorsque la cellule a besoin de données provenant de plusieurs endroits, ou de quelque chose qui n’est pas une clé méta unique (un répéteur, un attribut personnalisé saisi dans le produit, un calcul), enregistrez votre propre colonne avec woot_profile_extend. La fonction de rappel indiquée dans action reçoit l’identifiant du produit pour chaque ligne et peut utiliser n’importe quelle fonction de WordPress, de WooCommerce ou d’ACF, y compris get_field() :

/*
 * Products tables: a "Material" column built from a product attribute.
 * Works for global attributes and for custom attributes typed in the product.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_profile_extend', function ($profile, $action) {

    if ('woot_woocommerce_tables' !== $action) {
        return $profile;
    }

    $profile['material_text'] = [
        'title'  => 'Material',
        'order'  => false, // not sortable
        'action' => function ($post_id) {
            $product = wc_get_product($post_id);
            return $product ? $product->get_attribute('material') : '';
        },
    ];

    return $profile;
}, 10, 2);

Le nouveau champ apparaît dans la liste Champ (Field) de l’onglet Colonnes (Columns) sous son titre. Une colonne de ce type sert uniquement à l’affichage : le tri et le filtrage demandent une logique de requête, que l’onglet Meta ajoute pour vous et que vous devriez sinon écrire vous-même.

Attributs, catégories et marques : des colonnes toutes prêtes

Chaque taxonomie enregistrée pour les produits apparaît dans la liste Champ (Field) de l’onglet Colonnes (Columns) : catégories, étiquettes, chaque attribut global (WooCommerce les affiche avec le préfixe « Product », par exemple Product Color) et les taxonomies personnalisées comme les marques. Le type de produit, la visibilité et la classe d’expédition en sont exclus. Ajoutez une colonne avec Ajouter la colonne au début (Prepend column) ou Ajouter la colonne à la fin (Append column), choisissez la taxonomie dans Champ (Field) et activez la colonne avec Actif (Active).

• Les termes sont affichés comme des liens vers leurs pages d’archive ; les catégories sous forme de liens ne demandent donc aucun code. Pour afficher du texte brut, ouvrez les options de la colonne et activez Afficher en texte (Display as text).
• Les mêmes taxonomies sont disponibles dans l’onglet Filtre (Filter) sous forme de listes déroulantes ou de sélections multiples.
• Les colonnes de taxonomie ne peuvent pas être triées en cliquant sur l’en-tête. Un produit peut avoir de nombreux termes ; il n’y a donc pas de valeur unique par ligne sur laquelle trier.
• Les attributs personnalisés saisis directement dans un produit (non créés sous Produits > Attributs) ne sont pas des taxonomies. WooCommerce les conserve dans un seul champ méta sérialisé ; ils n’apparaissent donc pas dans la liste. Utilisez un attribut global, ou une colonne personnalisée comme indiqué plus haut.

Types de contenu personnalisés, comme les éléments de portfolio

WOOT ne construit des tableaux que pour les produits WooCommerce. Pour un portfolio, des événements ou tout autre type de contenu, utilisez son plugin frère TableOn (posts-table.com), construit sur le même moteur. ACF y fonctionne de la même façon : un onglet Meta pour les champs simples, et ses propres hooks pour les types de champs indiqués plus haut comme nécessitant du code.

Si la colonne reste vide

• Comparez la clé méta lettre par lettre avec le Nom du champ (Field Name) d’ACF ; les clés sont sensibles à la casse et ne doivent pas contenir d’espaces.
• Ouvrez un produit qui a une valeur et vérifiez qu’elle y est bien enregistrée, et pas seulement affichée sur la page produit par un modèle.
• Assurez-vous que la ligne de l’onglet Meta a un type et que la colonne est Actif (Active) dans le tableau même dont le shortcode se trouve sur la page.
• Une cellule avec un nombre à la place d’une image ou d’un titre signale un champ qui stocke un identifiant ; une cellule avec field_… signale la clé à tiret bas.
• Videz le cache de pages après avoir modifié le snippet, et consultez le journal d’erreurs PHP si le tableau entier cesse de se charger après son ajout.

Si un champ ne s’affiche toujours pas, ouvrez un sujet sur le forum de support WOOT en indiquant le type du champ ACF, la clé méta et le shortcode du tableau.