WooCommerce mit Thrive Theme Builder designen

Wie du einen WooCommerce Shop mit Thrive Theme Builder erstellst

Mรถchtest du mehr zum Thema Woocommerce Mit Thrive Theme Builder erfahren?

WooCommerce und der Thrive Theme Builder sind das perfekte Gespann fรผr einen Online-Shop. Sicher musst du dich trotzdem um alle rechtlichen Angelegenheiten kรผmmern, aber das Design und die Shop-Struktur hast du mit Thrive Themes voll im Griff.

Mit dem Thrive Theme Builder kannst du alle Elemente deiner Webseite frei anpassen, ohne eine Zeile Programmcode schreiben zu mรผssen. Das WordPress-Theme eignet sich fรผr private Nutzer, Selbststรคndige, kleine und mittlere Unternehmen, Webdesigner und Agenturen. Im heutigen Artikel zeigen wir dir, wie du mithilfe des Thrive Theme Builders deinen eigenen WooCommerce-Shop erstellst.

ACHTUNG: Dieses Howto beschreibt hauptsรคchlich die optische Gestaltung mit dem Thrive Theme Builder Theme. Die technische und rechtliche WooCommerce Einrichtung wird nur kurz angeschnitten.

Los gehts!

Das Video ist leider auf Englisch, es beschreibt aber aller Schritte genau.

TIPP: Die besten 5 WooCommerce Themes fรผr WordPress

1. Erstelle deine Webseite mit dem Thrive Theme Builder

Falls noch nicht vorhanden musst du zuerst einmal mit dem Thrive Theme Builder eine WordPress-Webseite erstellen. Dabei handelt es sich um das fortschrittliche WordPress-Theme von Thrive Themes.

Du benรถtigst kein Vorwissen oder spezielle Werkzeuge und kannst eine professionell aussehende Seite ausschlieรŸlich auf visueller Ebene erstellen. Mit dem Thrive Theme Builder kannst du jede WordPress-Seite individuell anpassen und alle Bereiche verรคndern.

Das Ganze funktioniert genauso reibungslos mit einem WooCommerce-Shop, sobald du das WooCommerce-Plugin aktiviert hast.

Website erstellen -  Lerne wie du einen Blog startest.
Website erstellen – Lerne wie du einen Blog startest.

Falls du noch keine Website hast, fรคngst du am besten mit meiner Serie Website erstellen an. Da erklรคre ich wie du eine Domain aussuchst und einen Provider fรผr deinen neuen Blog findest, WordPress installierst, bis zu Einrichtung von WordPress selbst.

2. Integriere das WooCommerce-Plugin in deine WordPress-Seite

WooCommerce Plugin aus dem WordPress-Verzeichnis installieren
WooCommerce Plugin aus dem WordPress-Verzeichnis installieren

Klicke im WordPress-Dashboard links auf Plugins und suche in der WordPress-Plugin-Bibliothek nach dem WooCommerce-Plugin. Fรผr die kostenlose Open-Source-E-Commerce-Lรถsung benรถtigst du mindestens WordPress-Version 5.4, MySQL 5.6 und PHP 7.2. Nach dem Herunterladen kannst du das Plugin innerhalb von wenigen Augenblicken installieren und aktivieren.

Lies meine Anleitung, falls du noch nie ein WordPress-Plugin installiert hast.

WooCommerce Setup-Assistent
WooCommerce Setup-Assistent

Fรผlle alle Felder beim WooCommerce-Setup-Wizard genau aus und klicke jeweils auf Fortfahren.

Im fรผnften Schritt stelle sicher, dass Thrive Theme Builder ausgewรคhlt ist und klicke auf „Mit meinem aktiven Theme fortfahren„.

3. Erstelle 4 neue Seiten und verbinde sie

Wenn bei der Einrichtung von WooCommerce alles richtig gelaufen ist, sollten die vier Seiten fรผr den Shop automatisch erstellt und verbunden worden sein. Wenn das bei dir der Fall ist, kannst du diesen Schritt komplett รผberspringen.

Erstelle vier neue Seiten auf deiner WordPress-Webseite. Gib den Seiten die folgenden Namen

  • Kasse
  • Mein Konto
  • Shop
  • und Warenkorb

und verรถffentliche sie in deinem Dashboard.

Die 4 Seiten werden fรผr die nachfolgende Verknรผpfung mit WooCommerce zwingend benรถtigt. Du musst die Seiten an dieser Stelle einfach nur erstellen und noch nicht mit Inhalten fรผllen.

