Erste Schritte mit WooCommerce Starten Sie Ihren Store

WooCommerce bringt ernsthaft großen E-Commerce in WordPress. Im ersten Teil unserer Serie haben wir uns mit der Installation und dem Setup befasst. Heute gehen wir weiter und sprechen über Produkte, besprechen die verschiedenen Produkttypen, die WooCommerce anbietet, und fügen unsere ersten Produkte unserer Website hinzu. Anschließend werden wir WooCommerce neu gestalten und gestalten, bevor wir die nächsten Schritte abschließen.

---

Ihr erstes Produkt hinzufügen

So sind wir endlich bereit, unsere ersten Produkte hinzuzufügen! Ich finde es immer besser, einige Produkte hinzuzufügen, bevor Sie das Styling betrachten, da Sie sehen können, wie alles aussieht, wenn Sie Setup-Produkte, Cross-Sells, Upsells, Verkäufe usw. haben. Selbst wenn Sie einige Platzhalterprodukte erstellen, können Sie Zeit sparen Später wieder rein, um einen Fehler mit etwas zu beheben, an das Sie ursprünglich nicht gedacht hatten. Bei WooCommerce-Produkten handelt es sich im Wesentlichen um Beiträge in einem benutzerdefinierten Beitragstyp. Das Hinzufügen neuer Produkte sollte den meisten WordPress-Benutzern bekannt sein, offensichtlich gibt es einige "Spezielle Sauce" dort, um die E-Commerce-Magie hinzuzufügen! Lassen Sie uns einige Produkte hinzufügen.

WooCommerce unterstützt vier verschiedene Produkttypen:

1. EIN Einfach Produkt wird in den meisten Fällen verwendet. Normalerweise wird das Produkt versendet und hat keine Optionen. Zum Beispiel ein Brettspiel oder einen Regenschirm. (Weil wir alle Brettspiele und Regenschirme verkaufen?)
2. EIN Gruppiert Produkt ist eine Sammlung verwandter Produkte, die einzeln erworben werden können. Eine Playstation3 könnte beispielsweise ein gruppiertes Produkt sein, wobei 80 GB, 120 GB und 200 GB Variationen des gleichen Stammprodukts sind.
3. Ein Externe oder Affiliate Das Produkt ist auf Ihrer Liste in Ihrem Online-Shop und kann beschreiben, wird aber auf einer Website eines Drittanbieters verkauft.
4. Ein variables Produkt ist das komplexeste Produkt, mit dem gearbeitet werden kann. Ich kann mehrere verschiedene Versionen haben, jede mit ihrer eigenen Artikelnummer, Preis und Aktienoptionen. Am häufigsten in Kleidung verwendet, zum Beispiel ein T-Shirt, das in verschiedenen Größen und Farben erhältlich ist.

Da WooCommerce auf der Standard-WordPress-Post-Funktionalität basiert, erhalten Sie auch eine Reihe benutzerdefinierter Taxonomien. Kategorien und Tags verhalten sich genauso wie Sie für Ihre Blogbeiträge. Wenn Sie sicherstellen, dass Sie Ihre Store-Kategorien richtig verwenden, kann dies die tatsächliche Marke oder den Bruch Ihres Stores sein. Auf diese Weise navigieren die Menschen in Ihren Produkten, und denken Sie sorgfältig über Ihre Kategoriestruktur nach. Sie können auch untergeordnete Kategorien erstellen. Verwenden Sie diese daher zur Kategorisierung Ihrer Produkte.

Ein einfaches Produkt hinzufügen

Das Hinzufügen eines einfachen Produkts sollte den meisten WordPress-Benutzern vertraut sein. Die Benutzeroberfläche ist fast identisch mit dem Standard-WordPress-Postbildschirm, mit zusätzlichen benutzerdefinierten Meta-Boxen. Sie geben Ihren Produkttitel und Ihre Beschreibung in das Hauptdialogfeld von WordPress ein. Sie können alle Formatierungen verwenden, die Sie in einem normalen WordPress-Beitrag verwenden würden.

