Wer das WordPress-Shop-Plugin Woocommerce in ein bestehendes WordPress-Blog integrieren möchte, hat häufig das Problem, dass nach erfolgreicher Installation die Sidebar nicht richtig dargestellt wird. Hier ist ein einfacher Lösungsweg beschrieben.

Je nach Programmierkenntnis stehen viele Blog- oder Webseitenbetreiber, die zum ersten Mal versuchen, Woocommerce in ihre bestehende WordPress-Installation zu integrieren vor unlösbar erscheinenden Problemen. Im Netz finden sich zahlreiche eCommerce-Themes, bei denen Woocommerce bereits integriert ist. Sehr zu empfehlen ist in diesem Zusammenhang die Seite Themeforest. Wer mit seiner Seite also von vorne anfängt, sollte sich ruhig mal umschauen und gegebenenfalls auf ein solches Theme zurückgreifen. Das kann Zeit sparen und Nerven schonen.

Doch zurück zur Ausgangsfrage. Nach der Installation des Plugins Woocommerce kommt es häufig zu Designproblemen. Ein sehr verbreitetes Problem ist, die erwähnte Sidebar, die scheinbar nach unten rutscht. Das liegt daran, dass Woocommerce seine Stylevorgaben aus der Datei woocommerce.php bezieht und diese im Konflikt zu den Stylevorgaben des Themes stehen, die in der zum Theme gehörenden page.php Datei zu finden sind. Betroffen sind hiervon zumeist die Shop-Seite, die einzelnen Produktseiten und Taxonomie-Seiten wie Kategorien und Tags. Die Woocommerce-Macher von Woothemes bieten hierzu verschiedene Lösungswege an. Wer keine aufwändige Sidebar-Struktur benötigt, kann eine neue Template Seite innerhalb des Theme erstellen, die für jeglichen Content von WooCommerce verwendet wird.

So geht’s: Page.php duplizieren und den Loop ersetzen

Screenshot Woocommerce Loop
Ist der Loop erst  identifiziert, ist der Rest einfach.

Zuerst sollte die page.php Datei des eigenen Themes mit einem FTP-Client wie Filezilla oder ähnlichem Programm auf den eigenen Rechner kopiert und anschließend dupliziert werden. Die Datei befindet sich im Hauptordner des Themes. Als nächstes wird die Datei umbenannt in woocommerce.php. Damit heißt die Datei mit den Stylevorgaben des eigenen Themes genau so wie die entsprechende Datei, die Woocommerce für seine eigenen Stylevorgaben nutzt. Aber zunächst muss noch der Kontext zu Woocommerce hergestellt werden. Das geschieht über den sogenannten Loop. Um die Datei zu bearbeiten kann entweder der Texteditor verwendet werden oder ein Source Code Editor wie zum Beispiel Notepad.

Der Loop beginnt in der Regel mit folgender Codezeile:

<?php if ( have_posts() ) :

Das Ende des Loop sollte in etwa so aussehen:

<?php endif; ?>

Dies kann von Theme zu Theme variieren.

Sobald der Loop identifiziert ist, kann er durch folgende Code-Zeile ersetzt werden:

<?php woocommerce_content(); ?>

Das war es auch schon. Im letzten Schritt muss die neue woocommerce.php Datei nur noch in den Ordner des Themes kopiert werden. Wichtig ist jedoch dabei zu wissen, dass diese Lösung nicht update-sicher ist. Das heißt, dass das Ganze nach einem Theme-Update höchstwarscheinlich nochmal gemacht werden muss. Wer eine saubere Lösung haben möchte und sich etwas mit PHP auskennt, sollte besser mit sogenannten hooks arbeiten, wie es hier beschrieben wird.

Hier noch ein nützliches YouTube-Video, das die einzelnen hier beschriebenen Schritte noch einmal verdeutlicht und veranschaulicht:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Diese Beiträge könnten sie auch interessieren:

>>>RSS-Feeds verwalten mit Hootsuite – So funktioniert’s
>>>Effektives internationales Marketing mit Posts und Pins

Blog Tipps & Tricks Tutorials

One reply to “WordPress-Tipps zum Sidebar-Problem auf Woocommerce-Seiten”

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert