Shopseiten und die Kassen-Blöcke

Modul 2: Installieren und einrichten · Lesezeit: 9 Minuten

Lernziel: Nach dieser Lektion erkennen Sie die Shopseiten von WooCommerce und ordnen sie richtig zu. Außerdem wählen Sie bewusst zwischen den Blöcken und den Shortcodes für Warenkorb und Kasse.

Kernbegriffe: Shopseite, Warenkorb, Kasse, Ihr Konto, AGB-Seite, Seiteneinrichtung, Blöcke, Shortcodes, Block-Theme, klassisches Theme, Kompatibilität von Erweiterungen, noindex

Vier Seiten mit einer besonderen Rolle

Eine WordPress-Website besteht aus Seiten und Beiträgen (WordPress-Kurs, Lektion 4.2). WooCommerce fügt Produkte als eigenen Inhaltstyp hinzu und gibt einigen gewöhnlichen Seiten eine besondere Rolle. In der Liste unter Seiten sehen diese Seiten aus wie alle anderen, aber WooCommerce weiß, welche Seite welche Aufgabe hat. Das ist in den Einstellungen festgelegt, nicht im Namen oder in der Adresse der Seite.

Da die Zuordnung in den Einstellungen liegt, können Sie den Seiten einen anderen Titel und eine andere Adresse geben. Theehuis Example nennt den Warenkorb "Korb" unter /korb/, und das funktioniert, solange diese Seite in der Seiteneinrichtung als Warenkorb eingetragen ist.

Geht die Zuordnung schief, bemerken Sie das an unerwarteten Stellen. Einige Beispiele, die häufig vorkommen:

• Jemand löscht die Seite Warenkorb, weil sie "doppelt vorhanden war". Danach landet ein Besucher nach In den Warenkorb auf einer Fehlerseite, und manche Themes zeigen den Warenkorb im Kopfbereich nicht mehr an.
• Nach einem Umzug oder Import ist bei Kasse eine andere Seite zugeordnet als die Seite mit dem Kassen-Block. Der Besucher sieht eine leere Seite und kann nicht bestellen.
• Eine zweite Seite "Kasse-2" entsteht, nachdem der Einrichtungsassistent ein zweites Mal gelaufen ist. Die eine Seite ist zugeordnet, die andere steht im Menü.

Prüfen Sie deshalb nach jeder größeren Änderung (Theme, Umzug, Import) in der Seiteneinrichtung, welche Seite zugeordnet ist, und klicken Sie sich zu dieser Seite durch.

Blöcke oder Shortcodes

Warenkorb und Kasse können auf zwei Arten auf die Seite kommen.

Shortcodes sind der ältere Weg: Auf der Seite steht ein kurzer Code in eckigen Klammern, etwa [woocommerce_cart] und [woocommerce_checkout]. WooCommerce ersetzt ihn bei der Anzeige durch das Formular. Die Gestaltung kommt vom Theme, und sehr viele Erweiterungen wurden jahrelang für diese Form entwickelt.

Blöcke sind der neue Weg: Die Seite enthält den Block Warenkorb oder Kasse, aufgebaut aus kleineren Blöcken (Adresse, Versand, Zahlungsart, Übersicht, der Bestellbutton). Sie sehen und bearbeiten sie im Block-Editor (WordPress-Kurs, Lektion 4.1). Die Blöcke kommunizieren über die Store API mit dem Server (Lektion 2.4): Das Formular arbeitet direkt im Browser, ohne die Seite jedes Mal neu zu laden.

Seit WooCommerce 8.3 (November 2023) erhält eine neue Installation die Blöcke. Ein bestehender Shop, der aktualisiert wird, behält, was er hatte. Die Shortcodes bleiben verfügbar.

Was wählen Sie? Einige Fragen helfen dabei:

