Tableau de produits WooCommerce : commandes en rupture de stock et quantités

Dans un tableau de produits WooCommerce, les commandes en rupture de stock (backorders) obéissent à des règles plus strictes que sur la fiche produit. Un produit dont le stock est suivi, à 0, et qui autorise ces commandes n’affiche aucun bouton Ajouter au panier (Add to cart), le champ de quantité s’arrête au nombre d’unités en stock, et la colonne État du stock (Stock status) affiche la même coche pour Sur commande (On backorder) que pour En stock (In stock). Aucun de ces comportements ne vient d’un réglage oublié : le tableau construit son bouton et son champ de quantité à partir de la quantité en stock. Voici exactement comment il décide, et comment vendre depuis le tableau des produits en rupture de stock sans modifier les fichiers du plugin.

Comment le tableau décide d’afficher Ajouter au panier

Pour chaque ligne, le tableau examine le produit, puis construit un champ de quantité et un bouton dans le navigateur. Pour les produits simples et pour les lignes de variation de la fenêtre contextuelle des variations, les règles sont les suivantes :

La dernière ligne explique un message déroutant. Le champ de quantité reçoit le nombre en stock comme maximum, et lorsqu’un client en demande davantage, le tableau refuse avant même de contacter le serveur, en affichant Max count of products is: (« le nombre maximal de produits est : ») suivi de ce nombre, par exemple -3. Les produits variables et groupés affichent un bouton qui ouvre leur fenêtre contextuelle ; il est masqué lorsque le produit parent suit son propre stock et que cette quantité est à 0. Les produits externes affichent toujours leur bouton.

Le tableau est donc conçu pour vendre ce qui se trouve en rayon. Si les commandes en rupture de stock font partie de votre activité, modifiez ce comportement de l’une des façons ci-dessous.

Sans code : arrêter le suivi du stock des produits en rupture de stock

Si vous n’avez pas besoin que WooCommerce compte le stock d’un produit, ouvrez-le, allez dans Inventaire (Inventory), désactivez le suivi du stock (Suivre la quantité en stock pour ce produit (Track stock quantity for this product) dans les versions actuelles de WooCommerce) et réglez l’état du stock sur Sur commande (On backorder). Le tableau affiche alors le bouton et autorise jusqu’à 9999 unités par clic. En contrepartie, WooCommerce ne compte plus le stock de ce produit et ne signale pas ses lignes de commande comme étant en rupture de stock. Si vous avez besoin des deux, le décompte du stock et les commandes en rupture de stock, utilisez le snippet de la section suivante.

Afficher Ajouter au panier pour les produits qui autorisent les commandes en rupture de stock

Le snippet remplace le contenu de la colonne Panier (Cart) via le filtre woot_profile_extend, uniquement pour les produits et variations qui suivent leur stock et autorisent les commandes en rupture de stock (Autoriser (Allow) ou Autoriser, mais avertir le client (Allow, but notify customer)). Pour eux, il affiche le même espace réservé que le tableau affiche pour tout produit simple, avec une quantité vide : le script propre au tableau construit ainsi son champ de quantité, sa case à cocher et son bouton habituels, sans plafond lié au stock. Tous les autres produits conservent le bouton normal.

