WooCommerce basiert auf WordPress, also wird auch das Design via WordPress angepasst. Was erfreulich ist: WordPress wird mit dem Update auf Version 7.0 (Release-Datum 20.Mai 2026) wieder ein Stück benutzerfreundlicher.
Außerdem gilt: Wer das Design von WordPress bzw. WooCommerce aufpeppen möchte, muss nicht mehr wie früher das Theme wechseln. Es gibt nämlich zwei „Hausmittel“: Stile & Templates.
Design-Tools: Stile & Templates
Stile und Templates können auch von „normalen Menschen“ angepasst werden. Kenntnisse in HTML und CSS sind dazu nicht erforderlich. Wir beginnen mit den Stilen.
Jedes neue Standardtheme, auch Default-Theme genannt, verfügt über die Stile-Funktion. Falls Ihnen der Look von WordPress nicht gefällt: Wechseln Sie nicht gleich das Theme, blättern Sie zunächst durch die integrierten Stile. Bei WordPress gilt nämlich:
Ein Stilwechsel ist ohne Risiko, ein Themewechsel kann Probleme verursachen!
WordPress-Stile nutzen
Beginnen Sie das Design von WordPress (und WooCommerce) mit der Auswahl und Anpassung der Stile Ihres aktiven Themes. Das Tool, das Sie dafür benötigen, wird Website-Editor oder etwas kürzer Site-Editor genannt.
Zu den Begriffen: Wichtig ist, zwischen Side (einzelne Seite) und Site (das gesamte WordPress) zu unterscheiden. Im Site-Editor nehmen Sie globale Einstellungen vor, die sich sofort drastisch auswirken. So gelangen Sie in den Site-Editor:
- Klicken Sie in der schwarzen Menüleiste links auf Design
- Klicken Sie auf Editor
Was ist in den Stilen definiert?
In den Stilen eines Themes sind fünf Elemente definiert, die das Aussehen einer WordPress-Website einschließlich des WooCommerce-Shops grundlegend definieren:
1. Typografie
Hier geht es um Schriftarten. Jeder Stil stellt zwei passende Fonts (Schriftarten) für Überschriften und Texte zur Verfügung. Sie können die Schriftarten auch innerhalb Ihres gewählten Stils noch ändern. Dazu ein Tipp: Für Überschriften empfiehlt sich eine markante Schrift, für Fließtext eine gut lesbare.
2. Farben
Jeder Stil stellt ein Farbpalette für Textfarbe, Hintergrundfarbe und Akzentfarben zur Verfügung. Die zentrale Farbpalette sorgt für die Konsistenz Ihrer Website. Sie können, müssen die Farbpalette aber nicht anpassen oder mit eigenen Farben ergänzen. Wichtig ist aber: Aus Gründen der Barrierefreiheit und Lesbarkeit muss ein ausreichender Kontrast zwischen Text- und Hintergrundfarben bestehen.
3. Hintergrund
Jeder Stil bringt diverse Hintergründe mit, die für besondere Effekte sorgen.
4. Schatten
Jeder Stil bringt diverse Schatten mit, die plastische Effekte bei Bildern ermöglichen.
5. Layout
Als Layout bezeichnet WordPress hier die Festlegung der Abstände zwischen den Blöcken, zum Beispiel zwischen Überschriften-Blöcken und Absatz-Blöcken.
Stil wechseln
Bevor Sie sich über den riskanten Wechsel eines WordPress-Themes Gedanken machen: Klicken Sie sich zunächst durch die Stile des bereits in WordPress integrierten Themes durch:
- Klicken Sie auf Design / Stile
- Wählen Sie einen Stil aus
- WordPress bietet Ihnen eine Vorschau zum angewählten Stil
Nach dem Durchblättern wechseln Sie zu einem neuen Stil oder behalten den Standardstil bei. Auf demoshops.de wurde der dezente Standardstil des Themes Twenty Twenty-Five beibehalten und in zwei Bereichen ein bisschen ergänzt: Bei den Schriftarten und Farben.
Stil anpassen: Schriftarten
Den von Ihnen gewählten Stil können Sie noch anpassen. Sie können zum Beispiel eine dritte Schriftart hinzufügen, zum Beispiel diese hier:
Hier wurde eine markante Schrift hinzugefügt
Die obige Google-Schrift, sie nennt sich Edu QLD Hand, verwende ich manchmal auf demoshops.de. Für lange Texte ist sie zwar nicht geeignet, aber sie ist ganz um ein paar typografische Akzente zu setzen. Sie möchten ebenfalls Schriften ergänzen? Das ist bei WordPress ab der Version 7.0 in zwei Minuten erledigt.
Zum Hinzufügen einer Schriftart klicken Sie zunächst auf Design / Schriften. Damit gelangen Sie in die Schriftenverwaltung von WordPress, auch Bibliothek genannt.
Bei Bibliothek sehen Sie die vorhandenen Schriftarten Ihres Stils. Jetzt soll eine neue Schritart hinzukommen. Dazu klicken Sie auf Schriften installieren. Nun verbinden sich WordPress und Google Fonts. Damit können Sie eine Schrift aus Google Fonts auswählen und direkt in WordPress installieren. Das ist wichtig für die Rechtssicherheit. Google-Schriften müssen lokal in WordPress installiert werden, damit beim Aufruf der Website keine Userdaten an Google weitergegeben werden.
Okay, die Schriftarten haben Sie aufgehübscht? Dann geht es weiter mit den Farben.
Stil anpassen: Farben
Jeder Stil bringt seine eigene Farbpalette mit. Um die Farbpalette zu ändern oder zu ergänzen, klicken Sie auf Design / Stile / Farben. Dann legen Sie alle Farben zentral fest, die Sie in WordPress und damit auch in WooCommerce einsetzen möchten.
Auf demoshops.de wurden zunächst die Farbpalette etwas angepasst. Das Lila entspricht jetzt exakt dem WooCommerce-Lila. Außerdem wurden zwei individuelle Farben ergänzt: Grün und Rot. Benötigt werden diese Farben zum Beispiele für die Buttons in der Wero-Shopliste.
Der erste Teil dieses Tutorials (Stile) wäre geschafft. Jetzt folgt der zweite Teil, es geht um die Templates.
Templates anpassen
Ihren Stil haben Sie jetzt gewählt, sowie Farben und Schriftarten angepasst. Dann können Sie sich jetzt loslegen und WordPress mit Content sowie WooCommerce mit Produkten befüllen. Wenn das so ist, lassen Sie jetzt alles so und erzeugen Inhalte.
Aber vielleicht stören Sie sich doch noch an einigen Feinheiten im Design, die Sie über die Auswahl und Anpassung von Stilen nicht ändern konnten? Und außerdem möchten Sie den WooCommerce-Bereich noch etwas freundlicher und individueller gestalten?
In diesem Fall sollten Sie jetzt die zweite zentrale Anpassungs-Option von WordPress ausprobieren: die Templateverwaltung. Auch hier gilt, wie bei den Stilen: Programmierkenntnisse sind nicht erforderlich.
Jetzt ist die Zeit für ein Backup
Bevor Sie sich an Änderungen in in den Templates wagen, sollten Sie Ihr gesamtes WordPress, also Dateien und Datenbank, noch einmal sichern. Meine Plugin-Empfehlung für die Sicherung und Wiederherstellung von WordPress ist Backup Migration. Hier finden Sie eine detaillierte Anleitung.
Die Funktion von Templates
Stil-Anpassungen können sich auf die gesamte Website auswirken. Wenn Sie zum Beispiel allen Überschriften eine neue Schriftart zuweisen, ändern sich auch alle Überschriften. Dabei ist es egal, ob es sich um Überschriften bei Blogbeiträgen, bei einzelnen Seiten oder innerhalb von WooCommerce handelt.
Bei den Templates, also den Vorlagen, sieht die Sache dagegen etwas anders aus. Betroffen sind bei Template-Aktionen nur mehr oder weniger große Bereiche Ihrer Website. Ein Beispiel:
Ihre WordPress-Website besteht aus zwölf Unterseiten (Über-uns-Seite, FAQ-Seite, Kontaktseite, usw.). Das Aussehen dieser zwölf Unterseiten wird von einem einzigen Template bestimmt. Dieses Template nennt sich schlicht und einfach Seiten. Eine Änderung an diesem einen Template wirkt sich sofort und drastisch auf alle zwölf Seiten aus, die auf diesem Template basieren.
Daneben gibt es aber auch Templates, die nur für eine einzige Seite zuständig sind, zum Beispiel das Template für die 404-Fehlerseite. Am besten öffnen Sie jetzt die Template-Verwaltung und verschaffen sich einen Überblick der von Ihrem Theme mitgelieferten Templates.
Template-Verwaltung öffnen
So öffnen Sie die Template-Verwaltung von WordPress:
- Klicken Sie in der schwarzen Menüleiste links auf Design / Editor
- Wählen Sie den Menüpunkt Templates aus
Bestandsaufnahme: Welche Templates hat mein Theme mitgeliefert?
Je nach verwendetem Theme zeigt Ihnen WordPress nun alle Templates, die für das Aussehen der verschiedenen Elemente Ihrer Website verantwortlich sind. Der folgende Screenshot zeigt die Templates, die im aktuellen Standardtheme Twenty Twenty-Five enthalten sind.
Die Templates von Twenty Twenty-Five
Im aktuellen Standardtheme Theme Twenty Twenty-Five sind folgende acht Templates enthalten:
1. Alle Archive
Das Template Alle Archive wird aufgerufen, wenn ein User beispielsweise auf eine Kategorie von Blogbeiträgen klickt. Eine solche Kategorie ist hier auf demoshops.de zum Beispiel WooCommerce. Beim Anklicken listet WordPress alle Blogbeiträge auf, die mit dieser Kategorie versehen wurden. Das Template Alle Archive wird außerdem für die Auflistung von Schlagwörtern und Autorennnamen verwendet.
2. Blog-Startseite
Das Template Blog-Startseite nutzt WordPress, um die letzten Blogbeiträge anzuzeigen. Voraussetzung für den Einsatz dieses Templates ist, dass im Dashboard unter Einstellungen / Lesen eine Blog-Startseite definiert wurde. Wenn Sie Ihre Blogbeiträge direkt über einen Loop-Block ausspielen, kommt dieses Template nicht zum Einsatz.
3. Einzelne Beiträge
Das Template Einzelne Beiträge bestimmt das Aussehen jedes einzelnen Blogbeitrags auf Ihrer Website. Hier können Sie beispielsweise die Metadaten aller Blogbeiträge (Autor, Datum, Kategorie, Schlagwort) nach Belieben ein- oder ausblenden. Außerdem können Sie festlegen, ob und welche Metadaten am Anfang oder Ende eines Blogbeitrags angezeigt werden.
4. Index
Das Template Index dient in Twenty Twenty-Five als Fallback-Lösung, Es springt ein, wenn für eine Seite kein anderes Template definiert ist.
5.Seite ohne Titel
Das Template Seite ohne Titel ist für spezielle Seiten konzipiert, in denen keine Überschrift angezeigt werden soll. Standardmäßig ist es noch keiner Seite zugewiesen.
6. Seite 404
Das Template Seite 404 kommt zum Einsatz, wenn ein Besucher einen verwaisten Link anklickt oder eine URL falsch eintippt. Im Theme Twenty Twenty-Five enthält das Template freundlicherweise einen Suchmaschinen-Block, über den verirrte Besucher dann hoffentlich zum gewünschten Ziel finden.
7. Seiten
Das Template Seiten wird von WordPress standardmäßig ausgespielt, wenn ein Besucher eine einzelne Seite aufruft.
8. Suchergebnisse
Eine Suchfunktion stellt WordPress über den Suchmaschinen-Block zur Verfügung. Die Ergebnisse der Suche werden dann auf einer Seite ausgespielt, die auf dem Template Suchergebnisse basiert.
Achtung: Die Produkt-Suchmaschine von WooCommerce greift nicht auf dieses Template zu, WooCommerce bringt ein eigenes Produktsuche-Template mit.
Seitentitel über Template-Wechsel ausblenden
Nicht immer ist die Änderung eines Templates zur Lösung eines Problems notwendig, in einem speziellen Fall genügt auch eine geänderte Template-Zuweisung: Beim Ausblenden des Seitentitels.
Szenario: Seitentitel ausblenden
Das Szenario: Sie möchten eine reduzierte Seite erstellen. Auf dieser Seite soll zum Beispiel ein Kontaktformular platziert werden. Ein Seitentitel würde da nur ablenken. Sie könnten natürlich den Titel einfach weglassen, aber damit wäre nicht nur Ihre Seitenverwaltung unübersichtlich, Sie würden auch bei den Suchmaschinen abstürzen. Google, Bing und Duckduckgo erwarten nämlich bei jeder Seite einen Seitentitel. Der suchmaschinenfreundliche Weg führt über das Template-System. Sie weisen der reduzierten Seite einfach ein anderes Template zu.
Der Seite ein anderes Template zuweisen
Das Auswechseln eines Templates funktioniert direkt auf der betreffenden Seite. So weisen Sie einer bestehenden Seite ein anderes Template zu:
- Klicken Sie die Seite an, auf der die Überschrift ausgeblendet werden soll.
- Klicken Sie in der rechten Seitenleiste auf Seite.
- Klicken Sie auf Template.
Normalerweise ist hier das Template Seiten zugewiesen. Diese Template soll jetzt ausgewechselt werden.
Nachdem Sie auf Seiten geklickt haben, erscheinen diese drei Optionen:
- Template bearbeiten
- Das Template wechseln
- Neues Template erstellen
Jetzt klicken Sie auf Das Template wechseln. Im anschließenden Fenster wählen Sie dann das Template Seite ohne Titel aus. Diese Vorgehensweise ist völlig ungefährlich, denn Sie haben am Template selbst ja nichts geändert. Sie können jederzeit wieder das Template Seiten einsetzen.
Und was ist mit oben erwähnten Suchmaschinen? Ist Seite ohne Titel nicht schädlich? Nein, denn auf allen Seiten, die auf dem Template Seite ohne Titel basieren, können Sie trotzdem einen Titel eingeben. Dieser Titel wird von den Suchmaschinen gelesen, aber den Besuchern nicht angezeigt.
Okay, jetzt haben Sie ein Template neu zugewiesen. Nun folgt der nächste, etwas riskantere Schritt: die Anpassung eines Templates. Wenn Sie neu in der Materie sind, sollten Sie nicht sofort mit der Änderung von Templates beginnen, die sich auf weite Bereiche Ihrer Website auswirken. Üben Sie zunächst am Template für die Fehlerseite 404.
Ein Template anpassen
Im Beispiel wurde das Template für die Fehlerseite 404 ein bisschen modifiziert. Die Überschrift Hoppla, die URL stimmt nicht und der Text Sorry, da ging was schief klingen etwas weniger formal als der vorherige Standardtext. Sie könnten auf diesem Template aber auch Blöcke einfügen. Zum Beispiel einen Button-Block, der auf die Katalogseite Ihres WooCommerce-Shops verweist.
Jetzt kommen wir endlich zum spezifischen WooCommerce-Design. WooCommerce ist ein sehr umfangreiches Plugin, denn es bringt sogar eigene Templates mit. Diese neuen Templates wollen wir uns zunächst mal in einer Übersicht ansehen.
Die Templates von WooCommerce
Acht Templates hat das Theme Twenty Twenty-Five mitgebracht. Mit der Installation von WooCommerce kommen weitere acht Templates dazu. Wenn Sie in der schwarzen Menüleiste links bei Templates auf WooCommerce klicken, sehen Sie eine Übersicht der WooCommerce-Templates:
- Warenkorb – zeigt die zum Kauf ausgewählten Produkte an
- Produktkatalog – zeigt die Produkte in der Übersicht an
- Produkte nach Attribut – zeigt variable Produkte an, die vom User nach Attributen wie Größe oder Farbe gefiltert werden können
- Produkt-Suchergebnisse – zeigt die Suchergebnisse der Produkt-Suchmaschine an
- Bezahlen – schließt den Kauf ab
- Bestellbestätigung – zeigt die Bestätigung eines erfolgreichen Kaufs: Produkte, Versand, Zwischensummen und Gesamtbetrag
- Einzelnes Produkt – jedes einzelne Produkt wird mit diesem Template ausgespielt
- Seite demnächst verfügbar – WooCommerce verwendet dieses Template, wenn für den Shop noch der Vorschaumodus eingestellt ist.
Ein WooCommerce-Template anpassen
Die mit der Installation des von WooCommerce acht zusätzlichen Templates lassen sich ebenso wie im Theme bereits enthaltenen Templates an jeder Stelle anpassen. Im Beispiel wurde das Warenkorb-Template bearbeitet. Ganz oben prangt nun ein neuer Textblock mit rotem Hintergrund und einem sehr auffälligen Hinweis: „Kostenloser Versand ab 50 Euro“. Damit wird wirklich allen Kundinnen und Kunden klar, dass sie ab einem Einkauf von 50 Versandgebühren sparen. Parallel dazu müssen Sie natürlich unter WooCommerce / Einstellungen / Versand die entsprechende Mindesthöhe für den kostenlosen Versand konfigurieren.
Jetzt haben Sie einen Einblick zu den Stilen und Templates gewonnen, zum Abschluss dieses Artikels habe ich noch ein paar Anmerkungen zu den „Nachteilen“ von WooCommerce. WooCommerce ist ja kein „richtiges Shopsystem“.
Ein paar Worte noch zu WooCommerce…
WooCommerce ist im Unterschied zu Shopify, Shopware oder Prestashop kein eigenständiges Shopsystem, sondern lediglich ein Plugin, also eine Funktionserweiterung. Von Nachteil ist diese Architektur aber nicht, ganz im Gegenteil. Wer einen Onlineshop neu aufbauen möchte und noch nicht über Popularität verfügt, kann sich über die Blogfunktion von WordPress ein passendes Umfeld für den Shop aufbauen.
Isolierte Shops verkaufen wenig bis nichts
Ein isolierter Shop bringt wenig bis gar nichts ein. Bewährt hat sich dagegen die Strategie, zunächst mit interessanten Beiträgen in der zum Shop passenden Nische etwa Blogbesucher anzuziehen und deren Vertrauen zu gewinnen. Die Installation von WooCommerce erfolgt dann nach einer Anlaufzeit von etwa einem Jahr. Das klingt jetzt nach viel Arbeit und Wartezeit, aber es lohnt sich. Erstens erspart es dem Shopbetreiber die teure Anzeigenschaltung und zweitens ist der durchs Bloggen gewonnene Traffic viel nachhaltiger. Anzeigen sind Strohfeuer: Wird eine Anzeige abgeschaltet, ist der dadurch generierte Traffic wieder komplett verschwunden.
Fragen zu Stilen & Templates bitte in die Kommentare
Schreibe einen Kommentar