Erstellung eines professionellen Online-Shops mit WooCommerce

Für das Inhabergeführte Scheunenlädchen begeiStern aus Bornheim bei Köln erstellte PERIMETRIK® 2021 einen professionellen Webshop mit WooCommerce.

Der neue und der alte WooCommerce Webshops begeistern-merten.de im Vergleich

Unter dem Namen begeiStern-merten betreibt Sabine Kemper aus Bornheim bei Köln ein Inhabergeführtes Scheunenlädchen mit passendem Onlineshop. Im Früjhar 2021 beauftragte sie PERIMETRIk® mit dem Neuaufbau eines professionellen WooCommerce Webshop, der ihren ehemaligen Shop ablösen sollte.

Der „alte WooCommerce“ war technsich nicht mehr auf dem neuesten Stand und verfügte zudem über kein Theme. Dadurch waren die Gestalterischen Möglichkeiten stark begrenzt.

PERIMETRIK® erstellte auf Basis unserer Shop-Vorlage Essentials Two einen neuen WooCommerce Shop für begeistern-merten.de, welches – wie alle PERIMETRIK® Websites – das Theme Divi beinhaltet. Die Bearbeitung der Inhalte mit Divi ist nicht nur komfortabel, sondern dem Benutzer stehen zudem eine Vielzahl an Gestaltungselementen zur Verfügung.

Der ehemalige Shop war in den Farben Mokka und Weiß gehalten. Der neue Shop sollte – passend zum skandinavisch angehauchten Produktsortiment in einem hellen Look aus weiß und hellgrau strahlen. Schriften, Buttons und ähnliches sind schwarz, besondere Akzente, wie z.b. Angebot-Buttons werden in einem knalligen hellrot hervorgehoben.

Referenzen Bilder Template

Der neue professionelle WooCommerce Shop wurde mit dem Theme Divi erstellt. PERIMETRIK® erstellte mit Divi ansprechende Layouts für die Produktseiten und Archive im Shop. Durch das Erstellen von benutzerdefinierten Taxonomien, z.B. Produktmarken erzeugte PERIMETRIK® zudem SEO-wirksame Landing Pages für begeistern-merten.de.

Referenzen Bilder Template

Der ehemalige WooCommerce Shop von begeistern-merten.de besaß begrenzte Design-Möglichkeiten und wenig SEO-Potential und wirkte nicht mehr zeitgemäß.

Die Startseite im neuen Shop ist klar strukturiert und macht Lust auf mehr. Beliebte Produktkategorien und die neue Artikel im Shop werden ansprechend dargestellt und regen zum Kauf an. Weitere Neuheiten zum Lädchen und dem Sortiment bietet die Sektion News.

Ansprechende Startseite mit Produktübersicht

Stimmungsbilder aus dem Lädchen, Produktneuheiten oder neue Kollektionen werden auf der neuen Homepage anhand eines schicken Sliders dargestellt. Einen Überblick über das aktuelle Angebot im Shop bietet eine passende Sektion mit den wichtigsten Produktgalerien. Darunter folgen neue Produkte und eine Sektion mit aktuellen News über begeistern-merten.de.

Wer wissen möchte wer hinter dem OnlineShop steht, erfährt in der Sektion „Über uns“ alles über das Scheunenlädchen in Bornheim und den dazugehörigen Onlineshop. Um die einzelnen Sektionen aufzulockern baute PERIMETRIK® dazwischen großflächige CTAs mit ansprechenden Stimmungsbildern ein, die mit der passenden Produktseite verlinkt wurden.

Eine Übersicht über alle gängigen Marken im Shop band PERIMETRIK® in Form eines Logo-Sliders ein. Per Klick auf den Button „Weitere Marken“ landet der Benutzer auf einer entsprechenden Übersichtsseite, auf der alle Marken mit Logo und Beschreibung aufgelistet werden. 

Referenzen Bilder Template

PERIMETRIK® erstellte ein zentrales Layout für alle Archiv-Seiten mit Produkt-Übersicht und Sidebar.

