WooCommerce: Mehrere Produkte aus einer Produkttabelle in den Warenkorb legen

Kunden, die zehn oder vierzig Artikel bestellen, sollten dafür nicht zehn oder vierzig Produktseiten öffnen müssen. WooCommerce selbst legt pro Klick ein Produkt in den Warenkorb. Um in WooCommerce mehrere Produkte von einer Seite aus in den Warenkorb zu legen, bietet eine WOOT-Produkttabelle eine Lösung: Der Kunde markiert die Zeilen, legt für jede eine Menge fest und sendet alle mit einem Klick in den Warenkorb. Im Folgenden erfahren Sie, wie Sie das einrichten, was „Alle auswählen“ tatsächlich auswählt, was nach dem Hinzufügen geschieht und wie variable Produkte dazu passen.

Die Tabelle einrichten, um mehrere Produkte in den Warenkorb zu legen

Alles geschieht in der Spalte Warenkorb (Cart) (Feldschlüssel add_to_cart). Fügen Sie sie in der Registerkarte Spalten (Columns) der Tabelle hinzu; ein einfacher [woot]-Shortcode ohne Tabellen-ID enthält sie bereits. Bei einem einfachen Produkt enthält die Zelle:

• ein Mengenfeld;
• eine Checkbox, die das Produkt zum Hinzufügen markiert;
• die eigene Schaltfläche In den Warenkorb (Add to cart) des Produkts mit einem kleinen Zähler, wie viele davon bereits im Warenkorb liegen.

Die Kopfzeile der Spalte enthält eine Checkbox mit dem Tooltip Alle Produkte auswählen (Select all products). Sobald mindestens eine Zeile markiert ist, erscheint über der Kopfzeile die Schaltfläche Ausgewählte hinzufügen (add selected). Der Ablauf für den Kunden:

1. Die Tabelle per Filter oder Suche auf die benötigten Produkte eingrenzen.
2. Die Zeilen markieren (oder die Checkbox in der Kopfzeile verwenden) und in jeder markierten Zeile die Menge festlegen.
3. Ausgewählte hinzufügen (add selected) anklicken.

Alle markierten Produkte werden in einer einzigen Anfrage gesendet, jeweils mit der Menge aus ihrer Zeile. Die Checkboxen werden zurückgesetzt, eine Meldung bestätigt die Aktualisierung, und die Zähler sowie die Warenkorbinformationen der Tabelle werden aktualisiert. Die Texte add selected, Select all products und Add to cart lassen sich im Vokabular (Vocabulary) des Plugins ändern.

Beide Steuerelemente der Kopfzeile setzen die Kopfzeile voraus. Wird die Tabelle auf einem schmalen Bildschirm in der Kompaktansicht angezeigt (Option Breite der Kompaktansicht (Compact view width)), ist die Kopfzeile ausgeblendet, und Kunden legen Produkte einzeln über die Schaltflächen in den Karten in den Warenkorb; siehe die Produkttabelle auf Mobilgeräten.

Was sich auswählen lässt: einfache, variable und gruppierte Produkte

Ein Kunde kann also im Popup mehrere Variationen desselben T-Shirts markieren und gemeinsam hinzufügen, aber ein variables Produkt nicht direkt in der Haupttabelle markieren, weil WooCommerce wissen muss, welche Variation hinzugefügt werden soll. Wie das Popup aussieht und welche Spalten es zeigt, steht in Variations-Popup anpassen.

Das Mengenfeld folgt den Grenzen des Produkts: Verwaltet WooCommerce den Lagerbestand, ist das Maximum der Lagerbestand, und ein einzeln verkauftes Produkt ist auf 1 festgelegt. Zu Lieferrückständen sowie Mindest- und Höchstmengen siehe Lieferrückstände und Mengenbegrenzungen.

„Alle auswählen“ fügt nur die Produkte der aktuellen Seite hinzu

Die Checkbox in der Kopfzeile markiert die Zeilen, die sich in diesem Moment im Browser in der Tabelle befinden, also die aktuelle Seite. Produkte auf anderen Seiten werden erst geladen, wenn der Kunde diese Seiten öffnet; sie lassen sich also nicht markieren, und das Plugin kann nicht „alle Produkte aller Seiten“ in einer Aktion hinzufügen. Damit Kunden mehr auf einmal hinzufügen können, zeigen Sie mehr Zeilen an:

• Erhöhen Sie Standard pro Seite (Per page default) in den Optionen (Options) der Tabelle und bieten Sie unter Werte pro Seite (Per page values) größere Werte an, zum Beispiel 25,50,100. In einem Shortcode: [woot id=12 per_page=50 per_page_sel_pp="25,50,100"].
• Aktivieren Sie Schaltfläche „Mehr laden“ verwenden (Use load more button). Mit Load More geladene Zeilen werden unter den vorhandenen eingefügt, sodass Select all alles auswählt, was bisher geladen wurde.
• Lassen Sie Kunden die Tabelle zuerst mit dem Filter eingrenzen und dann alles auf einer Seite markieren.

Halten Sie die Seitengrößen in einem vernünftigen Rahmen. Jede Zeile wird auf dem Server erstellt, und jedes markierte Produkt durchläuft in derselben Anfrage die Warenkorb-Prüfungen von WooCommerce. Eine Seite mit mehreren hundert Produkten lädt daher langsam, und beim Hinzufügen aller Produkte kann das Zeitlimit des Servers erreicht werden.

