Ein Leitfaden für Designer zu WooCommerce

Wenn Sie einen WooCommerce-Shop wie Shopify entwerfen oder ein vorhandenes WooCommerce-Design entwickeln, ist dieser Artikel Designer-Leitfaden für WooCommerce genau das Richtige für Sie. Diese Zusammenstellung gibt etwas mehr Informationen über das Styling, das Ändern von Designs und andere Informationen, die verwandte WooCommerce-Seiten abdecken.

Dieses Plugin ist ein benutzerfreundliches Tool und sehr flexibel; Es werden jedoch nicht alle Websites unterstützt. Durch die Verwendung der von WooCommerce unterstützten Funktionen und Ansätze können Sie den Design- und Entwicklungsprozess beschleunigen.

Es ermöglicht Benutzern, Modifikationen anzupassen, jedoch mit zusätzlichen Kosten. Der schnellste Weg, um zu sehen, welche Funktionen es gibt, ist der Besuch der Storefront-Demo in WooCommerce. Wenn Sie allgemein lernen möchten, wie man Woocommerce verwendet, lesen Sie die Dome-Anleitungen, um Ihnen den Einstieg zu erleichtern. WooCommerce erstellt die folgenden neuen Seiten. Es gibt Arten von Seiten, für die Sie ein Design erstellen müssen.

Die erste sind Produktseiten. Diese Seiten haben zwei Arten, nämlich: Produktarchivseiten und Produkteinzelseiten.

Produktarchivseiten zeigen Miniaturansichten für verfügbare Produktkategorien an. Diese zeigen eine andere Produktarchivseite an, wenn Sie auf das Miniaturbild der Kategorie klicken. Dann zeigt es das einzelne Produkt an, wenn Sie auf ein Produkt-Miniaturbild klicken.

Die andere Art sind Produkt-Einzelseiten. Hier zeigen diese einzelne Produkte an und kombinieren Produktbilder, Produktkopfinformationen, detaillierte Produktinformationen und verwandte Produkte, Cross-Sells und Upsells.

Es hat auch spezielle Seiten , die Einkaufswagen und Kasse enthalten . Einkaufswagen werden normalerweise in komprimierter Form als Sidebar-Widget angezeigt, manchmal in erweiterter Form auf der Warenkorbseite zusammen mit Lieferinformationen. Checkout hingegen ist, wenn der Kunde auscheckt, und es werden Adressinformationen benötigt.

Verschiedene Arten von Produkten

Dieses Tool hat verschiedene Arten von Produkten;

Der erste ist der Produktkopf, der in fünf Teile unterteilt ist. Diese sind:

1. Produktname – diese werden auf den Übersichts-/Archivseiten und Einzelseiten angezeigt
2. Produktmerkmal – Sie werden auf den Zusammenfassungs-/Archivseiten und Einzelseiten angezeigt
3. Bild – Die vorgestellten Bilder werden auf der Zusammenfassung und zusätzliche Bilder auf der einzelnen Produktseite angezeigt
4. Lange Beschreibung – Diese wird im Bereich Produktbeschreibung unten auf der einzelnen Produktseite angezeigt
5. Kurzbeschreibung – Diese wird oben auf der einzelnen Produktseite angezeigt

Dieses Tool ermöglicht es einem Benutzer auch, das Produkt zu verwenden.

Jede Kategorie benötigt ein mitgeliefertes Kategoriebild und eine Beschreibung und kann auch Unterkategorien haben. Beispielsweise ist Schuh eine Kategorie und die Schuhmarke eine Unterkategorie. Die Produktkategoriearchive werden automatisch mit den folgenden Abschnitten generiert: Titel oder Kategoriename, Kategoriebeschreibung, ein Kategorie-Miniaturbild für jede Unterkategorie der aktuellen Kategorie, optionale Produkt-Thumbnails enthalten den Titel, den Preis und „In den Warenkorb“ für jedes Produkt die aktuelle Kategorie. Ein Klick auf eine Kategorie öffnet eine neue Kategorie, ein Klick auf ein Produkt-Thumbnail öffnet das Produkt.

Darüber hinaus werden diese unter Produktseiten automatisch mit Folgendem generiert:

Produktbilder – Dies sind vorgestellte Bilder und ergänzende Bilder für das Produkt. Produkttitel, Produktpreis, Produktkurzbeschreibung, Menge, die dem Einkaufswagen hinzugefügt werden soll (mit + und Steuerelementen), Schaltfläche „In den Einkaufswagen“, Produkt-SKU-Kategorien (Lagerhaltungseinheit) und Tags.

