Afficher les variations en lignes séparées dans un tableau de produits WooCommerce

Pour afficher les variations en lignes séparées dans un tableau de produits WooCommerce, il faut d’abord savoir ce que le tableau liste par défaut : une ligne par produit. Un produit variable reçoit une seule ligne, et ses variations s’ouvrent dans un popup depuis le bouton sélectionner [N] (select [N]). Selon votre besoin, il existe trois façons de contourner cela : un tableau de toutes les variations d’un seul produit, un tableau limité à une catégorie dont les variations sont à un clic, ou un tableau dédié qui liste les variations de nombreux produits en lignes, mis en place avec un peu de code. Chacune est présentée ci-dessous, avec ses limites.

Pourquoi un tableau de produits WooCommerce affiche une ligne par produit variable

Dans WooCommerce, un produit variable et ses variations sont des types de contenus différents. Le produit est un product, et chaque variation (Rouge / L, Bleu / M) est un contenu product_variation distinct qui lui appartient. Une variation a son propre prix, son UGS, son stock et son image, mais n’a ni catégories, ni étiquettes, ni termes d’attributs en propre : ceux-ci restent sur le produit parent, et la variation ne stocke que les valeurs d’attributs qu’elle représente.

Le tableau [woot] interroge les produits, de la même façon que la page boutique. C’est pourquoi il affiche le parent une seule fois, pourquoi sa cellule Prix (Price) affiche une fourchette de prix, et pourquoi la colonne Panier (Cart) affiche sélectionner [N] (select [N]) au lieu d’un bouton Ajouter au panier (Add to cart). Ce bouton, ainsi que le bouton Var.[N] de la colonne Variations, ouvrent un popup qui liste les variations en lignes, chacune avec un champ de quantité et son propre bouton Ajouter au panier (Add to cart). La modification des colonnes, du tri et de la pagination de ce popup est décrite dans personnaliser le popup des variations.

Les plugins qui affichent des variations individuelles dans la boutique le font en modifiant la requête de boutique de WooCommerce. Le tableau exécute sa propre requête ; ces plugins n’y ajoutent donc pas de variations.

Toutes les variations d’un produit en lignes de tableau : [woot_variations]

Le shortcode [woot_variations] affiche les variations d’un produit variable sous forme de tableau complet, directement dans la page au lieu d’un popup :

[woot_variations id=49]

id est l’identifiant du produit variable, et non celui d’un tableau. Chaque variation est une ligne avec son titre (le nom du produit suivi de ses valeurs d’attributs, par exemple T-shirt - Red, L), son prix, son stock et une cellule de panier avec un champ de quantité, une case à cocher et un bouton Ajouter au panier (Add to cart). Les cases à cocher fonctionnent avec le lien ajouter la sélection (add selected) de l’en-tête de la colonne du panier : un client peut ainsi cocher plusieurs variations, définir les quantités et les ajouter au panier en un seul clic. Le shortcode devient alors un bon formulaire de commande pour les produits proposés en de nombreuses tailles ou couleurs.

• Colonnes. Sans l’attribut columns, le tableau utilise WOOT → Réglages (Settings) → Colonnes des variations (Variations columns), la même liste que le popup. Définissez-les pour un seul tableau avec l’attribut : [woot_variations id=49 columns='thumbnail,post_title,sku,price,stock_quantity,add_to_cart'].
• Lignes par page. Toutes les variations sont chargées d’un coup et paginées dans le navigateur, 10 par page par défaut. per_page=-1 les affiche toutes, per_page_position='b' place la pagination sous le tableau (t, b, tb ou none).
• Tri. Les lignes sont triées par titre, de A à Z. orderby et order modifient ce tri, par exemple orderby='id' order='asc' pour l’ordre de création des variations. Les lignes sont triées dans le navigateur d’après le contenu de la colonne ; la colonne id doit donc figurer parmi les colonnes pour que cela fonctionne.
• Sur la page produit. Omettez id, et le shortcode prend le produit de la page courante. Il fonctionne dans un modèle de page produit (Elementor, modèle d’un thème à blocs) ou ajouté par un hook, comme le montre comment insérer des shortcodes dans la page produit. Sur une page qui n’est pas une page produit, sans id, il affiche WOOT: Set product id please in the shortcode attribute!.

Seuls les attributs globaux (créés sous Produits → Attributs) sont ajoutés au titre de la variation et peuvent être affichés comme colonnes, comme pa_size. Les valeurs des attributs personnalisés saisis directement dans un produit n’apparaissent pas.

Un tableau pour une catégorie, variations à un clic

