WooCommerce-Produkttabelle mobil: Kompaktansicht und responsives Setup

Eine WooCommerce-Produkttabelle mit acht Spalten passt nicht auf ein hochkant gehaltenes Smartphone: Entweder wird der Text in schmale Spalten gequetscht, oder der Kunde scrollt seitwärts, um Preis und Warenkorb-Schaltfläche zu finden. Für eine WooCommerce-Produkttabelle auf Mobilgeräten hat WOOT drei Werkzeuge: eine Kompaktansicht, die jede Zeile in eine Karte verwandelt, das Ausblenden einzelner Spalten je nach Bildschirmbreite oder für Touch-Geräte und seitliches Scrollen für den Rest. Im Folgenden erfahren Sie, wie jedes funktioniert und welche kleinen Details die Tabelle auf dem Smartphone angenehm bedienbar machen.

Kompaktansicht: Jedes Produkt wird zur Karte

Legen Sie Breite der Kompaktansicht (Compact view width) in der Registerkarte Optionen (Options) der Tabelle fest. Ist das Browserfenster so viele Pixel breit oder schmaler, wechselt die Tabelle in die Kompaktansicht:

• die Kopfzeile und die Fußzeile mit den Spaltentiteln werden ausgeblendet;
• jedes Produkt wird zu einer Zelle in voller Breite, in der die Felder in der Reihenfolge der Spalten untereinander stehen;
• jedes Feld beginnt mit dem Titel seiner Spalte, zum Beispiel Preis: 24,00 $, sodass der Kunde weiterhin weiß, was der Wert bedeutet.

Der Standardwert -1 schaltet die Kompaktansicht aus. 600 deckt hochkant gehaltene Smartphones ab, 800 oder 900 auch kleine Tablets. Das Plugin vergleicht die Breite des Browserfensters, nicht den Gerätetyp; Sie können es also am Computer ausprobieren, indem Sie das Fenster schmal ziehen: Die Tabelle baut sich nach einer Größenänderung neu auf, auf dem Smartphone nach dem Drehen. In einem Shortcode: [woot id=12 compact_view_width=600].

Drei Folgen der ausgeblendeten Kopfzeile:

• Kunden können nicht durch Klick auf Spaltentitel sortieren. Aktivieren Sie daher Sortier-Dropdown anzeigen (Show Sorting Dropdown) und bieten Sie einige nützliche Sortierungen an (Preis, Name, Beliebtheit); mehr dazu in Sortierung der Produkttabelle.
• Select all products und add selected befinden sich in der Kopfzeile der Spalte Warenkorb (Cart) und stehen in der Kompaktansicht daher nicht zur Verfügung; jede Karte behält ihre eigene Schaltfläche In den Warenkorb (Add to cart). Die Zeilen-Checkboxen haben dort keine Funktion, und dieses CSS blendet sie nur in der Kompaktansicht aus (Karten werden aus div-Elementen aufgebaut, die normale Ansicht aus td-Zellen):

  .woot-data-table div.table23_td_add_to_cart .woot-checkmark-container {
      display: none;
  }

• Die Reihenfolge der Spalten wird zur Reihenfolge der Zeilen in jeder Karte: Setzen Sie Titel, Preis und die Spalte Warenkorb (Cart) nach vorn und lange Texte nach hinten, in der Registerkarte Spalten (Columns).

Die Spaltentitel in den Karten ausblenden

Bei manchen Feldern nimmt der Titel vor dem Wert nur Platz weg: Ein Vorschaubild braucht kein „Thumbnail:“, und die Warenkorb-Schaltflächen erklären sich selbst. Jeder Titel ist ein span mit der Klasse table23_td_cell_title und existiert nur in der Kompaktansicht, daher genügt eine einfache CSS-Regel. Tragen Sie sie unter Design → Customizer → Zusätzliches CSS ein:

/* WOOT compact view: hide the column titles of selected fields */
.woot-data-table .table23_td_thumbnail .table23_td_cell_title,
.woot-data-table .table23_td_add_to_cart .table23_td_cell_title {
    display: none;
}

/* or hide all of them */
.woot-data-table .table23_td_cell_title {
    display: none;
}

Jedes Feld in einer Karte hat die Klasse table23_td_ plus seinen Feldschlüssel: table23_td_post_title, table23_td_price, table23_td_sku oder den Meta-Schlüssel eines Feldes aus der Registerkarte Meta. Lassen Sie in der Registerkarte Eigenes CSS (Custom CSS) der Tabelle selbst .woot-data-table weg und schreiben Sie pro Regel einen Selektor: Das Plugin setzt die ID der Tabelle vor jede Regel. Möglicherweise sehen Sie Regeln, die mit .table23-in-compact-mode beginnen; das Plugin fügt diese Klasse erst hinzu, nachdem die Fenstergröße geändert wurde, sodass solche Regeln die erste Ansicht auf einem Smartphone verfehlen können, während die obigen Regeln von Anfang an greifen.

Spalten auf kleinen Bildschirmen oder Touch-Geräten ausblenden

Weniger Spalten helfen in beiden Ansichten. Es gibt zwei Einstellungen, die unterschiedliche Fragen beantworten.