• Funktionieren Ihre Erweiterungen mit den Blöcken? Das ist die wichtigste Frage. Eine Erweiterung, die der Kasse ein Feld hinzufügt (ein Lieferdatum, eine USt-IdNr., eine Geschenknachricht), muss eigens für die Blöcke angepasst sein. Auf der Seite der Erweiterung steht meist, ob sie "mit dem Kassen-Block kompatibel" ist. Im Editor des Kassen-Blocks kann WooCommerce einen Hinweis zu aktiven Erweiterungen anzeigen, die nicht als kompatibel gekennzeichnet sind.
• Welches Theme verwenden Sie? Mit einem Block-Theme (WordPress-Kurs, Lektion 5.1) passen die Blöcke am besten. Mit einem klassischen Theme funktionieren sie ebenfalls, aber die Gestaltung passt dann weniger selbstverständlich zusammen.
• Müssen Sie den Bestellbutton anpassen? Bei den Blöcken stellen Sie den Text des Buttons im Editor ein. Für die Regeln, die dafür gelten (Lektion 5.4), ist das praktisch.
• Soll die Store API öffentlich sein? Bei Blöcken muss sie erreichbar sein; ein Sicherheits-Plugin, das die REST-API sperrt, legt die Kasse lahm.

Theehuis Example verwendet keine Erweiterungen, die Felder hinzufügen, und hat ein Block-Theme. Der Shop behält die Blöcke. Ein anderer Shop mit einem Lieferdatum-Plugin, das nur mit dem Shortcode funktioniert, wählt vorübergehend den Shortcode und prüft bei jedem größeren Update dieses Plugins erneut.

Wechseln Sie die Form, dann tun Sie das in Ihrem Testshop und testen danach eine komplette Bestellung (Lektion 4.5). WooCommerce bietet unter WooCommerce > Status > Werkzeuge ein Werkzeug, um fehlende Shopseiten neu anzulegen; es erstellt neue Seiten, wandelt bestehende aber nicht um.

Warum Warenkorb und Kasse nicht in Suchmaschinen gehören

Ein Warenkorb ist für jeden Besucher anders und für eine Suchmaschine immer leer. Ein leerer Warenkorb in den Suchergebnissen hilft niemandem. WooCommerce setzt deshalb auf den Seiten Warenkorb, Kasse und Ihr Konto selbst ein noindex: Die Suchmaschine darf die Seite besuchen, nimmt sie aber nicht in die Suchergebnisse auf. Im Quelltext sehen Sie das so:

<meta name='robots' content='noindex, follow' />

Ein SEO-Plugin oder Theme kann diese Zeile überschreiben. Das ist selten beabsichtigt. In der Aufgabe dieser Lektion prüfen Sie, ob sie vorhanden ist.

Dieselben drei Seiten dürfen auch nicht in den Seitencache. WooCommerce sendet Header mit, die Caches mitteilen, dass sie die Seite nicht speichern dürfen. Wie Sie prüfen, ob sich Ihr Cache daran hält, folgt in Lektion 6.4.

Was ein Besucher ohne Warenkorb sieht

Öffnen Sie die Kassenseite ohne etwas im Warenkorb, passiert etwas anderes als mit Artikeln darin:

• Mit den Blöcken zeigt die Kassenseite meist einen Hinweis, dass der Warenkorb leer ist, mit einem Button zurück zum Shop.
• Mit dem Shortcode leitet WooCommerce Sie oft zum Warenkorb weiter.

Beides ist normal. Die Prüfung in dieser Lektion berücksichtigt das: Das Programm legt nie etwas in Ihren Warenkorb und prüft nur, was ein Besucher ohne Warenkorb zu sehen bekommt.

In der Praxis: So sieht es in WooCommerce aus

Bei anderen Themes und Hostern funktioniert es ähnlich; nur die Gestaltung unterscheidet sich.