Darunter ist die Produktdaten Meta-Box. Hier fügen Sie viele wichtige Informationen hinzu. Am oberen Rand befindet sich der Dropdown-Selektor für Produkttypen. Hier wählen Sie Ihren Produkttyp aus. Sie können auch die Kontrollkästchen aktivieren, wenn es sich um ein virtuelles oder herunterladbares Produkt handelt (wir werden später darauf zurückkommen). Zuerst haben wir die Registerkarte "Allgemein" Hier stellen Sie Ihre SKU (Stock Keep Unit) ein, die als eindeutige Kennung für Ihr Produkt verwendet wird (diese Option ist optional und kann in den Katalogeinstellungen, wie in unserem Installationshandbuch beschrieben, in der gesamten Site deaktiviert werden.).

Als nächstes haben wir Ihre Preisfelder. Der reguläre Preis ist Ihr normaler Verkaufspreis für das Produkt. Sie können auch einen Verkaufspreis mit einem Zeitplan für diesen Verkaufspreis festlegen. Dies ist eine schöne Ergänzung, da Sie einen Zeitplan für ein Wochenendangebot erstellen können. Benutzer sehen den vollen Preis und den Sonderverkaufspreis. Unter den Preisfeldern finden Sie Gewichts- und Maßfelder (wenn Sie sie nicht in den Katalogeinstellungen deaktiviert haben). Diese Felder können besonders nützlich sein, wenn Sie eine Versanderweiterung wie UPS oder FedEx verwenden, da Sie auf dieser Grundlage automatisch die Versandkosten berechnen können Abmessungen und Gewichte.

Wir gehen weiter zum Steuer Tab, Hier können Sie den Steuerstatus Ihrer Produkte überschreiben oder die Steuerklasse definieren, wenn Sie in Ihrer Steuereinstellung zusätzliche Steuerklassen eingerichtet haben. In dem Registerkarte Inventar Auf diese Weise können Sie Ihre globalen Bestandseinstellungen für ein einzelnes Produkt überschreiben und Optionen für die Bearbeitung von Rückständen ändern. Auch mit dem Registerkarte Versand Sie können eine bestimmte Versandklasse für Ihr Produkt definieren, wenn Sie über diese Einstellungen verfügen.

Wir gehen jetzt zu einem wirklich interessanten Feature auf der Registerkarte "Verwandte Produkte". Von hier aus können Sie Ihre Produkte miteinander kombinieren. Starten Sie einfach den Produktnamen und es wird eine Suche anhand Ihrer Produktliste durchgeführt. Up-Sells werden auf der Produktdetailseite angezeigt. Hierbei handelt es sich um Produkte, bei denen Sie die Benutzer dazu auffordern können, ein Upgrade auf der Grundlage des aktuell angezeigten Produkts durchzuführen. Wenn der Benutzer beispielsweise die Nintendo DS-Produktlistenseite anzeigt, möchten Sie den Nintendo 3DS auf derselben Seite als Up-Selling anzeigen. Cross-Sells sind Produkte, die im Warenkorb angezeigt werden und sich auf den Warenkorbinhalt des Benutzers beziehen. Wenn der Benutzer beispielsweise einen Nintendo DS zu seinem Einkaufswagen hinzufügt, möchten Sie möglicherweise beim Eintreffen der Warenkorbseite vorschlagen, dass er auch Ersatz-Stylus kauft.

Das Registerkarte "Attribute" Wir werden später kommen, wenn wir über variable Produkte sprechen. Endlich haben wir die Registerkarte "Erweitert" Legen Sie hier eine optionale Notiz fest, die Sie nach dem Kauf an Ihren Kunden senden, geben Sie dem Produkt eine benutzerdefinierte Menüposition und legen Sie seine Gruppe fest (wenn Sie ein gruppiertes Produkt verwenden). Sie können hier auch Ihre globale Überprüfungseinstellung überschreiben.

Darunter sehen Sie die Kurzbeschreibung des Produkts Dies ist Ihr Produktauszug. Wenn Sie hier nichts eingeben, wird automatisch ein beliebiger WordPress-Beitrag erstellt.