Nach dem Hinzufügen: auf der Seite bleiben, Warenkorb öffnen oder zur Kasse gehen

Die Option Nach dem Hinzufügen zum Warenkorb (After to cart adding) in den Optionen der Tabelle hat drei Werte: Auf derselben Seite bleiben (Stay on the same page), Zur Warenkorbseite weiterleiten (Redirect to the cart page) und Zur Kassenseite weiterleiten (Redirect to the checkout page). Sie gilt für die Schaltfläche In den Warenkorb (Add to cart) einfacher Produkte in dieser Tabelle, nachdem WooCommerce bestätigt hat, dass das Produkt im Warenkorb liegt. add selected und die Schaltflächen in den Popups für Variationen und gruppierte Produkte lassen den Kunden auf der Seite, was sich für Sammelbestellungen eignet: mehrere Produktgruppen hinzufügen und danach zum Warenkorb gehen.

Soll jedes Hinzufügen aus einer Tabelle den Warenkorb öffnen, nutzen Sie die Ereignisse, die die Tabelle nach einem erfolgreichen Hinzufügen auslöst, statt ihre Klick-Handler zu ersetzen. Eine Weiterleitung, die direkt beim Klick startet, verlässt die Seite, bevor das Produkt hinzugefügt wurde. Das zeigt sich als leerer Warenkorb bis zum nächsten Neuladen.

/*
 * 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
});

Um stattdessen zur Kasse zu gehen, ersetzen Sie cart_link durch checkout_link.

Den Warenkorb neben der Tabelle anzeigen

Kunden, die viele Produkte hinzufügen, möchten sehen, was sie gesammelt haben, ohne die Seite zu verlassen.

• Warenkorb anzeigen (Show shop cart) (Optionen) setzt über die Tabelle eine Schaltfläche mit der Anzahl der Artikel und der Zwischensumme sowie die Schaltflächen Warenkorb (Shop cart) und Kasse (Checkout). Ein Klick auf die Info-Schaltfläche öffnet den Warenkorb als Tabelle in einem Popup, in dem Mengen geändert, Produkte entfernt oder der gesamte Warenkorb geleert werden können. Positionen von Warenkorb/Sortierung (Cart/Sorting positions) legt die Seite fest. Die beiden Schaltflächen öffnen sich in einem neuen Tab; sie im selben Tab zu öffnen erfordert ein kurzes Skript.
• Die Einstellungen des Plugins bestimmen, welche Spalten diese Warenkorbtabelle hat (Spalten des Warenkorbs (Shop cart columns)), und können die beiden Schaltflächen ausblenden (Warenkorb-Schaltfläche ausblenden (Hide shop cart button), Kassen-Schaltfläche ausblenden (Hide checkout button)).
• Der Shortcode [woot_cart] zeigt dieselbe Warenkorbtabelle an beliebiger Stelle, zum Beispiel in einer Seitenleiste neben einem Bestellformular.
• Bereits hinzugefügte Produkte ausblenden (Hide added to cart products) (Optionen) lässt Produkte, die schon im Warenkorb liegen, bei jedem Laden von Zeilen aus der Tabelle weg (andere Seite, Filter, Neuladen), sodass eine lange Bestellliste kürzer wird, während der Kunde sie abarbeitet.

Die Tabelle aktualisiert ihre eigenen Warenkorbinformationen selbst. Ob der Mini-Warenkorb des Themes im Header mitzieht, hängt vom Theme ab; falls nicht, siehe Mini-Warenkorb wird nach dem Hinzufügen nicht aktualisiert.

Wenn ausgewählte Produkte nicht im Warenkorb ankommen

• Einige der markierten Produkte fehlen. WooCommerce hat sie abgelehnt, zum Beispiel weil die Menge höher als der Lagerbestand ist oder ein einzeln verkauftes Produkt bereits im Warenkorb liegt. Der Grund wird als WooCommerce-Hinweis gespeichert und erscheint auf der nächsten Seite, die Hinweise anzeigt, meist der Warenkorbseite.
• Der Warenkorb im Header ändert sich erst nach einem Neuladen. Die Produkte liegen im Warenkorb, aber der Mini-Warenkorb des Themes folgt der Tabelle nicht (siehe den oben verlinkten Artikel zum Mini-Warenkorb), oder ein Seiten-Cache liefert Seiten mit einem alten Warenkorb aus. Schließen Sie den Warenkorb, die Kasse und die Seiten mit Tabellen vom Seiten-Caching aus.
• Beim Klick passiert nichts. Öffnen Sie die Browser-Konsole: Ein JavaScript-Fehler eines anderen Skripts oder benutzerdefinierter Code, der die Klick-Handler der Tabelle ersetzt hat, verhindert das Hinzufügen. Entfernen Sie solchen Code und nutzen Sie die oben gezeigten Ereignisse.
• Ein variables Produkt hat keine Checkbox. Das ist so vorgesehen: Öffnen Sie select [N] und markieren Sie die Variationen im Popup.

Wenn der Warenkorb die ausgewählten Produkte weiterhin nicht erhält, eröffnen Sie im WOOT-Supportforum ein Thema mit dem Link zur Seite und den Schritten, die fehlschlagen. Wir sehen uns das an.