Verbinde die neuen Seiten mit WooCommerce

Navigiere in deinem WordPress-Dashboard zu WooCommerce > Einstellungen > Produkte. Wรคhle die weiter oben erstellte Shop-Seite aus und verbinde sie mit WooCommerce, indem du die Seite in der Dropdown-Box auswรคhlst.

WooCommerce Seiten verbinden
WooCommerce Seiten verbinden

Danach wechselst du zu Erweitert. Nun kannst du die 3 verbleibenden Seiten „Kasse“, „Mein Konto“ und „Warenkorb“ mit WooCommerce verknรผpfen, indem du sie in den Dropdown-Boxen auswรคhlst.

4. SchlieรŸe die Einrichtung deiner WooCommerce-Seite ab

WooCommerce Einstellungen des Thrive Theme Builders
Die WooCommerce Einstellungen des Thrive Theme Builders.

Als Nรคchstes kannst du den Setup-Assistenten des Thrive Theme Builders aufrufen und die Einrichtung deiner WooCommerce-Seite abschlieรŸen: Thrive Dashboard > Thrive Theme Builder

E-Commerce Header Auswahl
E-Commerce Header Vorlage auswรคhlen

Gestalte die Kopfzeile, die FuรŸzeile, die Shop-Seite, die Produktseitenvorlage, die Warenkorbseite und die Kassenseite individuell. Nimm dir fรผr die Einrichtung dieser Seiten genรผgend Zeit und lass deiner Kreativitรคt freien Lauf.

5. Erstelle Produkte und Kategorien in deinem WooCommerce-Shop

Erstes WooCommerce-Produkt erstellen.
Erstes WooCommerce-Produkt erstellen.

Nun kannst du deine ersten Produkte und Kategorien erstellen. Navigiere dazu in der linken Seitenleiste deines WordPress-Dashboards zu Produkte. Erstellst du zum ersten Mal ein Produkt in deinem WooCommerce-Shop, wรคhlst du einfach die lila Schaltflรคche „Produkt erstellen“ aus.

Hast du bereits zuvor Produkte erstellt, klickst du stattdessen auf den Button „Neu hinzufรผgen„. Sobald du ein Produkt erstellt hast, arbeitest du dich durch die verschiedenen Abschnitte und fรผgst alle Inhalte, die zur Beschreibung der Produkte zwingend benรถtigt werden, hinzu. Nimm dir genรผgend Zeit und bearbeite die nachfolgenden Inhalte in Ruhe:

Die Thrive Theme Builder spezifischen Einstellungen fรผr Produkte. Templates und Visibility (Sichtbarkeit).
Die Thrive Theme Builder spezifischen Einstellungen fรผr Produkte. Templates und Visibility (Sichtbarkeit).
  • die Produktdaten
  • eine Kurzbeschreibung zu einem Produkt
  • die Vorlagen fรผr den Thrive Theme Builder
  • die Sichtbarkeit des Thrive Theme Builders
  • die Kategorie des Produkts
  • den Produkt-Tag
  • das Produktbild
  • die Produkt-Galerie

6. Wรคhle passende WooCommerce-Seitenvorlagen aus

Thrive Theme Builder WooCommerce Templates
Thrive Theme Builder WooCommerce Templates

Navigiere zu deinem Thrive Theme Builder-Dashboard und wรคhle Templates aus. Hier findest du zahlreiche Seitenvorlagen fรผr alle gรคngigen Shop-Seiten. Darunter befinden sich auch mehrere Seitenvorlagen fรผr deine neu erstellten Seiten.

Bei mir waren die speziellen WooCommerce Templates erst verfรผgbar, wenn ich sie vorher im Site Wizard zumindest einmal ausgewรคhlt hatte. Ich weiรŸ nicht ob das ein Bug ist, oder so gewollt ist.

Wรคhle aus dem grauen Dropdown-Feld im oberen Seitenbereich passende Vorlagen fรผr die Seiten „Produkt“ „Shop“, „Kasse“, „Mein Konto“ und „Warenkorb“ aus.

Der Thrive Theme Builder stellt dir verschiedene Vorlagen zur Verfรผgung. Deine aktuell gewรคhlten Standardvorlagen sind durch das lilafarbene Banner leicht erkennbar. Du kannst bei Bedarf deine Standardvorlagen-Auswahl รคndern, indem du auf das Symbol mit den 3 Punkten (befindet sich auf den Miniaturansichten) klickst und „als Standard festlegen“ auswรคhlst.

