Highlights:
- Der neue und der alte WooCommerce Webshop im Vergleich
- Entwicklung einer ansprechenden Startseite
- Übersichtliches Mega-Menü für alle Produktkategorien
- Einheitlich gestaltete Archiv-Seiten für alle Produkt-Kategorien
- Informative Produkt-Detailseiten mit Bildergalerie und Info-Tabs
- Export von Produkten und Produktkategorien
- zu SEO-wirksamen Landing Pages ausgebaute Archiv-Seiten für Marken
- Übersichtlicher Warenkorb mit Versankostenberechnung
- Komfortabler Checkout mit verschlüsselter Datenübertragung
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.
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.
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.
Übersichtliches Megamenü für alle Produktkategorien im neuen Shop
Da der Online-Shop begeistern-merten.de über zahlreiche Produktkategorien verfügt, wünschte Frau Kemper sich ein übersichtliches Megamenü, in welchem alle Kategorien auf einen Blick dargestellt werden. PERIMETRIK® entwickelte das Menü mit Hilfe eines WordPress PlugIns so, dass neue Kategorien und Taxonomie-Terms automatisch im Menü ergänzt werden.
Für die Darstellungen auf Mobilgeräten stellte PERIMETRIK® zusätzlich ein eigenes Mobile Menü zur Verfügung. Diese wird automatisch ab einer bestimmten Desktopgröße angezeigt.
Das Megamenü zeigt alle Produktkategorien in einer Übersicht. Neue Kategorien werden automatisch im Menü ergänzt.
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.
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.
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.
Die Archiv-Seiten der einzelnen Marken baute PERIMETRIK® zu attraktiven Landing Pages mit ansprechender Titelsektion und dynamischer Produktausgabe aus.
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.