Produktregisterkarten enthalten die lange Produktbeschreibung, einschließlich einer optionalen Bildergalerie, zusätzliche Informationen wie das Ticket für Produktattribute, das auf der Produktseite angezeigt werden soll, und die optionalen Produktbewertungen. Ein Klick auf eine Kategorie öffnet eine neue Kategorie, ein Klick auf ein Produkt-Thumbnail öffnet das Produkt.

Upsells – Dies sind die Dinge, die Ihnen vielleicht auch gefallen, gefolgt von Daumen/Titeln für Upsells.

Cross-Selling – Dies sind die verwandten Produkte, gefolgt von den Miniaturansichten.

Die Produktpräsentation, die Optionen sind die Standard- und optionale Präsentation. Der Standard zeigt das vorgestellte Bild oben auf der Produktseite an, mit den zusätzlichen Miniaturbildern darunter in 3 Spalten mit Miniaturansichten. Im Gegensatz dazu zeigt die optionale Präsentation das vorgestellte Bild ohne Miniaturansichten darunter und zeigt alle Bilder auf der Registerkarte Beschreibung an.

Ein weiterer Teil des Tools sind die Produktsuch-Widgets, die in Seitenleisten-Widgets oder Fußzeilen-Widgets platziert werden können. Wenn Sie nach einer beliebigen Website suchen möchten, stehen Ihnen die Site Wide Search Options zur Verfügung. Darunter befindet sich das Produktsuchfeld, mit dem Sie nach einem Produktnamen, einer kurzen Beschreibung und einer langen Beschreibung suchen können. Die andere Unterteilung der breiten Suchoptionen wird Kategorie-Drilldown genannt. Es ist ein Dropdown-Feld, das die Auswahl einer beliebigen Kategorie oder Unterkategorie ermöglicht. Das stolze Tag-Cloud-Kit verfügt über ein Dropdown-Menü, mit dem Sie Preisschilder auswählen können.

Such-Widgets für Produktkategorie-Suchoptionen werden nur angezeigt, wenn automatisch generierte Produktkategoriearchive angezeigt werden. Die erste ist die mehrschichtige Navigation. Dies ermöglicht dem Benutzer, Produkte basierend auf Attributen zu verfeinern, und hilft dem Benutzer effektiv dabei, wonach er sucht. Produktpreisfilter – zeigt eine gleitende Skala an, mit der Produkte nach einer Preisspanne gefiltert werden können. Bestseller – zeigt Titel/Thumb/Preis für eine automatisch ausgewählte Liste der meistverkauften Produkte an. Das vorgestellte Produkt zeigt Titel/Daumen/Preis für Produkte an, die als „Empfohlene Produkte“ angekreuzt sind. Im Angebot: Zeigt Produkte an, für die zusätzlich zu ihrem Preis ein Angebotspreis eingegeben wurde.

Wenn ein Benutzer seinen WooCommerce gestalten möchte, haben wir Optionen wie Produkt-Daumen. Wenn die Produkte als Produkt-Thumbnails erscheinen, werden 4 Elemente angezeigt, darunter Miniaturansicht, Titel, Preis, In den Warenkorb legen. CSS-Stil, der für Produkthintergrund, Produktrand, Polsterung und Rand verwendet werden kann. Als nächstes ist das Miniaturbild. Dazu gehören Rahmen, Polsterung und Ränder. Der Titel enthält Schriftart, Gewicht, Farbe und Größe sowie den Preis. Unter „Zum Einkaufswagen hinzufügen“ sind Schaltflächenfarbe, Etikettenfarbe, Rand und Radius enthalten.

Auf dem Tool ist auch der Sale-Sticker zu sehen, das Wort „Sale“ erscheint über Produkt-Thumbnails im Sale – CSS-Stil kann verwendet werden: Hintergrundfarbe, Schriftfarbe, Rahmenfarbe. Randbreite, durchgezogener/gestrichelter Rand, Randradius.

Produktvariationen ermöglichen es einem Kunden, ein Bekleidungsprodukt einzurichten, das in verschiedenen Farben oder verschiedenen Designs erhältlich ist. Wenn Produktvariationen verwendet werden, wird auf den Produktarchivseiten die Schaltfläche „Optionen auswählen“ anstelle der Schaltfläche „In den Einkaufswagen“ angezeigt.

Zusammenfassend haben wir die wichtigsten Elemente dargelegt, an die Sie beim Entwerfen eines WooCommerce-Shops denken müssen. Wir haben die verschiedenen Seitentypen, die Produktinformationen sowie die Such- und Gestaltungsmöglichkeiten erklärt. Viel Spaß beim Aufbau Ihres WooCommerce-Shops.

Lesen Sie hier mehr über Woocommerce WordPress-Themes.