WordPress und das Woocommerce Standartdesign

WordPress in Verbindung mit Woocommerce ermöglicht es Webseitenbetreiben innerhalb kurzer Zeit einen eigenen Onlineshop zu realisieren. Das Shop-Plugin Woocommerce von Automatic biete von sich aus schon alles, um Produkte online zu verkaufen.

Allerdings sollte die Woocommerce Installation immer mit einem zusätzlichen Plugin für einen rechtssicheren Onlineshop für den deutschsprachigen Raum erfolgen. Dazu bieten sich die Plugins Germanized oder German Market an.

Woocommerce Standart Shopseite
Woocommerce Standardansicht der Shopseite

Für die eigentliche Shopseite generiert Woocommerce automatisch ein Seitenlayout. Diese zeigt oberhalb eine standardisierte Filterfunktion für die Sortierung der Produkte, Anzahl der Produkte und eine Produktdarstellungsoption (Produktbild- oder Listen Darstellung).

Mit dem Avada Theme lassen sich jedoch sehr viel schönere Layouts für Onlineshops und Produktseiten erstellen. Dazu bietet das Avada Theme zum einen zusätzliche Optionen in den Avada Theme Options, als auch eigene Woocommerce Layout-Elemente.

Zusätzlich können über den Avada Layout Builder eigene Produktseiten gestaltet werden, die das Design der eigentlichen Produktseite sehr viel eleganter aussehen lässt.

Beispiel Einzelprodukt aus dem Avada Layout Builder
Avada Woocommerce Einzelproduktseite

Avada Woocommerce Optionen

Ist Woocommerce einmal installiert, wird automatisch in den Avada Theme Options ein weiterer Eintrag mit der Bezeichnung Woocommerce hinzugefügt. Dieser unterteilt sich in General Woocommerce und Woocommerce Styling. Unter General Woocommerce kannst Du allgemeine Einstellungen zu Produkt Spalten, Anzahl der anzuzeigenden Produkte, Spaltenabstand, Produktbildern sowie zusätzliche Features einstellen.

Avada Woocommerce General Einstellungen Preview Avada Woocommerce Einstellungen Webdesigner aus Hamburg | JF Mediendesign
Avada Woocommerce General Einstellungen

Unter Woocommerce Styling kannst Du genauere Einstellungen zum Produktseitendesign, Paddings, Farben, Sale Badges, Icons und Schriftgrößen festlegen. Die Schriftgrößen für Produktnamen, werden allerdings in den Avada Typografie Optionen unter „Post Titel Typography“ festgelegt, da das Avada Theme auch Produktseiten als einen Posttyp ansieht.

Avada Woocommerce Styling Preview Avada Woocommerce Einstellungen Webdesigner aus Hamburg | JF Mediendesign
Avada Woocommerce Styling Optionen

Kleiner Tipp:
Wenn Du alle möglichen Avada Einstellung in Bezug auf Woocommerce sehen möchtest, gib einfach oben in den Suchbereich der Theme Optionen „woocommerce“ ein. Dann bekommst alle möglichen Einstellungen des Avada Themes in Bezug auf Woocommerce angezeigt.

Avada Studio und Woocommerce

Im relativ neuen Avada Studio findest Du fertige Vorlagen für eine ganze Shopseite (Templates), Produktseiten (Content) und Post Cards für die Produkt Schnellansicht. Jedes Element kann mit einem klick auf das Lupen-Symbol als Vorschau betrachtet werden. Mit einem klick auf das Festplattensymbol importierst Du die Vorlage.

Avada Studio Produktseiten Vorlagen
Avada Studio Vorlagen für Produktseiten

Mit Avada Woocommerce eine Shopseite gestalten

Um Deine Shopseite zu gestalten, biete das Avada Theme verschiedene Möglichkeiten. Mit dem Element Woo Product Grid z.B. kannst Du die Darstellung Deiner Produktvorschauen verändern. In den weiteren Einstellungen kannst spezielle Produktkategorien bestimmen, die Anzahl der Produkte, die Spaltenanzahl und Abstände, die Sortierreihenfolge und die Paginierung auswählen.

Unter dem Tab Design kannst Du noch zusätzliche Einstellung zum Erscheinungsbild Deiner Produktanzeige einstellen. Mit dem Element Woo Product Carousel kannst Du Deine Produkte z.B. auch als horizontalen Slider zeigen.

Avada Woocommerce Elemente
Avada Woocommerce Elemente

Das Element Woo Shortcodes bietet Dir die Möglichkeit, alle Shortcodes die Woocommerce zur Verfügung stellt einzusetzen. Einen Überblick aller Woocommerce Shortcodes und der Einstellungen dazu findest Du hier:
https://woocommerce.com/document/woocommerce-shortcodes/