/*
 * Products tables: Add to cart for products that track stock and allow
 * backorders, also at 0 or negative stock, without a quantity cap.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_profile_extend', function ($fields, $action, $shortcode_args) {
    if (!isset($fields['add_to_cart']['action'])) {
        return $fields;
    }

    $original = $fields['add_to_cart']['action'];

    $fields['add_to_cart']['action'] = function ($post_id) use ($original) {
        $product = wc_get_product($post_id);

        if ($product
                && $product->is_type(['simple', 'variation'])
                && $product->is_purchasable()
                && $product->managing_stock()
                && $product->backorders_allowed()) {

            // As the table option "After to cart adding":
            // 0 stay on the page, 1 redirect to the cart, 2 redirect to the checkout
            $redirect = 0;

            // The table's own button placeholder; an empty quantity means no cap
            return sprintf(
                '<span class="woot-button-buy-pack" data-instant-redirect="%d" data-sold-individually="%d" data-about="simple,%d,,%s"></span>',
                $redirect,
                (int) $product->is_sold_individually(),
                $product->get_id(),
                esc_attr($product->get_sku())
            );
        }

        return $original($post_id);
    };

    return $fields;
}, 33, 3);

Remarques sur ce snippet :

• Réglez $redirect sur la valeur que votre tableau utilise dans Options → Après l’ajout au panier (After to cart adding) ; le snippet ne peut pas lire cette option à votre place.
• WooCommerce vérifie toujours chaque ajout. Les produits sont ajoutés par la requête d’ajout au panier propre à WooCommerce : ils ne sont donc acceptés que parce que le produit autorise les commandes en rupture de stock. Avec Autoriser, mais avertir le client (Allow, but notify customer), le panier et la commande les signalent comme étant en rupture de stock, comme sur la fiche produit.
• Un produit variable dont le stock est suivi au niveau du parent, à 0, masque toujours le bouton de sa fenêtre contextuelle. Suivez plutôt le stock au niveau des variations.
• Le snippet réutilise le balisage du bouton du tableau. Testez-le après les mises à jour importantes du plugin, comme n’importe quelle personnalisation.

N’obtenez pas le même résultat en modifiant profiles/woocommerce/views/add_to_cart.php ou woocommerce-cart.js dans le dossier du plugin. Cela fonctionne jusqu’à la prochaine mise à jour, qui rétablit silencieusement les fichiers d’origine.

Afficher « Sur commande » dans la colonne État du stock

La colonne État du stock (Stock status) affiche une coche aussi bien pour En stock (In stock) que pour Sur commande (On backorder), et une croix pour En rupture de stock (Out of stock). Pour indiquer aux clients qu’un produit sera expédié plus tard, remplacez l’affichage de la colonne avec le même filtre. Le texte provient de WooCommerce : il est donc déjà traduit dans la langue de votre boutique :

/*
 * Products tables: show "On backorder" instead of the check mark
 * in the Stock status column. Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_profile_extend', function ($fields, $action, $shortcode_args) {
    if (isset($fields['stock_status']['action'])) {
        $fields['stock_status']['action'] = function ($post_id) {
            $product = wc_get_product($post_id);
            $status = $product ? $product->get_stock_status() : 'outofstock';

            if ('onbackorder' === $status) {
                $labels = wc_get_product_stock_status_options();
                return '<span class="woot-stock-backorder">' . esc_html($labels['onbackorder']) . '</span>';
            }

            if ('instock' === $status) {
                return '<span class="woot-html-check"><i class="woot-icon">&#xe804;</i></span>';
            }

            return '<span class="woot-html-cross"><i class="woot-icon">&#xe805;</i></span>';
        };
    }
    return $fields;
}, 33, 3);

Mettez en forme l’étiquette avec la classe woot-stock-backorder dans l’onglet CSS personnalisé (Custom CSS) du tableau ou dans votre thème, par exemple en orange.

Produits en rupture de stock absents du tableau

Si les produits sur commande n’apparaissent pas du tout, vérifiez l’onglet Prédéfinition (Predefinition). Son interrupteur En stock uniquement (In stock only) ne conserve que les produits dont l’état du stock est exactement En stock (In stock) : il masque donc les produits sur commande en même temps que les produits épuisés (voir afficher uniquement les produits en stock). L’interrupteur État du stock (Stock status) du filtre côté public fonctionne différemment : il ne masque que les produits En rupture de stock (Out of stock). Pour ne masquer que les produits épuisés dans un tableau sans filtre, désactivez En stock uniquement (In stock only) et ajoutez ceci :

/*
 * Products tables: hide out-of-stock products, keep products on backorder.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_wp_query_args', function ($args, $table_id) {
    if (in_array((int) $table_id, [5, 8], true)) { // IDs of your tables
        $args['meta_query'][] = [
            'key'     => '_stock_status',
            'value'   => 'outofstock',
            'compare' => '!=',
        ];
    }
    return $args;
}, 10, 2);

Limites de quantité : stock, maximum personnalisé et plugins de quantité min/max/pas

Le champ de quantité du tableau démarre toujours à 1 et avance de 1 en 1. Son maximum est la quantité en stock pour les produits dont le stock est suivi, et 9999 sinon ; pour les produits vendus individuellement, le champ est verrouillé à 1. Demander plus que le maximum affiche Max count of products is: sans rien ajouter. Relever le maximum au-delà du stock n’a de sens que pour les produits qui autorisent les commandes en rupture de stock, ce que fait déjà le snippet ci-dessus, car WooCommerce refuse lui-même les quantités supérieures au stock pour tous les autres.

Pour définir un maximum inférieur par clic, par exemple 10, modifiez les champs une fois que le tableau a dessiné ses lignes :

/*
 * Products tables: at most 10 items per click (or the stock, if lower).
 * Site footer: a JavaScript snippet in a code snippets plugin,
 * or the footer scripts field of your theme.
 */
document.addEventListener('table23-after-build-rows', function (e) {
    var table = e.detail.otable.table;

    // wait until the table has created its quantity boxes
    setTimeout(function () {
        table.querySelectorAll('.woot-add-to-cart-input').forEach(function (input) {
            var max = parseInt(input.getAttribute('max'), 10) || 10;
            input.setAttribute('max', Math.min(max, 10));
        });
    }, 0);
});

Cela limite un clic, pas la commande : un client peut cliquer à nouveau. Une vraie limite par commande relève de WooCommerce, généralement via un plugin de règles de quantité.

Ces plugins définissent des valeurs minimale, maximale et de pas sur les champs de quantité propres à WooCommerce. Le champ du tableau ne lit pas ces valeurs. Si le plugin vérifie aussi les quantités lors de l’ajout d’un produit au panier, via la validation d’ajout au panier de WooCommerce, une quantité incorrecte envoyée depuis le tableau est refusée et le tableau affiche son message indiquant que le produit ne peut pas être ajouté ; le champ lui-même démarre toujours à 1 et avance de 1 en 1. Si vous avez besoin du champ du plugin dans le tableau, affichez le formulaire d’ajout au panier du produit dans une colonne personnalisée, comme décrit dans comment ajouter une colonne personnalisée aux tableaux.

Liste de vérification

• Produits en rupture de stock suivis à 0 ou moins : le snippet woot_profile_extend pour la colonne Panier (Cart) est actif, ou le suivi du stock est désactivé pour eux.
• $redirect dans le snippet correspond à Après l’ajout au panier (After to cart adding) de votre tableau.
• En stock uniquement (In stock only) dans Prédéfinition (Predefinition) est désactivé si les produits sur commande doivent figurer dans la liste.
• La colonne État du stock (Stock status) affiche Sur commande (On backorder) là où c’est pertinent.
• Test effectué déconnecté, après avoir vidé le cache des pages : le bouton apparaît, il est possible d’ajouter plus que la quantité en stock et, avec Autoriser, mais avertir le client (Allow, but notify customer), le panier signale les articles comme étant en rupture de stock.

Si un produit en rupture de stock ne peut toujours pas être ajouté depuis le tableau, posez la question sur le forum de support WOOT en indiquant ses réglages de stock et le message affiché par le tableau.