Tri d’un tableau de produits WooCommerce : ordre, colonnes et ventes
Le tri d’un tableau de produits WooCommerce comporte trois volets : l’ordre avec lequel le tableau s’affiche au départ, les en-têtes de colonnes sur lesquels les visiteurs peuvent cliquer, et une liste déroulante de tri facultative. Chacun se règle à un endroit différent et lit ses données à sa manière, ce qui explique la plupart des questions sur un « mauvais ordre » : une colonne de taxonomie sans flèches de tri, une colonne calculée impossible à trier, des meilleures ventes qui ne correspondent pas aux ventes réelles. Voici comment fonctionne chaque volet dans WOOT, comment trier selon vos propres champs et comment désactiver le tri des colonnes.
Trois façons de trier un tableau de produits WooCommerce
L’ordre par défaut. Dans l’onglet Options du tableau, Trier par défaut par (Default order by) définit le champ selon lequel le tableau est trié au chargement, et Ordre par défaut (Default order) définit le sens, asc ou desc. Les nouveaux tableaux démarrent avec l’ID, en ordre décroissant. Le shortcode peut remplacer les deux réglages grâce aux attributs orderby et order, en utilisant les clés de champ des colonnes :
[woot id=12 orderby="menu_order" order="asc"]
[woot id=12 orderby="total_sales" order="desc"]
Les autres clés sont post_title, price, sku, stock_quantity, post_date et, pour un champ de l’onglet Meta du tableau, sa clé meta. L’attribut s’écrit orderby, en un seul mot : order_by n’est pas reconnu et est ignoré sans message d’erreur. Pensez au sens avec Ordre du menu (Menu order) : l’ordre du menu va du plus petit au plus grand, il faut donc asc, alors que le sens par défaut d’un nouveau tableau est desc, ce qui renverse la liste.
Les en-têtes de colonnes. Les colonnes triables affichent deux petites flèches dans l’en-tête. Un clic trie selon cette colonne, le clic suivant inverse le sens, et le tableau revient à la première page.
La liste déroulante de tri (Sorting Dropdown). Activez Afficher la liste déroulante de tri (Show Sorting Dropdown) dans Options et choisissez les entrées dans Champs de la liste déroulante de tri (Sorting Dropdown Fields) (appuyez sur une entrée et patientez pour la déplacer). La liste contient les tris WooCommerce habituels (popularité, note moyenne, nouveautés, prix croissant et décroissant), ainsi que le nom, l’UGS (SKU), la quantité en stock, le total des ventes, le nombre de commentaires, la date de dernière modification, l’ordre du menu, les produits vendus en premier, la disponibilité, l’ordre aléatoire et l’ID du produit. Chaque champ de l’onglet Meta du tableau est ajouté sous la forme Titre : croissant (Title: Ascending) et Titre : décroissant (Title: Descending). La première entrée, Trié par le tableau (Sorted by table), revient au tri par les en-têtes. Dans un shortcode, indiquez les clés avec l’attribut orderby_select_fields, par exemple orderby_select_fields="popularity,price,price-desc,date". La liste déroulante est disponible dans les tableaux qui chargent leurs lignes par AJAX, le mode normal de [woot].
Deux entrées de la liste n’ont pas de sens propre : Trier par nouveautés (Sort by latest) et Trier par ordre du menu (Sort by menu order) utilisent le sens actuel du tableau. Avec Ordre par défaut (Default order) réglé sur desc, « nouveautés » affiche d’abord les produits les plus récents et « ordre du menu » s’affiche à l’envers ; n’ajoutez donc que l’entrée qui correspond à votre sens par défaut.
Quelles colonnes se trient en cliquant sur l’en-tête
Une colonne est triable lorsque sa donnée est un champ de l’article produit ou une valeur meta unique que la base de données sait ordonner : ID, titre, statut, date de publication, date de modification, nombre de commentaires, prix, prix normal et prix promotionnel, UGS (SKU), poids et dimensions, statut du stock, quantité en stock, total des ventes, nombre d’avis, note, ordre du menu, ainsi que les champs texte et nombre de l’onglet Meta. Le premier clic utilise le sens de départ propre à la colonne : l’ID, les dates, le nombre de commentaires et les champs numériques de l’onglet Meta partent de la valeur la plus élevée ; le titre, les prix, l’UGS (SKU), le stock, le total des ventes, les notes et l’ordre du menu partent de la valeur la plus basse.
Les colonnes de taxonomie (catégories, étiquettes, attributs comme la longueur ou la couleur) ne peuvent pas être triées. Un produit peut avoir plusieurs termes dans une même taxonomie, et la requête de produits de WordPress ne permet pas d’ordonner les produits selon les noms de leurs termes. Les colonnes générées par du code, comme la vignette, le bouton d’ajout au panier ou une valeur modifiée dans un filtre, ne sont pas triables non plus, car la base de données ne contient pas cette valeur.
Les produits variables appellent une remarque de plus. WooCommerce enregistre une valeur _price pour chaque prix de variation distinct ; dans un tri par l’en-tête Prix (Price), un produit variable n’est donc pas assuré de figurer à son prix le plus bas. Pour les boutiques avec des produits variables, proposez Trier par prix : croissant (Sort by price: low to high) et Trier par prix : décroissant (Sort by price: high to low) dans la liste déroulante de tri : ces entrées utilisent le prix le plus bas et le prix le plus haut de chaque produit tels que les calcule WooCommerce.
Trier par champ personnalisé ou par valeur calculée
Pour trier selon un champ personnalisé, ajoutez-le dans l’onglet Meta avec sa clé meta exacte et le type texte (text) (alphabétique) ou nombre (number) (numérique), puis ajoutez-le comme colonne. Un tri sur une clé meta n’affiche que les produits qui possèdent une valeur pour cette clé, c’est ainsi que WordPress construit la requête ; cette FAQ explique comment inclure les autres.
Une valeur que vous calculez dans le hook woot_meta_data_cell sert uniquement à l’affichage : le hook modifie le texte de la cellule une fois les produits chargés, de sorte que le tri continue d’utiliser ce qui est enregistré sous cette clé meta, et si rien n’est enregistré, rien ne peut être trié. La solution consiste à enregistrer la valeur calculée comme véritable meta du produit et à trier selon celle-ci. Exemple : une valeur de stock (prix × quantité en stock) tenue à jour lors de l’enregistrement d’un produit et lorsque son stock change après une commande.
/*
* Store "stock value" (price x stock quantity) as product meta _stock_value,
* so a WOOT Meta field with this key and the type "number" can be sorted.
* Child theme functions.php or a code snippets plugin.
*/
function my_store_stock_value($product) {
if (!is_a($product, 'WC_Product')) {
$product = wc_get_product($product);
}
if (!$product) {
return;
}
$value = (float) $product->get_price() * (int) $product->get_stock_quantity();
update_post_meta($product->get_id(), '_stock_value', round($value, 2));
}
add_action('woocommerce_new_product', 'my_store_stock_value');
add_action('woocommerce_update_product', 'my_store_stock_value');
add_action('woocommerce_product_set_stock', 'my_store_stock_value');
Les produits existants reçoivent la valeur à leur prochain enregistrement. Pour la renseigner d’un coup pour tous, sélectionnez-les dans Produits, choisissez Modifier (Edit) dans Actions groupées (Bulk actions), cliquez sur Appliquer (Apply) puis sur Mettre à jour (Update) sans modifier aucun champ. La même méthode rend une taxonomie triable : dans la fonction, lisez le terme avec wp_get_post_terms() et enregistrez son nom ou son numéro dans une clé meta.
Total des ventes et popularité : le même nombre, issu de deux sources
La colonne Total des ventes (Total sales), Trier par défaut par (Default order by) → Total des ventes (Total sales) et les entrées de liste déroulante Total des ventes : croissant/décroissant (Total Sales: Ascending/Descending) trient selon le champ meta du produit total_sales (les entrées de la liste déroulante laissent aussi de côté les produits groupés et externes). Trier par popularité (Sort by popularity) utilise la table de recherche des produits de WooCommerce, le même tri que la page boutique : total_sales du plus élevé au plus bas, puis les ID de produit les plus récents en premier. Normalement, les deux contiennent le même nombre.
WooCommerce incrémente total_sales lorsqu’une commande passe au statut En cours (Processing), En attente (On hold) ou Terminée (Completed). L’historique de ventes importé, ou les commandes créées sans ces changements de statut, n’atteignent jamais ce champ : les « meilleures ventes » ne tiennent alors compte que des ventes réalisées depuis. Pour trier selon l’historique complet, écrivez les totaux dans total_sales (la plupart des outils d’import savent mapper ce champ), puis lancez WooCommerce → État (Status) → Outils (Tools) → Tables de recherche des produits (Product lookup tables) → Régénérer (Regenerate) afin que la popularité utilise les mêmes nombres. Pour un tableau fixe des meilleures ventes, consultez les tableaux de produits les plus vendus.
Désactiver le tri des colonnes
Pour un tableau créé dans WOOT → Tableaux (Tables), sélectionnez les colonnes dans Désactiver le tri des colonnes (Disable columns order-by) de l’onglet Options. Leurs flèches disparaissent et les en-têtes ne sont plus cliquables ; l’ordre par défaut continue de s’appliquer.
Les shortcodes [woot_upsells], [woot_cross_sells], [woot_related], [woot_grouped] et [woot_variations] ne sont pas liés à un tableau ; ils n’ont donc pas cette option ni d’attribut correspondant. Ce code désactive le tri par les en-têtes dans ces tableaux uniquement :
/*
* WOOT: no header sorting in the upsells, cross-sells, related,
* grouped and variations tables. Other tables keep their sorting.
* Child theme functions.php or a code snippets plugin.
*/
add_filter('woot_profile_extend', function ($profile, $action, $shortcode_args = []) {
$no_sorting = ['woot_upsells', 'woot_cross_sells', 'woot_related', 'woot_grouped', 'woot_variations'];
if (isset($shortcode_args['filter_provider']) && in_array($shortcode_args['filter_provider'], $no_sorting, true)) {
foreach ($profile as $key => $field) {
if (is_array($field) && !empty($field['order'])) {
$profile[$key]['order'] = false;
}
}
}
return $profile;
}, 10, 3);
Retirez de la liste $no_sorting les shortcodes que vous voulez laisser triables. Le tableau répète aussi les titres de colonnes dans une ligne de pied. Il n’existe pas d’option pour la masquer ; faites-le en CSS. Dans l’onglet CSS personnalisé (Custom CSS) du tableau (le plugin limite les règles à ce tableau) :
table tfoot { display: none; }
Pour tous les tableaux du site, placez plutôt ceci dans Apparence → Personnaliser → CSS additionnel :
.woot-data-table table tfoot { display: none; }
Trier les tableaux de ventes incitatives, de ventes croisées et de produits similaires
Ces shortcodes trient par titre de produit, de A à Z, sauf si vous définissez orderby et order :
[woot_upsells columns="thumbnail,sku,title,price" orderby="menu_order"]
[woot_upsells columns="thumbnail,sku,title,price" orderby="post__in"]
menu_order utilise l’ordre du menu des produits (glisser-déposer dans la vue Tri (Sorting) de la liste des produits, ou champ Ordre du menu (Menu order) dans l’onglet Avancé du produit). post__in conserve l’ordre dans lequel les produits sont enregistrés dans le champ Ventes incitatives (Upsells) ou Ventes croisées (Cross-sells) du produit, ou comme enfants d’un produit groupé. Les produits similaires sont choisis au hasard par WooCommerce ; pour eux, utilisez donc un champ : orderby="menu_order", ou orderby="total_sales" order="desc" pour afficher les meilleures ventes en premier (le sens de ces tableaux est asc tant que vous ne le définissez pas). Ces tableaux chargent toutes leurs lignes d’un coup, et un clic sur un en-tête retrie les lignes chargées dans le navigateur d’après le contenu des cellules. Cela fonctionne pour des valeurs simples comme l’UGS (SKU) ou le stock, mais les prix et les titres avec lien sont comparés comme du texte, ce qui est une raison de plus de désactiver le tri par les en-têtes dans ces tableaux avec le code ci-dessus.
Les shortcodes trouvent le produit à partir de la page sur laquelle ils se trouvent. Utilisés ailleurs (une page normale, un onglet créé par du code, un PDF généré par un autre plugin), ils affichent WOOT: Set product id please in the shortcode attribute!. Indiquez l’ID du produit : [woot_upsells id=123]. La page [woot_upsells] liste les autres attributs.
Si l’ordre semble toujours erroné
- Vérifiez le shortcode : un attribut
orderbyouorderremplace les Options du tableau. - Vérifiez le sens : Ordre par défaut (Default order) s’applique à tous les champs, y compris l’ordre du menu.
- Pour un champ meta, vérifiez que les produits ont une valeur sous cette clé exacte ; les produits qui n’en ont pas ne sont pas affichés pendant un tri sur cette clé.
- Pour les meilleures ventes, comparez la valeur
total_salesde deux produits avec leurs ventes réelles, puis régénérez les tables de recherche des produits après correction. - Videz le cache de page après avoir modifié les Options, puis rechargez la page en étant déconnecté.
Si une colonne se trie encore dans un ordre que vous ne parvenez pas à expliquer, ouvrez un sujet sur le forum d’assistance WOOT en indiquant le shortcode du tableau, la colonne et deux produits qui apparaissent dans le mauvais ordre.