Produktansicht von WooCommerce in voller Breite (Sidebar ausblenden)

Spätestens, wenn am grundlegenden Seiten-Layout eines WooCommerce-Shops gebastelt werden muss, um die Produktübersicht in voller Breite anzuzeigen oder auch bei der Einzelansicht eines Produkts die Seitenleiste (Sidebar) auszublenden, kann's knifflig werden. Der Grund hierfür ist die spezielle Art, mit der sich das Shop-Plugin in ein Theme einklingt.

Für das eCommerce-Plugin WooCommerce gibt es unzählige Themes, mit denen Anpassungen am Design eines Online-Shops einfach per Mausklick möglich sind. Es gibt allerdings auch gute Gründe, auf solche speziellen Shop-Themes zu verzichten - spätestens dann, wenn ein 'normales' Blog-Theme bereits im Einsatz ist und ein hinzukommender WooCommerce-Shop ins bewährte Design integriert werden soll. Prinzipiell spricht da nichts gegen; manche 'Eigenheiten' von WooCommerce können allerdings verblüffen, beispielsweise die Vehemenz, mit der das Plugin auf einer Sidebar beharrt.

Grundwissen: Woo-Layout auf Basis von Pages

Oder: Wie man ganz einfach die Darstellung von Warenkorb, Kasse und "Mein Konto" ändert

Bei der Installation von WooCommerce legt das Plugin selbsttätig einige Seiten an und benennt diese mit "Shop", "Cart" ("Warenkorb"), "Checkout" ("Kasse") und "My Account" ("Mein Konto"). Wie jede andere WP-Page lassen sich diese WooCommerce-Seiten im WordPress-Backend über den Menüpunkt Seiten aufrufen und bearbeiten. Der Verdacht liegt daher nahe, dass auch diese Shop-Seiten auf die simplen Layout-Möglichkeiten auf Basis von Page-Templates zurückgreifen.

So ziemlich jedes Theme bringt solche Templates bereits mit, meist zumindest ein Standard-Template mit einer Seitenleiste am rechten oder linken Rand sowie ein Fullwidth-Template - ein Layout also ohne Seitenleiste. Diese mitgelieferten Seiten-Layouts lassen sich ganz einfach im Editier-Modus einer Seite einstellen mittels des dortigen Auswahlmenüs (Seite->bearbeiten, Attribute->Template). Auch für die Woo-Seiten ist das möglich. Auswirkungen auf das Layout hat es allerdings nur bei den Pages "Cart", "Checkout" und "My Account".

Immerhin ist es dadurch problemlos möglich, die Darstellung des Warenkorbs, der Kasse und von "Mein Konto" auf die volle Breite zu ziehen. Einzige Voraussetzung: Das benutzte Theme muss ein Fullwidth-Template zur Verfügung stellen (oder einfach selbst machen, ist ganz simpel).

Die eigentliche Shop-Seite allerdings weigert sich vehement, auf diese Template-Einstellung angemessen zu reagieren. Und diese mit "Shop" bezeichnete Page ist Grundlage für die Darstellung sowohl der Einzelansicht eines Produkts als auch der Überblicksseiten, also der Produktauflistungen, zu denen auch die Einstiegsseite des Shops zählt.

Problem: WooCommerce nutzt teilweise eigene Templates

Woran liegt das? Die von WooCommerce angelegte Seite namens "Shop" bildet zwar die technische Basis für die Produkt- und übrigens auch für die Kategorie- und Tag-Ansichten, im Gegensatz zu den drei Pages "Cart", "Checkout" und "My Account" wird bei "Shop" aber nicht auf ein Seiten-Layout des aktiven Themes zurückgegriffen. WooCommerce nutzt hier eigene Templates, der Grund: Für die Anzeige dieser Produkt-Seiten benötigt das Plugin den eigenen Produkt-Loop. Und dieser wird über zwei der Templates, die WooCommerce mitliefert, implementiert.

Das Blöde an diesen Woo-eigenen Templates bezüglich des Layouts ist nun, dass sich in ihnen ein Sidebar-Aufruf versteckt. Soll heißen: Über die Produkt-Templates ruft WooCommerce stets die Sidebar auf (in der Regel also eine Seitenleiste). Über ein 'normales' Theme lässt sich daran nichts ändern, jedenfalls nicht mit ein paar Mausklicks.

Lösung: Sidebar-Aufruf von WooCommerce deaktivieren