Einheitlich gestaltete Archiv-Seiten für alle Produkt-Kategorien

Für jede neu angelegte Produktkategorie wird in WordPress eine passende Archiv-Seite erzeugt. PERIMETRIK® erstellte ein zentrales Layout mit dem Divi Theme Builder, in welchem der Aufbau der Produkt-Archive festgelegt wurde. Alle Produkte, die der entsprechenden Kategorie zugeordnet wurden, werden automatisch mit PCM aufgelistet. Dazu erstellte PERIMETRIK® ein ansprechendes Loop Layout mit Produktfoto, Titel und Preis. Bei Klick auf das Loop Element wird der Benutzer auf die entsprechende Detailseite des jeweiligen Produkts weiter geleitet.

In der rechten Spalte integrierte PERIMETRIK® eine Sidebar mit folgenden Inhalten: Übersicht über alle Produkte im Warenkorb, Produktsuche und Übersicht über alle Produktkategorien.

Informative Produkt-Detailseiten mit Bildergalerie und Info-Tabs

Auch den Aufbau der Produkt-Detailseiten legte PERIMETRIK® in einem zentralen Layout fest. Auf der linken Seite wird das Produktbild dargestellt, weitere Produktbilder können in eine Galerie geladen werden und vom User per Slide-Funktion durchgeklickt werden. Rechts neben dem Slider erscheinen alle wichtigen Infos zum Produkt: Titel, Preis, Mehrwertsteuer, Hinweis zu Versandkosten, Mengenauswahl und Button „In den Warenkorb“. 

Darunter werden alle zugeordneten Taxonomie-Terms (Produkt-Kategorien, Schlagwörter und Marken) verlinkt. 

Eine ausführliche Produktbeschreibung, zusätzliche Informationen sowie Kundenbewertungen werden in form von Auswahl-Tabs dargestellt.

Zusätzlich integrierte PERIMETRIK® zwei Sektionen, in denen dynamisch mit PCM passende weitere Produkte angezeigt werden. Das sind einmal alle Produkte, die der gleichen Marke zugeordnet wurden sowie Produkte, die sich in der oder den gleichen Produktkategorien zugewiesen worden sind. 

Referenzen Bilder Template

Die Detailseiten der Produkte sind ansprechend gestaltet. Alle Infos zum Produkt erscheinen auf einen Blick. Unterhalb der Produktinfos werden mit PCM weitere Produktvorschläge passender Produkte der gleichen Marke oder Kategorie dargestellt.

Referenzen Bilder Template

PERIMETRIK® importierte weit über 1000 Produkte aus dem alten in den neuen WooCommerce Shop begeistern-merten.de. Zusätzlich wurden auch die Produktkategorien sowie die Zuordnung zwischen Produkten und den Kategorien, Schlagwörtern und Marken importiert. 

Import aller Produkte und Kategorien vom alten in den neuen Shop

Nachdem die Struktur im neuen WooCommerce Webshop begeistern-merten.de feststand, die Layouts erstellt wurden und der Shop technisch bereit war importierte PERIMETRIK® alle Produkte, Produktkategorien sowie die entsprechenden Zuordnungen in den neuen Shop. Um alle Informationen korrekt zu übertragen bereitetete PERIMETRIK® dazu ein Produkt-Mapping vor, in welchem genau fest gelegt wurde, welche Daten in welches Datenfeld importiert werden müssen.

Im Anschluss an dem Import überprüfte PERIMETRIK® in mehreren Stichproben, ob die gewünschten Datensätze korrekt übertragen wurden. Um kurz vor dem Launch des neuen Shops den Lagerbestand der Produkte noch einmal zu aktualisieren vergab PERIMETRIK® eine entsprechende Produkt-ID, mit deren Hilfe einzelne Datenfelder bei Bedarf noch einmal importiert werden können.

Zu Landing Pages ausgebaute Archiv-Seiten für Marken

Im ehemaligen Onlineshop begeistern-merten.de waren die Herstellermarke Bestandteil der Produktkategorien. Im neuen Shop erstellte PERIMETRIK® eine eigene Taxonomie „Marken“. Somit sind die Inhalte sauber getrennt und alle Marken erhalten automatisch einen eindeutigen URL-Slug, z.b.: https://begeistern-merten.de/marken/house-doctor/.