Schließlich haben Sie im Veröffentlichungsfenster eine Reihe zusätzlicher Optionen:

• Katalog und Suche - Überall sichtbar.
• Katalog - Nur in den Katalogschleifen sichtbar, wird in den Suchergebnissen nicht angezeigt.
• Suche - Nur in Suchergebnissen sichtbar und wird nicht im Katalog angezeigt.
• Versteckt - Nur auf der einzelnen Produktseite sichtbar, wird nicht in Katalogseiten oder in Suchergebnissen angezeigt.

Produktmedien

Wie Sie es von jedem E-Commerce-System erwarten können, können Sie Ihren Produkten mehrere Bilder hinzufügen, und WooCommerce wird sie gut verarbeiten. Wenn Sie mit WordPress 3.5 arbeiten, profitieren Sie auch vom verbesserten Medienmanager. Das Hinzufügen von Bildern zu Ihrem Produkt entspricht in etwa jedem WordPress-Beitrag. Sie können ein ausgewähltes Bild festlegen und auch mehrere Bilder hinzufügen. Der Unterschied besteht darin, dass Sie nichts in Ihren Beitrag einfügen müssen. Jedes Bild, das Sie an Ihr Produkt anhängen, aber nicht als ausgewähltes Bild festgelegt sind, wird unter Ihrem präsentierten Bild angezeigt und bildet eine kleine Produktgalerie. Unten sehen Sie ein Beispiel. WooCommerce hat auch einen eigenen integrierten Lightbox-Effekt, den Sie in Ihren WooCommerce-Einstellungen je nach Ihren Anforderungen ein- oder ausschalten können.

Gruppiertes Produkt hinzufügen

Ein gruppiertes Produkt wird ähnlich wie ein einfaches Produkt erstellt. Der einzige Unterschied ist die Auswahl von "Gruppiert" in der Dropdown-Liste "Produkttyp" auf der Registerkarte "Allgemein". Bei der Auswahl dieses Feldes verschwinden mehrere Felder. Dies ist in Ordnung. Sie fügen diese Felder den einzelnen untergeordneten Produkten hinzu. Wenn Sie mit dem gruppierten (übergeordneten) Produkt zufrieden sind, veröffentlichen Sie es und kehren Sie zur Seite Neues Produkt hinzufügen zurück.

Jetzt müssen Sie das untergeordnete Produkt hinzufügen, das sich innerhalb des gruppierten Produkts befindet. Die einzigen Informationen, die Sie hier eingeben müssen, sind folgende:

1. Titel. Z.B. Playstation 3 80 GB.
2. Produkttyp (einfach).
3. Produktpreis und Lager.
4. Übergeordneter Beitrag (auf der Registerkarte "Erweitert"). Wählen Sie Ihr Elternteil (E.G. Playstation 3) aus der Auswahlbox.

Virtuelles Produkt hinzufügen

Ein virtuelles Produkt ist ein Produkt, das nicht ausgeliefert wird und keinen Lagerbestand zur Verwaltung hat. Wenn Sie ein einfaches Produkt hinzufügen, markieren Sie einfach das "virtuelle" Kästchen im Produkttypfeld und alle nicht benötigten Felder (wie Abmessungen oder Gewicht) werden entfernt. Ein virtuelles Produkt kann aus einer einmaligen Gebühr bestehen, um auf Teile Ihrer Website zuzugreifen, bei denen der Käufer manuell in eine neue Gruppe verschoben oder die WooCommerce Groups-Erweiterung verwendet wird.

Ein herunterladbares Produkt hinzufügen

Wie bei einem virtuellen Produkt können Sie beim Hinzufügen eines einfachen Produkts das Kontrollkästchen "Download" auswählen. Dadurch werden drei neue Felder hinzugefügt:

• Dateipfad - Dies ist der Pfad für die Datei, die Sie nach dem Kauf bereitstellen möchten. Sie können auch eine Datei hier hochladen und WooCommerce legt sie in einem speziellen Ordner ab, auf den der Zugriff beschränkt ist.
• Laden Sie das Limit herunter - Hier können Sie einschränken, wie oft Ihr Käufer die Datei herunterladen darf. Sie können es leer lassen, um unbegrenzte Downloads erneut zuzulassen
• Ablaufdatum herunterladen - Hier können Sie die Anzahl der Tage nach dem Kauf einstellen, bevor der Download-Link abläuft. Sie können es wieder leer lassen, um es zu deaktivieren.