Die Lösung ist naheliegend: Der Sidebar-Aufruf muss entfernt bzw. deaktiviert werden, wenn ein Layout in voller Breite gewünscht wird. Hierzu gibt es mehrere Möglichkeiten. Eine einfache und dennoch technisch sinnvolle ist, die verantwortlichen WooCommerce-Templates in den eigenen Theme-Ordner zu holen und dann den Sidebar-Befehl zu löschen. Das geht so:

1. Innerhalb des aktiven Themes (besser: des verwendeten Child-Themes) einen Unterordner namens woocommerce erstellen.
2. Aus dem WooCommerce-Plugin-Ordner unter wp-content/plugins/woocommerce/templates/ die beiden Dateien archive-product.php und single-product.php kopieren und in den eben erstellten Ordner des eigenen Themes kopieren.
3. Diese Kopien mit einem Texteditor öffnen und jeweils unten die Zeile do_action( 'woocommerce_sidebar' ); löschen (oder auskommentieren).
4. Abspeichern. Fertig.

Hierdurch werden die WooCommerce-Templates durch die gleichnamigen im eigenen Theme-Ordner überschrieben. Und weil ein Sidebar-Aufruf nun nicht mehr vorhanden ist, sollte die Seitenleiste bei allen Darstellungen von Produktlisten, Einzel-Produkten, Taxonomien (Kategorien und Tags) und auch der Eingangsseite des Shops verschwunden sein.

Alternative: Sidebar entfernen mittels WooCommerce-Hooks

Dank der sogenannten Hooks, die in WooCommerce zahlreich verwendet werden, ist es auch möglich, mittels einer PHP-Anweisung den Sidebar-Aufruf komplett zu entfernen. Folgendes muss dazu in die functions.php des eigenen Child-Themes eingetragen werden:

remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

Das oben beschriebene Löschen der Do-Action-Anweisung in den Template-Files ist dann eigentlich überflüssig. Die Aktion woocommerce_sidebar wird so zwar weiterhin aufgerufen bzw. die zugehörige Funktion ausgeführt, enthält aber nun nicht mehr den Sidebar-Aufruf woocommerce_get_sidebar, weil dieser mittels des Befehls remove_action() aus der Action-Sammlung woocommerce_sidebar entfernt wurde. Im Grunde wird nur noch eine leere Funktion ausgeführt.

Blöd: Bei den Themes von WooThemes funktioniert das nicht

Blöderweise klappt das aber meistens nicht bei den Themes von WooThemes, die ja speziell für den Einsatz mit WooCommerce entwickelt wurden. Der Grund: Diese Themes haben den eigentlichen Sidebar-Aufruf von WooCommerce bereits selbst deaktiviert ('removed'), um ihn dann über eine eigene Action-Anweisung wieder reaktivieren zu können (klingt komisch, ist aber so).

In diesen Fällen hilft es nur, die Theme-interne Sammel-Action, in der sich nun der Aufruf woocommerce_get_sidebar versteckt, zu suchen und dann eine angepasste Remove-Action in die functions.php zu schreiben. Beim kostenlosen Theme "Storefront", bei dem zudem noch der get_sidebar-Befehl umbenannt wurde, lautet das dann im Prinzip so:

remove_action( 'storefront_sidebar', 'storefront_get_sidebar',10);

Allerdings muss die Action nun in eine eigene Funktion eingebettet werden, um bestimmte Laufzeiteffekte zu überlisten. Dadurch wird sichergestellt, dass die Remove-Action in der functions.php des Child-Themes erst nach dem Laden des Storefront-Themes aufgerufen wird, denn vorher existiert der Storefront-Aufruf für die Sidebar noch gar nicht (und kann daher auch noch nicht 'removed' werden):

add_action( 'after_setup_theme', 'lautzeichen_remove_storefront_get_sidebar');
function lautzeichen_remove_storefront_get_sidebar() {
	remove_action( 'storefront_sidebar', 'storefront_get_sidebar',10);
}

Für einige aufwendigere und daher kostenpflichtige Themes von WooThemes mag folgendes Code-Schnipsel helfen (ungetestet!):

add_action( 'after_setup_theme', 'lautzeichen_remove_wootheme_get_sidebar');
function lautzeichen_remove_wootheme_get_sidebar() {
	remove_action( 'woo_main_after', 'woocommerce_get_sidebar',10);
}