Avada Woocommerce Einstellungen und Layouts
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.
Inhalt
WordPress und das Woocommerce Standarddesign
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 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.
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
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 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 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
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/
Eigene Produktseiten mit dem Avada Layout Builder
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:
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
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 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:
- 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
Lies hier meine weiteren Beiträge zu Woocommerce
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.
Hallo und vielen Dank für diese klare, strukturierte Übersicht. Ich konnte damit die meisten Einstellungen selbst bewältigen. Allerdings ist eine Sache noch offen, die ich einfach nicht finden kann und ich würde mich sehr freuen, wenn Sie mir dabei weiterhelfen können. Wenn ich auf die „cart“ Seite gelange, die AVADA mit WooCommerce automatisch erstellt hat, steht dort in der Überschrift „Du hast xx Artikel in deinem Warenkorb“. Ich möchte hier die Anrede auf „Sie“ ändern und schaffe das einfach nicht. Ich finde die Bearbeitungsmöglichkeit weder auf der Seite, noch in AVADA. Können Sie mir helfen?
Hallo Romana,
die Überschrift des Warenkorbs kommt von Woocommerce und nutzt die Spracheinstellungen der Webseite. Wichtig ist, das die gewählte Sprache in der WordPress unter Einstellungen->Allgemein->Sprache der Website auf Deutsch (Sie) eingestellt ist. Das sollte dann auch Woocommerce übernehmen. Das Avada Theme übernimmt nur den Inhalt der Woocommerce Warenkorb-Seite.