Einen WooCommerce-Shop mit WordPress starten
WooCommerce übernimmt den Betrieb des Shops: die Produkte, die Bestellungen, die Steuern und die Zahlungen. Was WooCommerce nicht leistet, ist, dass all das wie Ihre Marke aussieht. Dieser Leitfaden erstellt die vier Bildschirme, die Käufer tatsächlich sehen, mit Blöcken im Editor, den WordPress bereits mitliefert.
Schritt 1: WooCommerce installieren
WooCommerce ist ein kostenloses Plugin aus dem WordPress-Plugin-Verzeichnis und bleibt für alle kommerziellen Aufgaben zuständig: für die Produktdaten, den Lagerbestand, die Bestellungen, die Steuerregeln, die Versandzonen und die Zahlungsgateways. Canvas ersetzt diese Ebene nie, deshalb funktionieren Ihre anderen WooCommerce-Erweiterungen weiterhin.
Zwei Wege zur Installation
- Überlassen Sie das dem Einrichtungsassistenten. Wählen Sie während der Einrichtung eine Shop-Demo, dann installiert und aktiviert der Schritt für die Plugins WooCommerce, bevor der Import läuft, weil ein Shop ein Shop-Plugin braucht.
- Installieren Sie es selbst über Plugins > Installieren und starten Sie das WooCommerce-Onboarding. Wählen Sie diesen Weg, wenn Sie einer bereits bestehenden Website einen Shop hinzufügen.
In beiden Fällen sollten Sie das WooCommerce-Setup einmal durchgehen und dessen Fragen zu Ihrem Land, Ihrer Währung und Ihrem Sortiment beantworten. Diese Angaben bestimmen später Steuern und Versand, und sie lassen sich nur mühsam korrigieren.
Richten Sie einen E-Mail-Versanddienst ein, bevor Sie die erste echte Bestellung annehmen. Bestellbestätigungen werden standardmäßig über Ihren Server aus WordPress versendet, und ein Shop, dessen Belege im Spam landen, erzeugt Support-Tickets, die Sie nicht beantworten können.
Schritt 2: Starten Sie mit einer Shop-Demo oder mit einem leeren Katalog
Sie haben hier eine Wahl, und sie verdient zehn Minuten Überlegung.
Importieren Sie eine Shop-Demo
21 der 88 Demos sind funktionierende WooCommerce-Shops. Der Import eines davon liefert Ihnen Produkte, Kategorien, Attribute, Swatch-Farben, einen gestalteten Shop, eine gestaltete Produktseite, einen Warenkorb und einen Checkout, alles bereits eingerichtet und vollständig editierbar. Es ist der schnellste Weg, um zu sehen, wie die Teile zusammenpassen, und Sie können den gesamten Import zurücknehmen, falls Sie sich dagegen entscheiden.
Mit Ihrem eigenen Katalog aufbauen
Wenn Sie bereits verkaufen und Produkte in der Datenbank haben, wählen Sie den Umfang „Nur Seiten“ für Ihre bestehende Website. Sie übernehmen die Demoseiten und die Datensätze, die sie nutzen, ohne deren Einstellungen, Menüs oder Startseite, und Ihr Katalog bleibt genau dort, wo er ist.
In beiden Fällen werden die WooCommerce-Seiten auf Ihrer Website übernommen, damit es immer nur einen Shop, einen Warenkorb, eine Kasse und eine Kontoseite gibt.
Schritt 3: Fügen Sie Ihre ersten Produkte hinzu
Produkte sind WooCommerce-Datensätze, die unter Produkte im WordPress-Admin angelegt werden, und dieser Teil ist bewusst unspektakulär. Investieren Sie die Zeit hier und nicht in das Layout, denn eine gute Produktseite besteht vor allem aus guten Produktdaten.
- Ein klares Foto pro Produkt, für jeden Artikel auf dieselbe Weise aufgenommen. Ein Katalograster wirkt gestaltet, wenn die Formen zusammenpassen, und lieblos zusammengestellt, wenn nicht.
- Eine kurze Beschreibung, die die Frage beantwortet, die Käufer tatsächlich haben. Größe, Material, Lieferzeit und was passiert, wenn der Artikel nicht passt.
- Kategorien, die dem Einkaufsverhalten entsprechen, nicht der Organisation Ihres Lagers.
- Attribute für alles, was variiert. Farbe, Größe, Oberfläche. Geben Sie den Farbbegriffen im Admin-Bereich einen echten Farbwert, denn genau dadurch werden Dropdowns später zu Farbmustern.
- Lagerbestand, Gewicht und Abmessungen, wenn Sie physische Waren versenden. Versandregeln lesen diese Angaben aus.
Fügen Sie vor dem Gestalten drei Produkte hinzu. Ein Layout, das nur anhand eines einzigen Platzhalterprodukts beurteilt wird, müssen Sie später neu bauen.
Schritt 4: Shop-Seite gestalten
Der Shop ist ein Katalog, und seine Aufgabe ist es, Besucher schnell zu einer Produktseite zu führen. Canvas bietet dafür Blöcke, wobei die übliche Lösung eine Theme-Einstellung mit drei Layoutoptionen ist.
Die Blöcke
Ein Produktraster zeigt Produkte aus einer Kategorie, einem Schlagwort, einer Suche oder einer handverlesenen Liste. Ein Produktkarussell tut dasselbe in einer Reihe für die Startseite. Produktkategorie-Karten führen Besucher in einen Bereich. Ein Preisfilter hilft Käufern, einen umfangreichen Katalog einzugrenzen. Jeder davon ist ein Block mit einem Einstellungsbereich, sodass Spaltenanzahl, Quelle und Sortierung über Bedienelemente gesteuert werden und kein Code nötig ist.
Das darunterliegende Template
Der Shop selbst ist ein Block-Template, das Sie im Website-Editor öffnen können. Richten Sie ihn in voller Breite ein, mit einer linken Seitenleiste, einer rechten Seitenleiste oder beidem, je nachdem, ob Filter und Kategorien in Ihrem Katalog einen Platz verdienen. Insgesamt gibt es 18 Shop-Templates, die den Shop, die Produktseite, die Archive, den Warenkorb und die Kasse abdecken.
Die shopweiten Standardeinstellungen
Die Theme-Optionen umfassen 39 Shop-Einstellungen, verteilt auf 5 Tabs: für den Katalog, die Produktseite, den Warenkorb und die Kasse, den Mini-Warenkorb im Header sowie den Katalogmodus. Produkte pro Seite, die Pagination, die Form der Produktbilder, ob zusätzliche Galeriebilder beim Hover eingeblendet werden und was das Hover-Overlay anbietet, werden dort festgelegt. Ein Block, der eine dieser Einstellungen selbst setzt, hat auf der Seite, auf der er steht, weiterhin Vorrang.
Schritt 5: Produktseite gestalten
Diese Seite verkauft, daher verdient sie mehr als die Standardanordnung, die jeder Shop im Internet verwendet.
Aus Bausteinen aufbauen
Jedes Element einer Produktseite ist ein Block: die Bildergalerie, der Preis, die Sternebewertung, die Meta-Angaben, die Kurzbeschreibung, die Variationsauswahl, die Schaltfläche „In den Warenkorb“, die Tabs, die Teilen-Zeile und die verwandten Produkte. Verschieben Sie sie, gestalten Sie sie neu oder lassen Sie einen Block ganz weg, und die Seite funktioniert trotzdem, weil jeder Block WooCommerce nach seinen eigenen Daten fragt.
Oder starten Sie mit einem mitgelieferten Layout
Wenn Sie nicht aus einzelnen Teilen starten möchten, wählen Sie eines der mitgelieferten fertigen Produktlayouts und verschieben Sie die Elemente: das Standardlayout, eine fixierte Produktzusammenfassung, die beim Scrollen der Galerie mitläuft, eine Liste, ein farbbetontes Design, ein Shop-Design, zwei Galerielayouts mit individueller Verlinkung sowie Varianten mit einer linken, einer rechten oder zwei Seitenleisten. Weisen Sie im Editor jedem Produkt ein Layout zu oder legen Sie das Standardlayout des Shops in den Theme-Optionen fest.
Was Sie im sichtbaren Bereich der Seite platzieren sollten
Das Foto, der Name, der Preis, die Variantenauswahl und der Button „In den Warenkorb“. Alles Übrige, auch die Beschreibung, die die meisten Leute nie lesen, kann darunter stehen. Prüfen Sie das auf dem Smartphone, bevor Sie widersprechen.
Schritt 6: Der Warenkorb und die Kasse
Auf diesen beiden Bildschirmen geht das meiste Geld verloren, und in den meisten Themes dürfen Sie genau diese beiden Bildschirme nicht anfassen. Hier sind sie wie alles andere auch Blöcke.
Der Warenkorb
Ein Block „Canvas Cart Table“ für die Artikel, ein Block „Canvas Cart Totals“ für die Summen und ein Block „Canvas Cross-Sells“ für Artikel, die Käufer tatsächlich noch hinzufügen könnten. Halten Sie es kurz und den Button gut sichtbar. Der häufigste Fehler im Warenkorb ist eine Wand aus Werbeinhalten zwischen den Summen und dem Button zur Kasse.
Der Checkout
Ein Abrechnungsblock für das Formular, ein Bestellübersicht-Block für die gekauften Artikel und ein Hinweisblock für die Meldungen, die dem Kunden zeigen, was passiert ist. WooCommerce übernimmt weiterhin die Bestellung, die Zahlung und die E-Mails. Sie legen fest, wie der Bildschirm wirkt.
Regeln, die sich auszahlen
- Fragen Sie nur die Felder ab, die Ihr Versand tatsächlich benötigt.
- Zeigen Sie die Gesamtkosten einschließlich Versand schon vor dem Zahlungsschritt an.
- Geben Sie an, wann die Bestellung eintrifft, in Tagen und ausgeschrieben.
- Platzieren Sie Ihre Rückgaberichtlinie dort, wo ein unsicherer Erstkäufer sie sofort findet.
Schritt 7: Swatches, Button „In den Warenkorb“ und Kartenstile
Drei Verhaltensweisen des Shops, für die sonst meist je ein eigenes Plugin nötig wäre, gehören zur Integration.
- Farbfelder für Attribute. Weisen Sie einem Produktattribut im Backend eine Farbe zu, dann zeigen variable Produkte statt eines Dropdowns Farbpunkte oder Buttons an. Kunden erkennen die passende Variante direkt und wählen sie aus, was auf dem Smartphone besonders zählt.
- In den Warenkorb legen, ohne die Seite neu zu laden. Wenn ein Produkt aus einem Raster, einem Karussell oder einem Kartenoverlay hinzugefügt wird, aktualisiert sich der Warenkorb direkt auf der Seite. So bleibt der Kunde auf der Seite, die er gerade betrachtet, und der Warenkorb im Header zeigt die Anzahl weiterhin an.
- Stile für Produktkarten. Legen Sie für alle Katalogbilder eine einheitliche Form fest, damit das Raster ausgerichtet bleibt. Wählen Sie, ob weitere Galeriebilder beim Überfahren erscheinen oder als Diaschau ablaufen, und bestimmen Sie, was das Overlay beim Überfahren bietet: Kaufen, Schnellansicht oder beides.
Alle drei sind Einstellungen. Keine davon erfordert ein Snippet, ein Child-Theme oder ein zweites Plugin, und jede lässt sich ausschalten, wenn Sie das schlichtere Verhalten bevorzugen.
Einige Themes verkaufen diese Ebene separat. OceanWP bietet eine kostenlose WooCommerce-Integration und vertreibt Ocean eCommerce Pro als eigenständiges Produkt. Wie sich Canvas mit OceanWP vergleicht zeigt, was jeder Tarif für einen Shop enthält.
Schritt 8: Zahlungen, Geschwindigkeit, dann eine Testbestellung
Gestaltung kommt zuletzt, Geld zuerst. Arbeiten Sie das durch, bevor Sie jemandem sagen, dass der Shop geöffnet ist.
Die kommerzielle Einrichtung in WooCommerce
- Verbinden Sie die Zahlungsanbieter, die Sie nutzen möchten, und schließen Sie deren Verifizierung ab. Das dauert meist länger, als Sie erwarten.
- Legen Sie Steuerregeln und Versandzonen für die Orte fest, in die Sie tatsächlich versenden.
- Schreiben Sie die Seiten zu Rückerstattung, Rückgaben und Lieferung und verlinken Sie sie in der Fußzeile und an der Kasse.
Geschwindigkeit in Canvas
WooCommerce lädt auf jeder Seite einer Website Skripte und Stylesheets, auch auf denen, die nichts verkaufen. Fünf Schalter machen das rückgängig: WooCommerce-JavaScript auf Seiten entfernen, die keine Shop-Ausgabe rendern, das Tracking der Bestellzuordnung deaktivieren, verhindern, dass das Cart-Fragments-Skript auf jeder Seite mit Warenkorb den Server abfragt, und die Bibliotheken für Passwortstärke und Select außerhalb der Konto- und Kassenseiten entfernen. Sie gehören zu 35 Optimierungen, und alle lassen sich rückgängig machen.
Dann eine echte Bestellung aufgeben
Kaufen Sie in Ihrem eigenen Shop etwas, auf dem Smartphone, im Mobilfunknetz. Bezahlen Sie mit einer echten Karte, falls Ihr Zahlungsanbieter eine Testrückerstattung unterstützt. Prüfen Sie, ob die Bestätigungs-E-Mail ankommt und ob die Bestellung im Admin-Bereich erscheint, und erstatten Sie sich den Betrag anschließend selbst. Alles, was Sie in diesen fünf Minuten finden, hätte stattdessen ein Kunde gefunden.
Quellen
Wenn dieser Leitfaden etwas außerhalb von Canvas selbst beschreibt, finden Sie hier die offiziellen Seiten, die es dokumentieren.
- Installation und Deinstallation von WooCommercewoocommerce.com · WooCommerce ist kostenlos, wird über den Plugins-Bildschirm installiert und öffnet seinen eigenen Einrichtungsassistenten
- WooCommerce-Seitenwoocommerce.com · WooCommerce legt jeweils eine Seite für den Shop, den Warenkorb, die Kasse und das Konto fest
- Steuern in WooCommerce einrichtenwoocommerce.com · Steuersätze werden in den WooCommerce-Einstellungen festgelegt
- Versandzonen einrichtenwoocommerce.com · Eine Versandzone ist ein geografisches Gebiet, in das Sie versenden
- Tracking der Bestellzuordnungwoocommerce.com · Was die Bestellzuordnung erfasst und welche WooCommerce-Einstellung sie abschaltet
Wie es weitergeht
Zwei Leitfäden für die übrigen Seiten rund um den Shop sowie alle Shop-Funktionen im Detail.
Häufige Fragen
Die vollständige FAQ beantwortet alle weiteren Fragen, und die Dokumentation beschreibt jede Einstellung im Detail.
Brauche ich das WooCommerce-Plugin noch?
Ja, ein Shop mit Canvas läuft weiterhin mit dem WooCommerce-Plugin. Canvas ergänzt Blöcke, Templates und Optionen und überlässt dem Plugin die Führung, sodass Bestellungen, Produkte, Steuern, Versand und Zahlungen dort bleiben, wo Ihre anderen Erweiterungen sie erwarten. Wenn Sie mit einer Shop-Demo beginnen, installiert und aktiviert der Einrichtungsassistent WooCommerce, bevor der Import läuft.
Müssen die Shop-Blöcke extra gekauft werden?
Nein, die Shop-Blöcke von Canvas sind in jedem Tarif ohne Aufpreis enthalten. Alle 24 Shop-Blöcke sind Premium-Blöcke, und jeder Tarif umfasst jeden Premium-Block, dazu alle 18 Shop-Templates und alle 21 vollständigen Shop-Demos. Es gibt weder eine eigene E-Commerce-Stufe noch ein Shop-Add-on.
Kann ich diese mit den WooCommerce-Blöcken kombinieren?
Ja, Sie können sie frei kombinieren: Die Canvas-Shop-Blöcke sind gewöhnliche registrierte Blöcke. Sie stehen daher neben den WooCommerce-Blöcken und Core-Blöcken im selben Template und auf derselben Seite. Ersetzen Sie jeweils ein Element und lassen Sie den Rest des Layouts unverändert.
Erhalte ich durch den Import einer Shop-Demo zwei Checkouts?
Nein, beim Import einer Shop-Demo für Canvas erhalten Sie nur eine Kasse. Der Importer findet die Seiten für Shop, Warenkorb, Kasse und Mein Konto, die Ihre Website bereits hat, und verknüpft die Menüs und Links der Demo mit ihnen, sodass Sie von jeder Seite nur eine behalten. Ihre vorhandenen Produkte und Bestellungen bleiben unberührt, und der gesamte Import lässt sich rückgängig machen.
Erstellen Sie Ihre nächste Website mit Canvas
Ob Einsteiger, Freelancer oder Agentur: Sie erhalten dieselben Blöcke und dieselben Demos. Beginnen Sie mit einer Website und erstellen Sie so viele, wie Sie benötigen, mit derselben Lizenz.