Da ebenso wie für die Produktkategorien auch für die einzelnen Marken ein Archiv generiert wird, erstellte PERIMETRK® auch hier ein zentrales Layout für die Terms der Taxonomie Marken. In der Titelsektion wird das Logo der jeweiligen Marke in Form eines Bildes dargestellt. Daneben ist Platz für einen kurzen Beschreibungstext zur Marke, z.B. zu ihrer Geschichte, Stil, Motto etc. Darunter werden mit PCM alle Produkte, die der Marke zugeordnet wurden aufgelistet. Innerhalb einer Sidebar kann der Benutzer zudem auch hier direkt nach einem bestimmten Produkt suchen und erhält eine Übersicht über alle Produktkategorien.

Referenzen Bilder Template

Die Archiv-Seiten der einzelnen Marken baute PERIMETRIK® zu attraktiven Landing Pages mit ansprechender Titelsektion und dynamischer Produktausgabe aus.

Referenzen Bilder Template

Im Warenkorb werden alle „eingepackten“ Artikel übersichtlich aufgelistet. Falls vorhanden kann der Besteller hier seinen Gutschein einlösen, außerdem kann die Versandart gewählt werden. Je nach Auswahl wird im Warenkorb in Echtzeit die Warenkorb-Summe angepasst. 

Übersichtlicher Warenkorb mit Versandberechnung

Per Klick auf den Button „in den Warenkorb“ kann der Kunde auf jeder Produkt-Detailseite sein Wunschprodukt in den Warenkorb legen. Hier werden die Produkte gesammelt und sind dann bereit für die Bestellung. Per Button „zum Warenkorb“ kann der User direkt von der Produktseite auf die Warenkorb-Seite wechseln. Ebenso gelangt er jederzeit per Klick auf das kleine Einkaufswagen-Symbol im Header direkt zum Warenkorb.

Im Warenkorb werden alle eingepackten Artikel übersichtlich untereinander aufgelistet. Der User hat per Klick auf ein kleines „x“ die Möglichkeit unerwünschte Artikel aus dem Warenkorb zu entfernen. Anhand eines Zählers kann er im Warenkorb die Mengenanzahl der einzelnen Produkte ggf. noch einmal ändern. Zusätzlich integrierte PERIMETRIK® ein Freitextfeld, in welchem der Besteller einen Gutscheincode eingeben kann, sofern er über einen Gutschein verfügt. Der Gutscheinwert wird dann bereits im Warenkorb von der Gesamtsumme abgezogen.

Unterhalb der Produkt-Übersicht wird automatisch die Warenkorb-Summe berechnet. Dazu werden alle Produkte addiert und ggf. die Versandkosten dazu gerechnet. Der Besteller kann hier wählen zwischen „Verpackung und Versand Pauschal“ zum Preis von 4,99 € oder „Abholung vor Ort“ (versandkostenfrei). Außerdem fallen ab einem Gesamt-Bestellwert von mindestens 80,- € keine Versandkosten an. Hat der Benutzer die gewünschte Versandart ausgewählt landet er per Klick auf den Button „Weiter zur Kasse“ im Checkout des WooCommerce Shops.

Komfortabler Checkout mit sicheren Bezahlmethoden

Für den Checkout erstellte PERIMETRIK® ein professionelles Formular zur Eingabe der persönlichen Daten. Pflichtfelder sind mit einem roten Sternchen * markiert. Weicht die Lieferadresse von der Rechnungsadresse ab, kann der Besteller eine entsprechende Checkbox aktivieren. Mit Conditional Logic laden daraufhin weitere Formularfelder, in der die Daten zur Lieferung eingetragen werden können. 