Wenn Sie sowohl einen digitalen Download als auch ein physisches Produkt anbieten, können Sie den Versand von Produkten auch als Versandkosten berechnen. Auf diese Weise haben Sie ein Produkt für eine Boxed- und eine Digitalversion. Wenn Sie auch das virtuelle Kontrollkästchen aktivieren, werden die Versandkosten deaktiviert.

Ein externes Produkt hinzufügen

Wählen Sie "External / Affiliate" aus der Dropdown-Liste "Produkttyp". Dadurch werden unnötige Registerkarten wie Steuern und Inventar entfernt und ein neues Produkt-URL-Feld eingefügt. Dies ist das Ziel, an dem Benutzer das Produkt kaufen können. Anstatt dem Einkaufswagen weitere Schaltflächen hinzuzufügen, wird eine Schaltfläche zum Lesen mehr angezeigt, die sie an diese URL weiterleitet.

Ein variables Produkt hinzufügen

Machen Sie sich bereit, denn dies ist eines der am schwierigsten einzurichtenden Produkte. Seien Sie geduldig, denn wenn Sie es einmal gemeistert haben, werden Sie es lieben! Mit variablen Produkten können Sie mehrere Variationen desselben Produkts mit eigenem Preis, Artikelnummer, Bestandsnummern und wenn Sie ein Image erstellen möchten, verkaufen. Zuerst müssen wir "Produktvariable" aus dem Bereich "Produkttyp auswählen" auswählen. Als Nächstes müssen wir einige Attribute für unser Produkt definieren, mit denen unsere Variationen verknüpft sind. Attribute können einen wichtigen Teil Ihres Shops bilden und können entweder global oder einzeln definiert werden. Attribute werden nicht nur in Varianten verwendet, sondern können auch dazu beitragen, Ihre Produkte zu kategorisieren, sodass Ihre Benutzer leicht finden, wonach sie suchen. Die WooCommerce-Dokumentation gibt ein perfektes Beispiel.

Angenommen, Sie eröffnen einen Videospieleladen und verkaufen die neuesten Spiele für die neuesten Konsolen. In diesem Fall handelt es sich bei Ihrer Top-Level-Produktkategorie höchstwahrscheinlich um Spiele, in denen sich der größte Teil Ihres Katalogs befindet.

Nun können Sie sehr leicht Unterkategorien für verschiedene Konsolen, Genres usw. erstellen. Diese Informationen sind jedoch eher als Attribute geeignet. Warum? Weil ein Benutzer gleichzeitig Attribute auswählen kann, während er seine Suche verfeinert.

Beispiel: Sie suchen nach einem Sportspiel für die PS3. Dies ist so einfach, dass Sie zur Kategorie Spiele navigieren und dann die PS3- und Sport-Attribute in einem Seitenleisten-Widget auswählen. Wie erwartet, wird die Seite so aktualisiert, dass nur Sportspiele für die PS3 angezeigt werden.

WooCommerce bietet ein Widget, mit dem Sie durch Ihre Attribute navigieren können. Weitere Informationen hierzu finden Sie in der WooCommerce-Dokumentation.

Zurück zu unserem Produkt haben wir aus unserem Produktauswahlbereich ein variables Produkt ausgewählt und müssen nun unsere Attribute zuordnen. Wenn Sie auf die Registerkarte "Attribute" klicken, können Sie entweder ein globales Attribut auswählen oder zu diesem einzelnen Produkt hinzufügen. Sie sollten globale Attribute erstellen, wenn Sie sie mehr als einmal verwenden möchten, z. B. Größen, wenn Sie ein Bekleidungsgeschäft oder Farben erstellen. Sie können einem Produkt auch wieder mehrere Attribute hinzufügen, z. B. Größe und Farbe. Wenn Sie Ihre Attribute hinzugefügt haben, aktivieren Sie "Verwendet für Variationen", damit diese auf der Registerkarte "Variationen" angezeigt werden. Nachdem Sie Ihre Attribute hinzugefügt haben, müssen Sie Ihr Produkt speichern.

