WooCommerce : ajouter plusieurs produits au panier depuis un tableau

Un client qui commande dix ou quarante articles ne devrait pas avoir à ouvrir dix ou quarante pages produit. WooCommerce ajoute un produit par clic ; pour ajouter plusieurs produits au panier WooCommerce depuis une seule page, un tableau de produits WOOT permet au client de cocher les lignes, de définir une quantité pour chacune et de tout envoyer au panier d’un seul clic. Voici comment le configurer, ce que « Tout sélectionner » sélectionne réellement, ce qui se passe après l’ajout et comment les produits variables s’intègrent.

Configurer le tableau pour ajouter plusieurs produits au panier

Tout se passe dans la colonne Panier (Cart) (clé de champ add_to_cart). Ajoutez-la dans l’onglet Colonnes (Columns) du tableau ; un shortcode [woot] simple, sans identifiant de tableau, l’inclut déjà. Pour un produit simple, la cellule contient :

• un champ de quantité ;
• une case à cocher qui marque le produit pour l’ajout ;
• le bouton Ajouter au panier (Add to cart) propre au produit, avec un petit compteur indiquant combien d’unités sont déjà dans le panier.

L’en-tête de la colonne contient une case à cocher avec l’infobulle Sélectionner tous les produits (Select all products). Dès qu’au moins une ligne est cochée, un bouton ajouter la sélection (add selected) apparaît au-dessus de l’en-tête. Le parcours du client est le suivant :

1. Il filtre ou recherche dans le tableau jusqu’à obtenir les produits dont il a besoin.
2. Il coche les lignes (ou la case de l’en-tête) et définit la quantité dans chaque ligne cochée.
3. Il clique sur ajouter la sélection (add selected).

Tous les produits cochés sont envoyés en une seule requête, chacun avec la quantité de sa ligne. Les cases sont décochées, un message confirme la mise à jour, et les compteurs ainsi que les informations de panier du tableau sont actualisés. Les textes ajouter la sélection (add selected), Sélectionner tous les produits (Select all products) et Ajouter au panier (Add to cart) peuvent être modifiés dans le Vocabulaire (Vocabulary) du plugin.

Ces deux commandes de l’en-tête nécessitent la ligne d’en-tête. Lorsque le tableau s’affiche en vue compacte sur un écran étroit (option Largeur de la vue compacte (Compact view width)), l’en-tête est masqué et les clients ajoutent les produits un par un avec les boutons des cartes ; voir le tableau de produits sur mobile.

Ce qui peut être sélectionné : produits simples, variables et groupés

Un client peut donc cocher plusieurs variations d’un même T-shirt dans le popup et les ajouter ensemble, mais il ne peut pas cocher directement un produit variable dans le tableau principal, car WooCommerce doit savoir quelle variation ajouter. L’apparence du popup et les colonnes qu’il affiche sont décrites dans personnaliser le popup des variations.

Le champ de quantité respecte les limites du produit : lorsque WooCommerce gère le stock, le maximum correspond à la quantité en stock, et un produit vendu individuellement est fixé à 1. Pour les précommandes et les quantités minimales ou maximales, voir précommandes et limites de quantité.

Tout sélectionner n’ajoute que les produits de la page courante

La case de l’en-tête coche les lignes qui se trouvent à cet instant dans le tableau, dans le navigateur, c’est-à-dire la page courante. Les produits des autres pages ne sont pas chargés tant que le client n’ouvre pas ces pages ; ils ne peuvent donc pas être cochés, et le plugin ne peut pas ajouter « tous les produits de toutes les pages » en une seule action. Pour permettre aux clients d’en ajouter davantage à la fois, affichez plus de lignes :

• Augmentez Par page par défaut (Per page default) dans les Options du tableau, et proposez des valeurs plus grandes dans Valeurs par page (Per page values), par exemple 25,50,100. Dans un shortcode : [woot id=12 per_page=50 per_page_sel_pp="25,50,100"].
• Activez Utiliser le bouton « Charger plus » (Use load more button). Les lignes chargées avec Charger plus (Load More) sont ajoutées sous les lignes existantes ; Tout sélectionner (Select all) coche donc tout ce qui est chargé jusqu’ici.
• Laissez d’abord les clients restreindre le tableau avec le filtre, puis cocher tout ce qui se trouve sur une page.

Gardez des pages raisonnables. Chaque ligne est construite sur le serveur et chaque produit coché passe par les contrôles d’ajout au panier de WooCommerce dans la même requête ; une page de plusieurs centaines de produits se charge donc lentement, et tout ajouter peut atteindre la limite de temps du serveur.

Après l’ajout : rester, ouvrir le panier ou passer à la caisse