Unterhalb der persönlichen Datenfelder kann der Benutzer die gewünschte Zahlungsart auswählen. Zur Verfügung stehen Vorkasse und PayPal. Bei Klick auf den Button „Jetzt Kaufen“ ist die Bestellung abgeschlossen und der Benutzer erhält eine entsprechende Bestellbestätigung. PERIMETRIK® erstellte mit dem Tool Germanized verschiedene Bestellbestätigungen. Je nach ausgewählter Versand- oder Zahlungsart erhält der Käufer individuelle Informationen und Hinweise zum Versand seiner Bestellung und der Zahlungsabwicklung.

 

Im Checkout kann der Besteller seine Rechnungsdaten und ggf. eine abweichende Lieferadresse eingeben. Die Datenübertragung findet selbstverständlich verschlüsselt statt. Als Zahlungsarten stehen PayPal und Vorkasse zur Verfügung. Per Klick auf „Jetzt kaufen“ wird der Kaufvorgang abgeschlossen.

Fazit:

Der neue WooCommerce Webshop begeistern-merten.de erscheint in einem frischen, modernen Look und ist übersichtlich aufgebaut. Sinnvolle Produktkategorien leiten den Interessenten gezielt zu seinen Wunschprodukten. Wer auf der Suche nach Artikeln einer bestimmten Marke ist, kann auf der passenden Archiv-Seite nach neuen Produkten seiner Lieblingsmarke stöbern. Konkrete Produktvorstellungen werden leicht über die Suche gefunden. Sinnvolle Produktvorschläge zu passenden Produkten der gleichen Marke oder der gleichen Kategorie inspirieren den User weiter einzukaufen.

Warenkorb- und Checkout sind benutzerfreundlich und sicher, die Datenübertragung findet selbstverständlich verschlüsselt statt. Zudem ist der neue Shop durch seine saubere Struktur und die zahlreichen neuen Archiv-Seiten viel SEO-freundlicher als der ehemalige Shop. 

Weitere Projekte für Kunde: begeiStern, Bornheim

Unsere Lösungen für dieses Projekt:

In diesem Projekt konnten wir auf einige bewährte Lösungen zurückgreifen:

B2C Shop

Sie möchten ins Online-Geschäft einsteigen oder Ihren Shop professionell neu aufbauen? Wir entwicklen Ihnen einen B2C-Shop mit WooCommerce, der auch für Neu-Einsteiger komfortabel zu betreiben ist, über eine gute Usability verfügt und Ihre Kunden zum Kauf weiterer Produkte anregt.

Benutzerdefinierte Taxonomien

Mit benutzerdefinierten Taxonomien lassen sich Ihre WordPress-Daten sinnvoll gliedern. Benutzerdefinierte Taxonomien, die häufig vorkommen sind z.B. Themen oder Bereiche. Was viele nicht wissen: Richtig genutzt bieten benutzerdefinierte Taxonomien eine hervorragende Grundlage zur Erstellung SEO-relevanter Landing Pages. Wir erstellen sinnvolle Taxonomien für Ihre WordPress-Website und schaffen Ihnen damit zahlreiche Landing Pages zu branchenrelevanten Suchbegriffen.

DSGVO-konformer Cookie-Hinweis

Cookie mit Opt-In-Funktion – PERIMETRIK® erstellt Ihnen einen DSGVO-konformen Cookie-Hinweis für Ihre WordPress Website.

URL-Weiterleitung

Sie wünschen einen Website-Relaunch, möchten aber keine Rankings verlieren? Wir nehmen sinnvolle URL-Weiterleitungen auf passende Linkziele in Ihrer neuen Website vor und sichern damit alle wichtigen Rankings.

WooCommerce Webshop

Sie träumen von einem florierenden Online-Geschäft? Wir erstellen Ihnen einen professionellen WooCommerce-Shop, mit dem Sie Ihre Produkte einfach und sicher im Web verkaufen können. Egal ob B2B oder B2C – wir arbeiten nach Ihren individuellen Anforderungen und machen Ihren Shop zu einem attraktiven Einkaufserlebnis, egal ob für Zwischenhändler oder Endkunden.

Sie benötigen ebenfalls Unterstützung bei der Erstellung eines professionellen WooCommerce Webshops?

Kunden ähnlicher Branchen