Produktlinks in der WooCommerce Produkttabelle im selben Tab öffnen

In einer WooCommerce Produkttabelle öffnen sich Links standardmäßig in einem neuen Tab: der Produkttitel, das Vorschaubild, Kategorie- und Schlagwort-Links sowie die Buttons Warenkorb (Shop cart) und Kasse (Checkout) des Tabellen-Warenkorbs. Die Idee dahinter ist, die Tabellenseite offen zu halten, während der Kunde ein Produkt ansieht, doch viele Shops möchten, dass jeder Link im selben Tab oder gar nicht geöffnet wird. In den Tabelleneinstellungen gibt es keinen Schalter für das Link-Ziel. Produkttitel ändern Sie mit einem Filter; die übrigen Links brauchen ein paar Zeilen JavaScript. Beides steht unten, zusammen mit den Optionen, die Links ganz entfernen.

Welche Links sich in einem neuen Tab öffnen und was sie steuert

Der neue Tab kommt vom HTML-Attribut target="_blank". Das Plugin setzt es an verschiedenen Stellen, daher hängt die Lösung vom Link ab:

Bearbeiten Sie die Plugin-Dateien nicht, um diese Attribute zu ändern. Jedes Update ersetzt sie, und die Links öffnen sich ohne Vorwarnung wieder in einem neuen Tab. Der Filter und das Skript unten liegen in Ihrem Theme oder einem Snippet-Plugin und überstehen Updates.

Links der Produkttitel im selben Tab öffnen

Der Titel-Link bezieht sein Ziel aus dem Filter woot_link_target_type. Geben Sie _self zurück, und Titel öffnen sich in jeder Tabelle im selben Tab, einschließlich des Warenkorb-Popups und von [woot_cart]:

/*
 * Products tables: open product title links in the same tab.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_link_target_type', function ($target) {
    return '_self';
});

Das neue Ziel wird beim Aufbau der Zeilen durch den Server geschrieben. Laden Sie die Seite daher vor dem Testen unter Umgehung des Browser-Caches neu (oder leeren Sie den Seiten-Cache). Variationszeilen im Variationen-Popup zeigen den Titel als reinen Text, dort gibt es also keinen Link zu ändern.

Vorschaubilder, Warenkorb- und Kasse-Buttons: ein kleines Skript

Die übrigen Ziele schreibt der Code des Plugins, teils im Browser, nachdem die Tabelle oder der Warenkorb gezeichnet wurde. Statt jedes davon nach jedem Neuzeichnen umzuschreiben, wartet das Skript unten auf einen Klick auf einen Link innerhalb einer Produkttabelle, eines Tabellen-Popups oder des Tabellen-Warenkorbs und entfernt target="_blank" von diesem Link, kurz bevor der Browser ihm folgt. Es funktioniert für Zeilen, die später durch Seitenwechsel, Sortieren, Filtern oder Mehr laden (load more) nachgeladen werden, und für Popups, die zu jedem Zeitpunkt geöffnet werden.

/*
 * Products tables: open links from tables, table popups and the table cart
 * in the same tab. Add it to the footer of the site: a JavaScript snippet in
 * a code snippets plugin, or the footer scripts field of your theme.
 */
document.addEventListener('click', function (e) {
    var link = e.target.closest('a[target="_blank"]');

    if (link && link.closest('.woot-data-table, .woot-dynamic-popup-wrapper, .woot-woocommerce-cart, .woot-cart-shortcode')) {
        link.removeAttribute('target');
    }
}, true);

Einige Hinweise zu diesem Skript:

• Es lauscht in der Capture-Phase (das true am Ende), läuft also, bevor der Klick den Link erreicht, und der Browser öffnet den Link mit bereits entferntem Ziel.
• Strg+Klick, Cmd+Klick und die mittlere Maustaste öffnen weiterhin einen neuen Tab, wenn der Kunde das möchte.
• Es betrifft auch den Button externer Produkte. Damit Affiliate-Links in einem neuen Tab bleiben, ändern Sie den ersten Selektor in 'a[target="_blank"]:not(.woot-add-to-cart-btn)'.
• Wenn Sie es verwenden, brauchen Sie den PHP-Filter oben nicht, auch wenn es nicht schadet, beides zu behalten.