7. Passe den WooCommerce-Header und deine Kassenseite an

Passe den Shop-Header an
Passe den Shop-Header an

Sobald du mit dem Einrichtungsassistenten des Thrive Theme Builders einen WooCommerce-Header ausgewรคhlt hast, gilt dieser in Zukunft automatisch fรผr alle WooCommerce-Seiten. Selbstverstรคndlich kannst du individuelle Anpassungen vornehmen, die ebenfalls fรผr alle Seiten gelten, indem du in den Bereich der Kopfzeile klickst und anschlieรŸend den Button Edit auswรคhlst.

Mรถchtest du stattdessen Anpassungen vornehmen, die ausschlieรŸlich fรผr eine ausgewรคhlte Seite gelten, kannst du einfach auf den Button Unlink klicken und danach mit deinen Anpassungen fortfahren. Soll eine neue Kopfzeile ausschlieรŸlich fรผr eine ausgesuchte Seite gelten, kannst du dies รผber den Button Choose a Ready-Made Design realisieren.

Kassenbereich im Thrive Theme Builder anpassen
Kassenbereich im Thrive Theme Builder anpassen

Mรถchtest du das Design der einzelnen Elemente auf deiner Kassenseite bearbeiten, musst du dazu mit der Maus in den Kassenbereich klicken, damit das Kassensymbol hervorgehoben wird. Danach navigierst du zu den „Checkout-Optionen“ und klickst anschlieรŸend auf den Button Edit Design. Alle angezeigten Elemente werden automatisch nach ihrem Aussehen gruppiert.

Sobald du eine ร„nderung an einem ausgewรคhlten Element durchfรผhrst, wird das Design aller Elemente mit denselben Spezifikationen automatisch geรคndert.

8. Das Aussehen der Warenkorb-Seite anpassen

Wรคhle deine gewรผnschte Top Section fรผr den Warenkorb aus.
Wรคhle deine gewรผnschte Top Section fรผr den Warenkorb aus.

Du kannst den oberen Bereich (Top Section) von jeder WooCommerce-Seite austauschen und ihn anschlieรŸend individuell anpassen.

Bevor du ร„nderungen durchfรผhrst, solltest du dich vergewissern, dass der obere Abschnitt sichtbar hervorgehoben ist. Danach wรคhlst du in den Optionen fรผr diesen Abschnitt „Choose a Ready-Made Design“ aus.

Im Popup kannst du dann eine der fertigen „Top Sections“ wรคhlen.

9. Passe deine Produktseiten an

WooCommerce Produktanzeige im kleinsten Detail verรคndern
WooCommerce Produktanzeige im kleinsten Detail verรคndern

Mit dem Thrive Theme Builder kannst du die Vorlage fรผr jede Produktseite individuell anpassen. Du hast die volle Kontrolle รผber den jeweiligen Stil. Damit kannst du zum Beispiel eine einzigartige Kopfzeile verwenden oder bestimmte Produktdaten auf den Seiten ein- oder ausblenden. Verรคndere sรคmtliche Informationen auf deinen WooCommerce-Produktseiten ganz einfach รผber die Produktanzeigeoptionen.

10. Fรผge weitere WooCommerce-Module hinzu

Thrive Theme Builder: 11 WooCommerce Module
Thrive Theme Builder: 11 WooCommerce Module

Greife doch einfach deinen Kunden etwas unter die Arme und stelle ihnen hilfreiche WooCommerce-Widgets zur Verfรผgung. Diese kleinen und praktischen Helfer kannst du auf allen Seiten deiner WordPress-Webseite verwenden. Besonders nรผtzlich sind die WooCommerce-Module auf den Produktseiten.

Navigiere im Thrive Theme Builder zur rechten Seitenleiste und klicke auf „Add Element„, das ist der grรผne Plugs-Button. Es stehen dir 11 unterschiedliche WooCommerce-Elemente zur Verfรผgung und diese lassen sich einfach per Drag-and-drop in die gewรผnschten Seiten integrieren. Mit den Elementen kannst du Thrive Architect-Landing-Pages, Thrive Theme Builder-Vorlagen und individuelle Webseiten-Inhalte gestalten.

11. Passe deine Shop-Seite an

