In diesem Beitrag zeige ich Dir die Avada Woocommerce Einstellungen und zusätzliche Optionen. Wenn Du das Avada Theme und das WordPress Shop Plugin Woocommerce nutzen möchtest, stehen Dir dazu einige zusätzliche Features für einen modernen Onlineshop zur Verfügung.

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.

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.

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.

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.

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.

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.

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.

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/

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:

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.

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:

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:

• An Overview of WooCommerce And Avada – https://youtu.be/IxTGwcVAPpU
• How To Build A Custom Shop With Avada & WooCommerce – https://youtu.be/-XPLrH0rRJk
• How To Build A Custom Checkout With Avada & WooCommerce – https://youtu.be/LxNYwDyotF0
• How To Build A Custom Cart With Avada & WooCommerce – https://youtu.be/fpa9EMe3EbE
• How To Use The Woo Design Elements – https://youtu.be/uIk8jN2Pwwk
• How To Use WooCommerce Attribute Swatches – https://youtu.be/gVQmUVWNeLc
• Avada Restaurant Demo – Online Ordering With WooCommerce – https://youtu.be/s5_eYBDjOHI
• How To Use The Woo Product Carousel Element – https://youtu.be/4GdgfHLKSX4
• How To Use The Woo Featured Products Slider Element – https://youtu.be/Wz4X4IRbpT4

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.