1. Gehen Sie zu WooCommerce > Einstellungen > Erweitert (Advanced) und öffnen Sie Seiteneinrichtung (Page setup). Notieren Sie, welche Seite bei Warenkorb, Kasse, Ihr Konto und Allgemeine Geschäftsbedingungen eingetragen ist.
2. Klicken Sie unter Seiten auf jede dieser Seiten und prüfen Sie, ob der Block (oder der Shortcode) darauf steht.
3. Öffnen Sie die Kassenseite im Editor. Klicken Sie auf den Block Kasse und sehen Sie sich die Bestandteile in der Listenansicht an: Kontaktdaten, Lieferadresse, Versandoptionen, Zahlungsoptionen, Anmerkung, Bedingungen, der Button.
4. Prüfen Sie im Editor des Kassen-Blocks (und bei den Erweiterungen selbst), ob ein Hinweis zu Erweiterungen angezeigt wird, die nicht mit den Blöcken kompatibel sind.
5. Öffnen Sie den Warenkorb in einem privaten Fenster und sehen Sie sich den Quelltext an (Strg+U): Suchen Sie nach noindex.

Zusammenfassung

• WooCommerce gibt vier Seiten eine Rolle (Shop, Warenkorb, Kasse, Ihr Konto) sowie der AGB-Seite; die Zuordnung steht in den Einstellungen, nicht im Namen.
• Nach einem Umzug, Import oder Theme-Wechsel prüfen Sie die Zuordnungen in der Seiteneinrichtung.
• Neue Shops erhalten seit WooCommerce 8.3 die Blöcke; die Shortcodes gibt es weiterhin. Wählen Sie anhand Ihrer Erweiterungen und Ihres Themes.
• Die Blöcke benötigen die Store API; sperren Sie die REST-API nicht.
• Warenkorb, Kasse und Ihr Konto erhalten von WooCommerce ein noindex und gehören nicht in den Cache.

Quiz

Aufgabe

Aufgabe A2.2: Ihre Shopseiten. Geben Sie die Adresse Ihres (Test-)Shops ein sowie die Adressen Ihres Warenkorbs, Ihrer Kassenseite und von Ihr Konto (Pfad, etwa /warenkorb/, oder die vollständige URL auf demselben Host). Das Programm ruft jede Seite einmal ab, ohne Cookies und ohne etwas in den Warenkorb zu legen.

Pro Seite ist das Ergebnis gut, wenn:

• die Seite über https mit Status 200 antwortet;
• das HTML ein Merkmal von WooCommerce enthält: für den Warenkorb den Block wp-block-woocommerce-cart oder die Body-Klasse woocommerce-cart, für die Kasse wp-block-woocommerce-checkout oder woocommerce-checkout, für Ihr Konto woocommerce-account oder ein Anmeldeformular von WooCommerce;
• ein noindex vorhanden ist (Meta-Robots oder Header X-Robots-Tag).

Leitet die Kassenseite bei leerem Warenkorb zu dem Warenkorb weiter, den Sie eingegeben haben, ist das ebenfalls gut.

Orange: kein noindex (prüfen Sie, ob ein SEO-Plugin oder Ihr Theme es entfernt); die Seite verwendet den Shortcode statt des Blocks (kein Fehler, aber die Frage, ob das eine bewusste Entscheidung ist). Rot: ein Fehlerstatus wie 404, eine Seite ohne WooCommerce-Merkmal (ordnen Sie in der Seiteneinrichtung die richtige Seite zu), eine Weiterleitung zu einem anderen Host oder http ohne https.

Notieren Sie anschließend für sich, welche Form (Blöcke oder Shortcode) Sie verwenden und warum.

Weiterführende Informationen

• Kostenloser WordPress-Kurs 5.1: Themes: Block-Themes und klassische Themes
• Kostenloser WordPress-Kurs 4.2: Seiten, Beiträge, Kategorien und Tags
• Kostenloser WordPress-Kurs 4.1: Der Block-Editor
• WooCommerce 8.3: Blöcke standardmäßig für neue Shops (developer.woocommerce.com, Englisch): https://developer.woocommerce.com/2023/11/16/woocommerce-8-3-0-released/
• Die Store API (developer.woocommerce.com, Englisch): https://developer.woocommerce.com/docs/apis/store-api/