Souvent, la demande derrière « afficher toutes les variations » est plus étroite : un tableau par gamme de produits, où chaque produit variable est facile à acheter. Créez un tableau, ouvrez son onglet Prédéfinition (Predefinition) et renseignez Taxonomie incluse (Included taxonomy) avec l’identifiant de terme de la catégorie, par exemple product_cat:25 (plusieurs catégories : product_cat:25,26). Le tableau n’affiche alors que les produits de cette catégorie, et les boutons sélectionner [N] (select [N]) ouvrent les variations de chacun. La FAQ sur un tableau différent pour chaque catégorie présente la même configuration sur plusieurs pages.

Pour une catégorie ne contenant que quelques produits variables, la disposition la plus directe est une page avec un [woot_variations] par produit, chacun sous son propre titre.

Variations de nombreux produits en lignes séparées

Le tableau n’a pas d’interrupteur qui transforme chaque produit en ses lignes de variations. On peut y parvenir avec le hook woot_wp_query_args, qui reçoit la requête d’un tableau avant son exécution. Le shortcode [woot_variations] fonctionne de la même façon en interne : il demande des contenus de type product_variation. Créez un tableau séparé pour cela, définissez ses colonnes (Titre (Title), UGS (SKU), Prix (Price), stock, Panier (Cart) et les colonnes d’attributs dont vous avez besoin), puis ajoutez :

/*
 * Products table #25 lists variations instead of products.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_wp_query_args', function ($args, $table_id) {
    if ((int) $table_id !== 25) { // the ID of your variations table
        return $args;
    }

    // Variations have no categories: find the variable parent products first
    $tax_query = [
        [
            'taxonomy' => 'product_type',
            'field'    => 'slug',
            'terms'    => ['variable'],
        ],
        [
            'taxonomy' => 'product_cat',
            'field'    => 'slug',
            'terms'    => ['t-shirts'], // category slugs; remove this block for all categories
        ],
    ];

    $parent_ids = get_posts([
        'post_type'      => 'product',
        'post_status'    => 'publish',
        'posts_per_page' => -1,
        'fields'         => 'ids',
        'tax_query'      => $tax_query,
    ]);

    $args['post_type'] = 'product_variation';
    $args['post_parent__in'] = $parent_ids ? $parent_ids : [0];

    return $args;
}, 10, 2);

Insérez le tableau avec [woot id=25]. Chaque variation publiée des produits sélectionnés a désormais sa propre ligne, avec son prix, son stock et son bouton Ajouter au panier (Add to cart). Les variations désactivées sont enregistrées comme contenus privés ; elles restent donc exclues tant que l’option de statut des contenus du tableau garde sa valeur par défaut, publié. Connaissez les compromis avant de bâtir une page boutique là-dessus :

• Les règles de catégorie et d’attribut ne s’appliquent pas aux lignes de variations. Les variations ne portent aucun terme ; Taxonomie incluse (Included taxonomy) dans Prédéfinition (Predefinition), ainsi que les éléments de catégorie ou d’attribut du filtre du tableau, ne trouvent donc rien dans ce tableau. Choisissez les catégories dans le code, comme ci-dessus. Le prix, l’UGS, le stock et la recherche par titre continuent de fonctionner, car les variations ont ces champs.
• Le titre est du texte brut. Une variation n’a pas de page propre ; sa cellule Titre (Title) n’est donc pas un lien. Ajoutez la colonne Miniature (Thumbnail) si les clients doivent voir l’article ; elle affiche l’image propre de la variation.
• Les variations « Toutes » ne peuvent pas être achetées depuis une ligne. Une variation réglée sur Toutes les tailles (Any Size) oblige le client à choisir une taille, et une ligne n’a pas de champ pour cela ; WooCommerce refuse donc de l’ajouter au panier. Donnez à ces variations des valeurs concrètes.
• Nombre de lignes. Cent produits de vingt variations chacun donnent un tableau de deux mille lignes. Gardez la pagination activée et un nombre de lignes par page modéré.

Quelle approche choisir

Si les variations ne s’affichent pas

• [woot_variations] affiche No Data! : l’identifiant appartient à un produit simple, ou toutes ses variations sont désactivées ou non publiées.
• Le shortcode affiche l’avis « set product id » : ajoutez id, ou placez-le là où un produit est la page courante.
• Le tableau de variations construit avec le snippet est vide : vérifiez l’identifiant du tableau dans le code, les slugs de catégories, et que le tableau n’a aucune règle Taxonomie incluse (Included taxonomy) dans Prédéfinition (Predefinition).
• Une ligne n’a pas de bouton Ajouter au panier (Add to cart) : la variation n’a pas de prix ou est en rupture de stock, et WooCommerce ne la considère pas comme achetable.

Pour les dispositions non couvertes ici, posez votre question sur le forum de support WOOT.