Wenn Sie die Warenkorb-Buttons nur entfernen statt ändern wollen, bietet der Tab Einstellungen (Settings) von WOOT die Optionen Warenkorb-Button ausblenden (Hide shop cart button) und Kasse-Button ausblenden (Hide checkout button), die Warenkorb (Shop cart) und Kasse (Checkout) aus dem Tabellen-Warenkorb-Panel und seinem Popup entfernen.

Produktlinks in der Tabelle stattdessen deaktivieren

Manchmal ist die Tabelle das gesamte Einkaufserlebnis, und von ihr aus sollen keine Produktseiten erreichbar sein. Titel, Vorschaubilder und Begriffe lassen sich ohne Links anzeigen. Welche Einstellung gilt, hängt davon ab, ob die Tabelle eine gespeicherte Tabelle ([woot id=...]) oder eine Tabelle ohne ID ist, etwa ein einfaches [woot], das Warenkorb-Popup oder [woot_cart].

In einer gespeicherten Tabelle

• Titel: Öffnen Sie die Tabelle, gehen Sie zum Tab Spalten (Columns), klicken Sie beim Button Bearbeiten (edit) (Stift) der Titel-Spalte und schalten Sie Als Text anzeigen (Display as text) ein.
• Vorschaubild: Schalten Sie im selben Popup der Vorschaubild-Spalte Kein Link (No Link) ein.
• Kategorien, Schlagwörter, Attribute: Jede Taxonomie-Spalte hat ihren eigenen Schalter Als Text anzeigen (Display as text).
• Pro Seite: Die Shortcode-Attribute post_title_as_text=1 und disable_link_on_thumb=1 bewirken dasselbe für eine einzelne Platzierung der Tabelle und haben Vorrang vor den Spalteneinstellungen.

Im Warenkorb-Popup, in [woot_cart] und in Tabellen ohne ID

Diese Tabellen haben keine Spalteneinstellungen, daher steuern zwei Filter sie. woot_disable_all_links_on_titles macht Titel zu Text, und woot_disable_all_links_on_thumbs entfernt den Link des Vorschaubilds:

/*
 * Products tables: no product links in the cart popup, [woot_cart]
 * and tables without an ID. Child theme functions.php or a code snippets plugin.
 */
add_filter('woot_disable_all_links_on_titles', '__return_true');
add_filter('woot_disable_all_links_on_thumbs', '__return_true');

Der Vorschaubild-Filter legt auch den Standard für gespeicherte Tabellen fest: Er gilt für jede Tabelle, bei der der Schalter Kein Link (No Link) der Vorschaubild-Spalte nie geändert wurde. Sobald dieser Schalter gespeichert wurde, ob ein oder aus, gilt die Spalteneinstellung. Der Titel-Filter wirkt sich auf gespeicherte Tabellen überhaupt nicht aus; verwenden Sie dort Als Text anzeigen (Display as text). Das ist zugleich die saubere Antwort für Produktlinks im Warenkorb-Popup, die die Spaltenschalter nicht erreichen: Ein CSS-Behelf mit pointer-events ist nicht nötig.

Das Ergebnis prüfen

• Leeren Sie den Seiten-Cache und laden Sie die Seite mit der Tabelle in einem privaten Fenster neu.
• Klicken Sie mit der rechten Maustaste auf einen Titel, wählen Sie Untersuchen (Inspect) und sehen Sie sich den Link an: Nach dem PHP-Filter zeigt er target="_self".
• Klicken Sie auf ein Vorschaubild, einen Kategorie-Link und im Warenkorb-Popup auf Warenkorb (Shop cart) und Kasse (Checkout): Jeder sollte sich im selben Tab öffnen, wenn das Skript aktiv ist.
• Öffnet sich ein Link weiterhin in einem neuen Tab, sehen Sie sich den Seitenquelltext an und prüfen Sie, ob das Skript auf der Tabellenseite eingebunden ist (Snippet-Plugins können ein Snippet auf bestimmte Seiten beschränken), und suchen Sie dann im Tab Konsole (Console) der Entwicklertools nach Fehlern.

Die Seite zum Shortcode [woot_cart] beschreibt den Tabellen-Warenkorb ausführlicher. Ignoriert ein Link in Ihrer Tabelle diese Einstellungen weiterhin, fragen Sie im WOOT-Support-Forum nach und nennen Sie uns, um welche Spalte oder welchen Button es sich handelt.