Wenn es um die Einrichtung eines Onlineshops geht, ist WooCommerce das ideale plugin. Es ist kinderleicht, einen Onlineshop einzurichten und Ihre Produkte sofort nach Fertigstellung zu verkaufen. Avada bietet umfassenden Support und eine nahtlose Designintegration für WooCommerce, sodass Sie Ihren Traumshop gestalten und gleichzeitig sicherstellen können, dass er genau Ihren Vorstellungen entspricht.
Avada bietet Ihnen die Möglichkeit, das Erscheinungsbild Ihrer Website individuell anzupassen – auch bei der WooCommerce-Integration. Dank unserer beliebten, erweiterten Optionen können Sie aus einer Vielzahl von Anpassungsmöglichkeiten für unterschiedlichste Designs wählen, darunter:
- WooCommerce verfügt über ein eigenes Avada Global Options Panel, das vom Haupt-Avada-Global-Options-Panel getrennt ist.
- Für jedes Produkt stehen Avada-Seitenoptionen zur Verfügung.
- Mit Avada Builder können Sie Produktseiten-Designs erstellen, indem Sie Elemente per Drag & Drop verschieben.
So erstellen Sie Ihre E-Commerce-Website mit Avada.
Als Erstes müssen wir WooCommerce in Avada installieren.
- WooCommerce installieren – Schritt-für-Schritt-Anleitung
- So weisen Sie Ihrer Website eine Shopseite zu
- Ihre Produkte erstellen
- Produkt-Zoom-Effekt erstellen
- Anpassen der Produktbildgrößeneinstellungen in WooCommerce.
WooCommerce installieren – Schritt-für-Schritt-Anleitung
Gehen Sie zu Avada > Plugin / Add-ons und suchen Sie nach dem WooCommerce- plugin , wie im folgenden Screenshot gezeigt.
Schritt 1 – Installieren Sie das WooCommerce- plugin .
Schritt 2 – Wählen Sie im Dropdown-Menü „Installieren“ aus.
Das plugin wird automatisch installiert und aktiviert.
Schritt 3 – Anschließend sollte der WooCommerce-Einrichtungsassistent angezeigt werden. Wenn Sie eine unserer Woo-Demos importieren, z. B. Modern Shop oder Classic Shop, können Sie diesen Schritt überspringen, ohne Ihre Daten zu verlieren. Wählen Sie dazu im Dropdown-Menü „Nicht jetzt“ aus. Wenn Sie keine unserer Woo-Demos importieren, klicken Sie auf „Los geht’s!“, um mit der Einrichtung zu beginnen.
Schritt 4 – Folgen Sie den Anweisungen auf dem Bildschirm, um den Vorgang abzuschließen und die erforderlichen Informationen zu Ihrem Shop einzugeben. Klicken Sie anschließend auf „Erstes Produkt erstellen“, um Ihr erstes Produkt anzulegen. Alternativ können Sie über den Link unterhalb des Einrichtungsfensters zu Ihrem WordPress-Dashboard zurückkehren.
So weisen Sie Ihrer Website eine Shopseite zu
Im Rahmen der normalen WooCommerce-Installation sollte der Einrichtungsassistent gestartet werden. Mit ihm können Sie Ihren Shop konfigurieren und Ihren Kunden Shopseiten zuweisen. Weitere Informationen zu den vom Einrichtungsassistenten erstellten Seiten finden Sie in diesem WooCommerce-Dokument.
Alternativ können Sie, falls der Einrichtungsassistent nicht angezeigt wird oder Sie ihn aus irgendeinem Grund abbrechen, jederzeit zum Einrichtungsassistenten zurückkehren, indem Sie auf einer beliebigen WooCommerce-Seite im Hilfemenü, das sich oben links im Fenster befindet, die Option „Einrichtungsassistent“ auswählen.
Sie können die Shopseite manuell festlegen, indem Sie in den WooCommerce-Einstellungen auf den Tab „Produkte“ gehen (WooCommerce > Einstellungen > Produkte ) und im Dropdown-Menü die gewünschte Hauptseite auswählen. Ihre Produkte werden dann automatisch auf dieser Seite angezeigt.
Die übrigen Seiten können im Menüpunkt „Erweitert“ konfiguriert werden, der sich unter WooCommerce > Einstellungen > Erweitert .
Ihre Produkte erstellen
Schritt 1 – Navigieren Sie in der WordPress-Admin-Seitenleiste zum Reiter Produkte > Produkt hinzufügen.
Schritt 2 – Geben Sie oben auf der Seite den Namen Ihres Produkts ein.
Schritt 3 – Füllen Sie das Textfeld für den Beitragsinhalt mit dem Text aus der Produktbeschreibung. Alle Produktinformationen werden in diesem Abschnitt angezeigt.
Schritt 4 – Füllen Sie das Feld „ Produktdaten “ mit allen Produktinformationen aus. Beispielsweise sind amp , Artikelnummer (SKU) und Versandinformationen mögliche Optionen.
Schritt 5 – Geben Sie im Feld „ Kurzbeschreibung des Produkts “ eine prägnante Beschreibung Ihres Produkts ein, die neben Ihren Hauptbildern angezeigt wird.
Schritt 6 Das Hauptbild sollte im Feld „ Produktbild “ auf der rechten Seite der Seite platziert werden; dies muss für jedes Produkt durchgeführt werden.
Schritt 7 –Fügen Sie weitere Bilder in das Feld „ Produktgalerie Bildergalerie verwenden möchten.
Schritt 8 – Geben Sie im Feld „ Produktkategorien , die auf Ihre Produkte zutreffen. Füllen Sie anschließend die Felder im Feld „ Produkt -Tags “ mit den passenden Schlagwörtern für Ihr Produkt aus.
Schritt 9 – Sobald Sie alle erforderlichen Informationen eingegeben haben, klicken Sie auf die Schaltfläche „ Veröffentlichen “, und der Artikel wird auf Ihrer Hauptshopseite angezeigt.
Produkt-Zoom-Effekt erstellen
Wenn Sie Avada Layouts verwenden, müssen Sie sicherstellen, dass die Option „WooCommerce Product Images Zoom“ unter Avada > Optionen > WooCommerce > Allgemeiner WooCommerce > WooCommerce Product Images Zoom , oder, wenn Sie WooCommerce Layouts verwenden, auf der Registerkarte „Allgemein“ des Woo Product Images Elements > Product Images Zoom .
Breite der WooCommerce-Produktbilder – Sowohl die Breite Ihres Hauptbildes (siehe Einstellung unten) als auch die tatsächliche Größe des hochgeladenen Bildes müssen größer sein als die unter Avada > Optionen > WooCommerce > Allgemein > Breite der WooCommerce-Produktbilder festgelegte Breite bzw. die maximale Breite der Produktbilder im WooCommerce-Produktbilder-Element. Die Breite der Containerspalte für eine einzelne Produktgalerie wird durch Ihre gewählten Einstellungen bestimmt. Sobald Sie die erforderlichen Anpassungen vorgenommen haben, können Sie die Breite Ihres WooCommerce-Hauptbildes festlegen.
WordPress-Hauptbildbreite – Die Einstellung für die WooCommerce-Hauptbildbreite finden Sie im Customizer Ihrer WordPress-Website. Navigieren Sie im WordPress-Dashboard zu Design > Anpassen > WooCommerce > Produktbilder . Dort finden Sie die Einstellung für die Hauptbildbreite. Diese bestimmt die tatsächliche Größe des in der Galerie angezeigten Bildes.
Je detaillierter der Zoom-Effekt sein soll, desto größer muss die Bildgröße sein. Zur Verdeutlichung: Wenn die Bildgröße in den WooCommerce-Einstellungen der Bildbreite in den globalen Avada-Optionen entspricht, ist beim Überfahren des Bildes mit der Maus kein Zoom sichtbar. Außerdem muss die Größe des hochgeladenen Bildes mindestens der Einstellung „Hauptbildbreite“ in Ihrem Website-Design entsprechen.
Stellen Sie sicher, dass Sie Ihre Vorschaubilder neu generieren, nachdem Sie die Bildgrößen in WooCommerce geändert haben. Dadurch werden die neuen Bildgrößen auf alle bereits auf Ihre Website hochgeladenen Bilder angewendet. Sie können hierfür das plugin „Thumbnails neu generieren“ verwenden.
Anpassen der Produktbildgrößeneinstellungen in WooCommerce.
WooCommerce bietet Optionen zum Anpassen der Größe von Produktbildern in den Bereichen „Katalogbilder“ und „Einzelproduktbilder“ Ihres Shops. Zusätzlich gibt es spezifische Avada-Einstellungen, die mit den von Ihrem WooCommerce-Shop verwendeten Bildgrößen interagieren. Bei der Konfiguration dieser Bildgrößeneinstellungen ist es wichtig zu beachten, dass auch die globalen Avada-Optionen berücksichtigt werden müssen. Wir werden diese Optionen später genauer erläutern.
Angenommen, die Bilder, die Sie für Ihre Produkte hochladen, sind in der Originaldatei kleiner als die in Ihren WooCommerce-Einstellungen festgelegten Bildgrößen. In diesem Fall bemerken Sie möglicherweise Darstellungsfehler auf Ihren Shopseiten. Dies ist kein Fehler, sondern liegt einfach daran, dass Ihre Bilder zu klein waren, als dass die WooCommerce-Einstellungen sie hätten beeinflussen können. Diese Einstellungen definieren die maximale Breite und Höhe Ihrer Bilder. Alles, was unterhalb dieser Grenzen liegt, wird nicht skaliert.
Achten Sie bei der Konfiguration Ihres Shops darauf, sowohl die Bildgrößeneinstellungen von WooCommerce als auch die tatsächliche Größe Ihrer Bilder zu berücksichtigen. Zusammenfassend lässt sich sagen, dass Ihre Bilder mindestens so groß sein sollten wie die in Ihrem WooCommerce-Shop festgelegten Bildgrößeneinstellungen.
Änderungen an den Bildgrößeneinstellungen erfordern, dass Sie Ihre Vorschaubilder neu generieren, damit die Änderungen für bereits auf Ihre Website hochgeladene Bilder wirksam werden. Daher wird die Verwendung des plugin „Thumbnails neu generieren“ dringend empfohlen. Darüber hinaus können Bildgrößen mithilfe der folgenden Schritte angepasst werden:
Schritt 1 – Navigieren Sie in Ihrer Admin-Seitenleiste zum Tab „ Design “ und anschließend zum Tab „ Anpassen “, um mit der Anpassung Ihrer Website zu beginnen.
Schritt 2 – Navigieren Sie zum Tab „ WooCommerce “ oben auf der Seite.
Schritt 3 – Die Einstellung für Einzelproduktbilder finden Sie im Konfigurationsfenster auf der Registerkarte „ Produktbilder “ .
Schritt 4 – Beim Hochladen von Bildern auf Ihre Produktseiten wählen Sie die Option „Hauptbildbreite“. Die Option „Miniaturansichtbreite“ bestimmt die Breite der Miniaturansichten Ihrer Produkte im Katalog. Tragen Sie die gewünschten Breitenwerte in die Felder ein.
Schritt 5 – Um die Thumbnails nach dem Ändern und Speichern der Bildgrößen neu zu generieren, benötigen Sie das plugin Plugin finden . Installieren Sie zunächst das plugin und navigieren Sie anschließend im WordPress-Adminbereich zu „Werkzeuge“ . Dort können Sie die Option zum Neugenerieren der Bild-Thumbnails auswählen und so die neuen Bildgrößen erstellen.