Für die meisten Shops ist Auf kleinem Bildschirm ausblenden (Hide on small screen) die richtige Wahl: Artikelnummer, Galerie, Gewicht oder eine lange Attributspalte können unterhalb von 600 oder 800 Pixeln entfallen, während der Kunde Titel, Preis und Warenkorb behält. Eine Tabelle, die nur aus Shortcode-Attributen aufgebaut ist, nutzt hide_on_mobile für das Verhalten auf Touch-Geräten, mit einer durch Kommas getrennten Liste von Feldschlüsseln: [woot columns="thumbnail,post_title,sku,price,add_to_cart" hide_on_mobile="sku"].

Was dann noch breiter als der Bildschirm ist, lässt sich seitwärts scrollen: Auf Touch-Geräten scrollt der Tabellenbereich horizontal, und auf anderen Bildschirmen erhalten breite Tabellen eine horizontale Bildlaufleiste. Das ist für eine zusätzliche Spalte akzeptabel, aber nicht für fünf; dafür gibt es die Kompaktansicht.

Bildvorschau beim Überfahren und Touchscreens

Die Option Vorschau beim Überfahren (Preview on hover) der Spalte Vorschaubild (Thumbnail) (die Breite der Vorschau in Pixeln, standardmäßig 400) zeigt ein großes Bild, wenn sich die Maus über einem Vorschaubild befindet. Smartphones kennen kein Überfahren, daher hängt das Plugin die Vorschau nicht an, wenn WordPress ein Mobilgerät erkennt (die Prüfung wp_is_mobile(): Smartphones, Android-Tablets, Kindle und Ähnliches). Ein iPad, das Desktop-Websites anfordert, was Safari unter iPadOS standardmäßig tut, wird nicht als mobil erkannt, und dort kann ein Tippen die Vorschau öffnen.

Um die Vorschau überall abzuschalten, setzen Sie Vorschau beim Überfahren (Preview on hover) auf -1 oder fügen Sie dem Shortcode preview_image_width=-1 hinzu. Vorschaubilder verlinken außerdem in einem neuen Tab auf die Produktseite; damit Besucher im selben Tab bleiben, siehe Produktlinks im selben Tab öffnen, oder aktivieren Sie die Option Kein Link (No Link) des Vorschaubilds, wenn das Bild gar kein Link sein soll.

Fliegende Kopfzeile, Filter und weitere Details auf kleinen Bildschirmen

• Fliegende Kopfzeile. Fliegende Kopfzeile verwenden (Use flying header) hält die Spaltentitel sichtbar, während der Kunde durch eine lange Tabelle scrollt. In der Kompaktansicht wird sie automatisch ausgeschaltet, da es keine Kopfzeile gibt. Kollidiert sie auf Tablets mit dem Sticky-Menü Ihres Themes, schalten Sie sie aus oder verwenden Sie use_flow_header=0 im Shortcode.
• Der Filter. Dropdowns stehen nebeneinander, mindestens 150 Pixel breit, während Bereichsregler und Textfelder die volle Breite einnehmen; auf einem Smartphone schiebt ein Filter mit mehreren Elementen die Tabelle daher nach unten. Filterformular ausblenden (Hide filter form) in den Optionen klappt den Filter hinter einer Schaltfläche zum Ein- und Ausblenden zusammen, sodass die Produkte auf dem ersten Bildschirm bleiben.
• Zeilen pro Seite. Zehn Produkte sind als Karten bereits ein langer Bildlauf. Halten Sie Standard pro Seite (Per page default) klein oder verwenden Sie Schaltfläche „Mehr laden“ verwenden (Use load more button), die Produkte darunter anfügt, statt zu blättern.
• Menge und Warenkorb. Das Mengenfeld und die Schaltfläche In den Warenkorb (Add to cart) funktionieren in einer Karte genauso; geben Sie der Spalte Warenkorb (Cart) eine frühe Position, damit Kunden nicht am Preis vorbeiscrollen müssen, um sie zu finden.

Auf einem Smartphone testen

• Ziehen Sie das Desktop-Browserfenster unter die Breite der Kompaktansicht (Compact view width) zusammen und prüfen Sie, ob sich die Tabelle in Karten verwandelt.
• Laden Sie die Seite im Gerätemodus des Browsers nach der Auswahl eines Smartphones neu: Touch-Unterstützung und User-Agent werden beim Laden der Seite gelesen, daher ändern sich der Schalter Mobil (Mobile) und die Bildvorschau erst nach einem Neuladen.
• Öffnen Sie die Seite auf einem echten Smartphone, abgemeldet und nach dem Leeren des Seiten-Caches, und prüfen Sie Hoch- und Querformat.
• Sehen Sie sich die erste Karte an: Wenn Ihnen die Reihenfolge der Zeilen nicht passt, ändern Sie die Reihenfolge der Spalten, nicht das CSS.

Wenn die Tabelle weiterhin nicht auf den Bildschirm passt oder die Karten mit Ihrem Theme fehlerhaft aussehen, eröffnen Sie im WOOT-Supportforum ein Thema mit dem Link zur Seite und dem Smartphone-Modell. Wir prüfen das.