Jetzt haben wir unsere Attribute hinzugefügt und unser Produkt gespeichert. Jetzt können wir zur Registerkarte "Variationen" gehen. Sie können Ihre Variationen manuell einrichten, indem Sie auf "Variation hinzufügen" klicken, oder einfach auf "Alle Variationen verknüpfen" klicken. Dadurch werden automatisch Ihre Variationen für Sie erstellt, wobei Sie alle möglichen Kombinationen von Variationsattributen verknüpfen (maximal 50 pro Lauf)..

Wenn Ihr Beispiel also zwei Attribute hatte - Farbe (mit den Werten Blau und Grün) und Größe (mit Werten groß und klein), werden folgende Variationen erzeugt:

• Großes Blau
• Großes Grün
• Kleines Blau
• Kleines grün

Sobald Sie alle Variationen hinzugefügt haben, können Sie Ihre Produktdaten durchgehen und aktualisieren. Jede Variation kann aus folgenden Daten bestehen:

• Bild - Klicken Sie auf das Bildsymbol, um den WordPress-Medien-Uploader anzuzeigen. Wenn Sie Ihr Bild hochgeladen haben, klicken Sie einfach auf "In Beitrag einfügen". Wenn ein Benutzer eine Variation mit einem separaten Bild auswählt, wird das Hauptproduktbild vom eingestellten gekennzeichneten Bild auf das in der Variation eingestellte Bild aktualisiert. Dies bedeutet, dass Sie technisch für jede Variation ein anderes Bild haben können. Besonders nützlich für Farbvariationen.
• SKU - Sie können eine SKU für Ihre Variation festlegen oder einfach leer lassen, damit die SKU der übergeordneten Produkte erbt wird.
• Bestandsmenge - Sie können eine Bestandsmenge für die Abweichung festlegen, wenn Sie das Feld leer lassen, um die übergeordneten Bestandseinstellungen zu verwenden. Sie können ihn auch auf Null setzen, um anzuzeigen, dass der Vorrat nicht vorrätig ist.
• Gewicht / Maße - Diese können eingestellt werden, damit die Variation des leeren Felds vom übergeordneten Element übernommen wird.
• Preis - Das einzige erforderliche Feld hier legen Sie den Preis Ihrer Variation fest.
• Verkaufspreis - Sie können einen Verkaufspreis für eine bestimmte Variation festlegen. Nützlich, wenn Sie sich bei einer bestimmten Variante weiter verkaufen müssen.
• Herunterladbar - Wenn es sich bei dieser Variante um ein Produkt zum Herunterladen handelt, aktivieren Sie das Kontrollkästchen. Sie können dann die Datei-URL und das Download-Limit eingeben.
• Virtuell - Wenn die Variante virtuell ist, aktivieren Sie das Kontrollkästchen.
• aktiviert - Deaktivieren Sie das Kontrollkästchen, um die Variation zu deaktivieren. Es wird nicht mehr verfügbar sein.
• Versandklasse - Versandklasse kann den Versand beeinflussen. Legen Sie dies fest, wenn es vom übergeordneten Element abweicht.
• Steuerklasse - Eine Steuerklasse für diese Variante. Nützlich, wenn Sie Variationen anbieten, die unterschiedliche Steuerbereiche umfassen.

Sie müssen für jede Variation einen Preis festlegen. Sie können die Variationen jedoch mit der Massenbearbeitungsleiste oberhalb Ihrer Variationen bearbeiten. Sie können auch die Standardvariationen festlegen, die oben in der Dropdown-Liste angezeigt werden, wenn Benutzer Ihr Produkt im Frontend betrachten.

Variable Produkte können ein wenig schwierig sein, um den Kopf herumzubringen. Es lohnt sich, sich die Zeit zu nehmen, um den Dreh raus zu bekommen, da sie die Benutzererfahrung für Ihre Käufer wirklich verbessern können.