L’option Après l’ajout au panier (After to cart adding) dans les Options du tableau propose trois valeurs : Rester sur la même page (Stay on the same page), Rediriger vers la page du panier (Redirect to the cart page) et Rediriger vers la page de paiement (Redirect to the checkout page). Elle s’applique au bouton Ajouter au panier (Add to cart) des produits simples de ce tableau, une fois que WooCommerce a confirmé que le produit est dans le panier. ajouter la sélection (add selected) et les boutons des popups de variations et de produits groupés laissent le client sur la page, ce qui convient aux commandes en gros : ajouter plusieurs groupes de produits, puis passer au panier.

Si chaque ajout depuis un tableau doit ouvrir le panier, utilisez les événements que le tableau déclenche après un ajout réussi plutôt que de remplacer ses gestionnaires de clic. Une redirection lancée sur le clic lui-même part avant que le produit soit ajouté, ce qui se traduit par un panier vide jusqu’au prochain rechargement.

/*
 * WOOT: open the cart page after every add from a products table:
 * the Add to cart buttons (also in the variations popup) and "add selected".
 * Child theme functions.php or a code snippets plugin.
 */
add_action('wp_footer', function () {
    ?>
    <script>
    (function () {
        var openCart = function () {
            if (typeof woot_woo_js_vars !== 'undefined') {
                window.location.href = woot_woo_js_vars.cart_link;
            }
        };
        var bulkAdding = false;

        // a product or variation was added with its own button
        document.addEventListener('woot-added-to-cart', openCart);

        // "add selected" was clicked ...
        document.addEventListener('click', function (e) {
            if (e.target.closest('.woot-add-to-cart-all-btn')) {
                bulkAdding = true;
            }
        });

        // ... and the table has reloaded the cart after adding
        document.addEventListener('woot-woo-cart-refreshed', function () {
            if (bulkAdding) {
                openCart();
            }
        });
    })();
    </script>
    <?php
});

Pour aller à la page de paiement à la place, remplacez cart_link par checkout_link.

Afficher le panier à côté du tableau

Les clients qui ajoutent beaucoup de produits veulent voir ce qu’ils ont réuni sans quitter la page.

• Afficher le panier de la boutique (Show shop cart) (Options) place au-dessus du tableau un bouton indiquant le nombre d’articles et le sous-total, ainsi que les boutons Panier (Shop cart) et Paiement (Checkout). Un clic sur le bouton d’information ouvre le panier sous forme de tableau dans un popup, où l’on peut modifier les quantités, retirer des produits ou vider tout le panier. Positions du panier/tri (Cart/Sorting positions) choisit son côté. Les deux boutons s’ouvrent dans un nouvel onglet ; les ouvrir dans le même onglet demande un court script.
• Les Réglages (Settings) du plugin déterminent les colonnes de ce tableau de panier (Colonnes du panier (Shop cart columns)) et peuvent masquer les deux boutons (Masquer le bouton du panier (Hide shop cart button), Masquer le bouton de paiement (Hide checkout button)).
• Le shortcode [woot_cart] affiche le même tableau de panier n’importe où, par exemple dans une barre latérale à côté d’un formulaire de commande.
• Masquer les produits ajoutés au panier (Hide added to cart products) (Options) laisse hors du tableau les produits déjà présents dans le panier à chaque chargement de lignes (autre page, filtre, rechargement) : une longue liste de commande raccourcit donc à mesure que le client la parcourt.

Le tableau actualise lui-même ses informations de panier. Que le mini-panier du thème, dans l’en-tête, suive ou non dépend du thème ; s’il ne suit pas, voir le mini-panier ne se met pas à jour après l’ajout au panier.

Si les produits sélectionnés n’arrivent pas dans le panier

• Certains produits cochés sont absents. WooCommerce les a refusés, par exemple parce que la quantité dépasse le stock ou qu’un produit vendu individuellement est déjà dans le panier. La raison est enregistrée sous forme de notification WooCommerce et apparaît sur la prochaine page qui affiche les notifications, généralement la page du panier.
• Le panier de l’en-tête ne change qu’après un rechargement. Les produits sont dans le panier, mais le mini-panier du thème ne suit pas le tableau (voir l’article sur le mini-panier lié ci-dessus), ou un cache de pages sert des pages avec un ancien panier. Excluez le panier, la page de paiement et les pages contenant des tableaux du cache de pages.
• Rien ne se passe au clic. Ouvrez la console du navigateur : une erreur JavaScript d’un autre script, ou un code personnalisé qui a remplacé les gestionnaires de clic du tableau, bloque l’ajout. Supprimez ce code et utilisez les événements présentés plus haut.
• Un produit variable n’a pas de case à cocher. C’est normal : ouvrez sélectionner [N] (select [N]) et cochez les variations dans le popup.

Si le panier ne reçoit toujours pas les produits sélectionnés, ouvrez un sujet sur le forum de support WOOT avec le lien de la page et les étapes qui échouent, et nous nous en occuperons.