Ich erstelle Onlineshops zu Festpreisen mit dem Avada oder ENFOLD Theme.

Du willst mit Woocommerce verkaufen?
Dann kontaktiere mich gerne…

Eigene Produktseiten mit dem Avada Layout Builder

Beispiel Einzelprodukt LayoutPreview Avada Woocommerce Einstellungen Webdesigner aus Hamburg | JF Mediendesign
Beispiel Einzelprodukt aus dem Avada Layout Builder ( klick aufs Bild für die ganze Ansicht)

Mit dem Layout Builder des Avada Themes kannst Du das Design der Produkt-Einzelseiten selbst bestimmen. Dazu stehen Dir, wie oben schon erwähnt, spezielle Elemente für Woocommerce zur Verfügung. Dafür greifst Du einfach auf die dynamischen Woocommerce Inhaltsbereiche zurück:

  • Woo Product Images
  • Woo Short Description
  • Woo Add to Cart
  • Woo Tabs
  • oder den Woo Related Products

Bei der Anordnung und Gestaltung dieser Elemente bist vollkommen frei. Zudem bietet das Avada Theme zu jedem Woocommerce Element noch weitere Einstellungen zu Design und Funktion.

Zusätzlich kannst Du in den Layout Section Options am Ende des Editors, Optionen zu Art des Content (in diesem Fall Produkt) und ein Beispiel Produkt zur Vorschau wählen. Das Ergebnis im Backend könnte dann so aussehen wie aus der Demoseite Modern Shop des Avada Themes:

Custom Produkt Layout im Layout Builder
Ein eigenes Produktseiten Layout im Avada Layout Builder

Bedingungen für Deine eigenes Produktseitenlayout festlegen

Auf der Übersichtsseite des Layout Builders legst Du nun noch Conditions (Bedingungen) fest, für welche Art von Post-Types Dein eigenes Layout gelten soll – das bezieht sich dann in der Regel auf Produkte und dort All Products.

Conditions im Avada Layout Builder
Conditions im Avada Layout Builder

Avada Woocommerce Menüeinträge

Auch für Deine Menüs bietet das Avada Theme noch einen zusätzlichen Bereich. Wenn Du in Deinem WordPress Dashboard auf den Bereich Design und dort auf Menüs klickst, siehst Du am Ende der Menüeinträge:

Avada Woocommerce Special Menüeintrag
Avada Woocommerce Special Menüeintrag

Avada Special Menüeintrag

  • Suche
  • Sliding Bar Toggle
  • Off Canvas Toggle
  • WooCommerce Warenkorb
  • Woocommerce Mein Account

Dazu gibt es aber noch den Hinweis, das diese genannten Elemente nur innerhalb eines mit dem Avada Builder erstellten Menüs funktionieren.

Weitere Tutorials für Avada Woocommerce

Mit dem Layout Builder kannst Du aber noch weitere standardisierte Woocommerce Inhaltsseiten selbst gestalten. Die Entwickler des Avada Themes haben zu Woocommerce und Avada in ihrer Dokumentation eine ganze Reihe von Videoanleitungen veröffentlicht:

Lies hier meine weiteren Beiträge zu Woocommerce

Checkliste für Woocommerce Onlineshop

Checkliste für einen Woocommerce Onlineshop

Tipps und Anregungen die man vor dem eröffnen eines Woocommerce Onlineshops beachten sollte.

Onlineshops mit Woocommerce | JFMediendesign

Onlineshop-Lösungen für Kleinunternehmen mit WordPress

In diesem Beitrag gebe ich ein paar Anregungen, wie mit Hilfe von WordPress und Woocommerce ein Onlineshop auf der eigenen Webseite integriert werden kann.

Mein Fazit

Die Möglichkeiten die das aktuelle Avada Theme für Woocommerce anbietet, sind schon beachtlich. Bedenkt man das viele WordPress Themes und externe Page Builder für Anpassungen und Styling von Woocommerce auf zusätzliche Plugins angewiesen sind, ist das schon klasse.

Mit dem Layout Builder kannst Du nun nicht nur Deine Shopseite anpassen und gestalten, sondern auch das Standartlayout für Produktseiten und weitere Endpunkte von Woocommerce. Nimm Dir Zeit zum ausprobieren. Wenn es geht, installiere Dir einmal ein Shop-Demo aus den Avada Demos.

Alleine für einen Onlineshop gibt es 20 verschiedene Avada Demos. In dem Demo Avada Retail findest Du darüber hinaus auch einige Rendering Conditions für die Anzeige von Promo Codes und mehr.

Wenn Dir der Beitrag gefallen hat oder Du Fragen hast, hinterlasse gerne einen Kommentar.