---

Theming und Styling

Im ersten Teil unserer Serie haben wir uns die allgemeinen Einstellungen für WooCommerce angesehen, in denen Sie die WooCommerce-CSS-Styles aktivieren konnten. Wir werden ein bisschen tiefer graben, wie man WooCommerce gut aussehen lässt. Erstmaliges 9/10-mal sollte es mit der standardmäßig aktivierten WooCommerce-CSS recht gut aussehen. Sie können sehr schnell testen, indem Sie sicherstellen, dass in den allgemeinen Einstellungen das standardmäßige WooCommerce-CSS aktiviert ist.

Sie sollten in der Lage sein, sehr schnell zu sehen, wie WooCommerce mit Ihrem Design arbeitet. Wenn Sie Änderungen am CSS vornehmen müssen, mache ich Folgendes:

1. Lokalisieren /wp-content/plugins/woocommerce/assets/woocommerce.css und kopiere diese Datei in deinen Designordner. Normalerweise kopiere ich es in eine Datei namens woocommerce.css (macht Sinn, nicht wahr!).
2. Die Datei ist komprimiertes CSS, so dass Sie sie dekomprimieren müssen. Ich verwende Coda von Panic als Code-Editor mit PHP und Web Toolkit, so dass das "Tidying" des CSS in ein lesbares und verwendbares Format relativ einfach ist. Sie können Ihr CSS mit diesem Online-Tool verschönern, wenn Sie nichts Ähnliches in Ihrem Code-Editor haben.
3. Sie müssen auch die WooCommerce-Bilder zu Ihrem Design hinzufügen. Einfach kopieren / wp-content / plugins / woocommerce / assets / images /in einem Ordner in Ihrem Designordner, und aktualisieren Sie die Pfade in Ihrer neuen woocommerce.css
4. Wir müssen unser Theme bekommen, um unser zusätzliches Stylesheet zu erkennen.

   WordPress weiß jetzt über unser neues Stylesheet und wird es unseren von WordPress generierten Seiten hinzufügen. Weitere Informationen zum Registrieren und Einreihen von Stile finden Sie im WordPress-Codex.

5. Stellen Sie sicher, dass in den allgemeinen WooCommerce-Einstellungen die Option "WooCommerce-CSS-Stile aktivieren" deaktiviert ist. Oder wenn Sie es vorziehen, können Sie es über Ihr Design deaktivieren (nützlich, um zu verhindern, dass nervige Kunden die Dinge durcheinander bringen!)

Ich habe jetzt eine Kopie des WooCommerce-Deafult-CSS in meinem Design, sodass ich Aktualisierungen vornehmen kann, ohne dass sie durch Plugin-Aktualisierungen gelöscht werden. Es sollte genau so aussehen wie beim Aktivieren der Standard-CSS in den Einstellungen. Sie können die meisten Änderungen mit CSS vornehmen, wenn Sie Probleme haben, es gibt jedoch ein paar andere Dinge, die Sie kennen sollten. Ihr erstes Problem wird wahrscheinlich der Wrapper div um den WooCommerce-Inhalt sein. Sie können Ihre eigene Vorlagenseite für WooCommerce verwenden, um den gesamten Inhalt zu verwenden.

1. Kopieren Sie Ihre Themen page.php und nennen Sie es woocommerce.php
2. Öffnen Sie Ihre neue Datei in Ihrem Code-Editor Ihrer Wahl und suchen Sie die Schleife. Dies beginnt normalerweise mit:

   und enden mit:

   Dies kann je nach Thema variieren.

3. Ersetzen Sie die Schleife durch folgenden Code:

Einige der WooCommerce-Funktionen und deren Gestaltung können mit den WooCommerce-Aktionen und -Filtern durchgeführt werden. Genau wie der WordPress-Kern verfügt WooCommerce über eine Vielzahl von Aktionen und Filtern, in die Sie einbinden oder überschreiben können. Sie können das Wrapper-Div mit der folgenden Aktion ändern:

"; '), 10); add_action (' woocommerce_after_main_content ', create_function (",' echo ")