Wie vorher kommst du zu der Shop-Vorlage รผber das Menรผ Thrive Dashboard > Thrive Theme Builder > Templates. Hier filterst du wieder nach WooCommerce und wรคhlst das aktive Shop-Template mit dem Button Edit aus.

Thrive Theme Builder Shop Template
Thrive Theme Builder Shop Template

Du kannst deine Shop-Seite wie jede andere WooCommerce-Seite individuell anpassen. So kannst du beispielsweise eine neue Shop-Vorlage verwenden oder die Farbe eines Produkttitels รคndern.

Wรคhle eine andere Vorlage fรผr die Produktliste
Wรคhle eine andere Vorlage fรผr die Produktliste

Dank der groรŸen Auswahl an unterschiedlichen Shop-Vorlagen lรคsst sich das Aussehen deiner Seite mithilfe von wenigen Klicks individuell verรคndern.

12. Fรผge eine Seitenleiste hinzu

Sidebar mit Filtern einblenden
Sidebar mit Filtern einblenden

Besitzt deine bevorzugte Shop-Vorlage keine Seitenleiste, kannst du dies mรผhelos รคndern: Suche nach dem Container „Content Area“ und klicke im rechten Bereich auf den Button „Show Sidebar„.

AnschlieรŸend kannst du die neue Seitenleiste mithilfe der WooCommerce-Widgets anpassen.

13. Produktkategorie-Seitenvorlagen erstellen und anpassen

Erstelle ein individuelles Template fรผr jede WooCommerce Kategorie
Erstelle ein individuelles Template fรผr jede WooCommerce Kategorie

Verwendest du in deinem Shop verschiedene Produktkategorien kannst du mit dem Thrive Theme Builder fรผr jede einzelne Kategorie eine passende Vorlage erstellen.

Klicke dazu rechts auf den blauen Button „Add New“ und es erscheint ein neues Dialogfeld. Vergib einen Namen fรผr das Template und wรคhle wie folgt aus:

  1. List
  2. Archives
  3. Produkt-Kategorie
  4. die gewรผnschte WooCommerce-Kategorie
  5. das gewรผnschte Template

Klicke anschlieรŸend auf den blauen Button „Finish“.

Du kannst entweder eine Vorlage fรผr alle Produktkategorien oder fรผr jede Produktkategorie eine individuelle Vorlage erstellen.

So einfach geht das mit keinem anderen Theme oder Page-Builder!

Bestes WordPress Hosting

HostPress ist TรœV Saarland zertifiziert

Hosting-Empfehlungen sind normalerweise Mรผll.

Oft werden extrem billige Hosting-Pakete fรผr โ‚ฌ 3 empfohlen, andere wiederum werben mit einem โ‚ฌ 100 VPS, weil sie als Affiliate dabei am meisten verdienen. Letztlich wollen wir doch alle nur den schnellstmรถglichen Webspace fรผr mรถglichst wenig Geld.

Und zwar fรผr WordPress optimiert und vom TรœV Saarland zertifiziert!

Was ist noch wichtig? Der Server sollte in Deutschland liegen und der Support sollte mรถglichst schnell antworten, und das am besten auf Deutsch.

Das alles bekommst du bei HostPress ab โ‚ฌ 19,00 / Monat.

Einen modernen und konversionsorientierten WooCommerce-Shop erstellen

Wie du siehst, kannst du mit dem Thrive Theme Builder ohne einen groรŸen Aufwand oder Vorwissen einen professionellen und optisch ansprechenden WooCommerce-Shop erstellen.

Der Thrive Theme Builder wurde speziell fรผr Kleinunternehmer entwickelt und รผberzeugt mit einer nahtlosen WooCommerce-Integration. Mithilfe meiner leicht verstรคndlichen Schritt-fรผr-Schritt-Anleitung solltest du deinen neuen WooCommerce-Shop mรผhelos und in kรผrzester Zeit realisieren kรถnnen.

Hier findest du noch die besten WooCommerce Plugins.

Offenlegung Werbelinks: Mit einem Stern (*) gekennzeichnete Links und Buttons sind sogenannte Affiliate-Links. BloggerPilot bekommt bei einem Kauf eine Provision, die sich jedoch nicht auf den Endpreis auswirkt. Es ist uns wichtig zu betonen, dass dies keinen Einfluss auf unsere Bewertung oder Meinung hat.

ร„hnliche Beitrรคge

Schreibe einen Kommentar

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