Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin in der Wahl. Es ist lächerlich einfach, einen Online-Shop einzurichten und mit dem Verkauf Ihrer Produkte zu beginnen, sobald Sie damit fertig sind. Avada bietet umfassende Unterstützung und Designintegration für WooCommerce, sodass Sie den Shop Ihrer Träume erstellen und gleichzeitig sicherstellen können, dass er genau so aussieht, wie Sie es sich vorgestellt haben.
Bei Avada geht es darum, Ihnen die Möglichkeit zu geben, das Erscheinungsbild Ihrer Website anzupassen, was bei der WooCommerce-Integration nicht anders ist. Mithilfe unseres beliebten Netzwerks erweiterter Optionen können Sie aus einer Vielzahl von Anpassungen für eine Vielzahl von Designmöglichkeiten auswählen, darunter:
- WooCommerce verfügt über ein eigenes Avada Global Options Panel, das vom Haupt-Avada Global Options Panel getrennt ist.
- Avada-Seitenoptionen sind für jedes Produkt verfügbar.
- Mit Avada Builder können Sie Produktseitendesigns durch Ziehen und Ablegen von Elementen erstellen.
So erstellen Sie Ihre E-Commerce-Site mit Avada.
Zuerst müssen wir wooCommerce in Avada installieren.
- WooCommerce installieren – Schritt-für-Schritt-Anleitung
- So weisen Sie Ihrer Website eine Shop-Seite zu
- Erstellen Sie Ihre Produkte
- Erstellen eines Produkt-Zoomeffekts
- 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 Screenshot unten gezeigt.
Schritt 1 – Installieren Sie das WooCommerce- plugin .
Schritt 2 – Wählen Sie „Installieren“ aus dem Dropdown-Menü.
Das plugin wird automatisch installiert und aktiviert.
Schritt 3 – Danach sollte der WooCommerce-Setup-Assistent angezeigt werden. Wenn Sie eine unserer Woo-Demos importieren, z. B. Modern Shop oder Classic Shop, können Sie diesen Schritt überspringen, ohne das Risiko eines Datenverlusts einzugehen. Um weiterzuspringen, wählen Sie „Im Moment nicht“ aus dem Dropdown-Menü. Wenn Sie keine unserer Woo-Demos importieren, fahren Sie mit dem nächsten Schritt fort, indem Sie auf „Los geht’s!“ klicken. Klicken Sie auf die Schaltfläche, um den Einrichtungsvorgang zu starten.
Schritt 4 – Befolgen Sie die Anweisungen und Anweisungen auf dem Bildschirm, um den Vorgang abzuschließen und die erforderlichen Informationen zu Ihrem Geschäft einzugeben. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Erstellen Sie Ihr erstes Produkt“, um mit der Erstellung Ihres ersten Produkts fortzufahren. Alternativ können Sie zu Ihrem WordPress-Dashboard zurückkehren, indem Sie auf den Link unterhalb des Setup-Fensters klicken.
So weisen Sie Ihrer Website eine Shop-Seite zu
Im Rahmen der normalen WooCommerce-Installation sollte der Setup-Assistent gestartet werden, mit dem Sie Ihren Shop konfigurieren und Ihre Shop-Seiten Kunden zuweisen können. Weitere Informationen zu den Seiten, die der Setup-Assistent erstellt, finden Sie in diesem WooCommerce-Dokument.
Wenn der Setup-Assistent nicht angezeigt wird oder Sie ihn aus irgendeinem Grund abbrechen, können Sie alternativ jederzeit zum Setup-Assistenten zurückkehren, indem Sie auf einer WooCommerce-Seite im Menü „Hilfe“ die Option „Setup-Assistent“ auswählen, die sich oben links auf der Seite befindet Fenster.
Sie können die Shop-Seite manuell festlegen, indem Sie in den WooCommerce-Einstellungen zur Registerkarte „Produkte“ gehen – WooCommerce > Einstellungen > Produkte – und aus dem Dropdown-Menü die Seite auswählen, die als Haupt-Shop-Seite dienen soll. Als Ergebnis Ihrer Aktion zeigt WooCommerce dann Ihre Produkte auf dieser Seite an.
Die übrigen Seiten können auf der Registerkarte „Erweitert“ konfiguriert werden, die Sie unter WooCommerce > Einstellungen > Erweitert .
Erstellen Sie Ihre Produkte
Schritt 1 – Navigieren Sie in Ihrer WordPress-Admin-Seitenleiste zur Registerkarte „Produkte“ > „Produkt hinzufügen“.
Schritt 2 – Geben Sie oben auf der Seite den Namen Ihres Produkts ein.
Schritt 3 – Füllen Sie das Beitragsinhaltsfeld mit dem Text aus der Produktbeschreibung aus. In diesem Abschnitt werden alle Produktinformationen angezeigt.
Schritt 4 Produktdaten “ mit allen Produktinformationen aus . amp beispielsweise Preis, SKU und Versand.
Schritt 5 – Geben Sie im Feld „ Produktkurzbeschreibung “ eine kurze Beschreibung Ihres Produkts ein, die neben Ihren Hauptbildern angezeigt wird.
Schritt 6 Das Hauptbild sollte unter dem Feld „ Produktbild “ auf der rechten Seite der Seite platziert werden; Dies muss für jedes Produkt ausgefüllt werden.
Schritt 7 – Fügen Sie weitere Bilder zum Feld „ Produktgalerie , wenn Sie eine Bildergalerie anstelle eines einzelnen Bildes verwenden möchten.
Schritt 8 Sie im Feld „ Produktkategorien “ die Kategorien ein, die für Ihre Produkte gelten. Füllen Sie als Nächstes die leeren Felder im Feld „ Produkt -Tags “ mit den entsprechenden Tags 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 Hauptseite im Schaufenster angezeigt.
Erstellen eines Produkt-Zoomeffekts
Wenn Sie Avada-Layouts verwenden, müssen Sie sicherstellen, dass die Zoom-Option für WooCommerce-Produktbilder in Avada > Optionen > WooCommerce > WooCommerce allgemein > Zoom-Option für WooCommerce-Produktbilder oder auf der Registerkarte „Allgemein“ des Woo-Produktbildelements > Produktbilder zoomen, wenn Sie WooCommerce-Layouts verwenden.
Breite der WooCommerce-Produktbilder – Ihre Hauptbildbreite (siehe Einstellung unten) und die tatsächliche Größe des hochgeladenen Bildes müssen beide größer sein als die Einstellung „ Avada“ > „Optionen“ > „WooCommerce“ > „Allgemeines WooCommerce“ > „WooCommerce-Produktbildbreite“ oder die Einstellung „Maximale Breite der Produktbilder“. im Woo-Produktbildelement. Die Breite der Containerspalte für eine einzelne Produktgalerie wird durch die von Ihnen gewählten Einstellungen bestimmt. Sobald Sie die erforderlichen Anpassungen vorgenommen haben, können Sie die Breite Ihres WooCommerce-Hauptbilds festlegen.
WordPress-Hauptbildbreite – Die Einstellung für die WooCommerce-Hauptbildbreite finden Sie im Customizer Ihrer WordPress-Website. Navigieren Sie im WordPress-Dashboard zu „Darstellung“ > „Anpassen“ > „WooCommerce“ > „Produktbilder“ , wo Sie die Einstellung „Hauptbildbreite“ finden. Dadurch wird die tatsächliche Größe des in der Galerie angezeigten Bildes bestimmt.
Je detaillierter Ihr Zoomeffekt ist, desto größer ist die Bildgröße, die Sie für Ihr Bild eingestellt haben. Zur Verdeutlichung: Wenn die Bildgröße in den WooCommerce-Einstellungen mit der Bildbreite in den globalen Optionen von Avada übereinstimmt, ist kein Zoom sichtbar, wenn die Maus über das Bild auf der Seite fährt. Darüber hinaus muss die Größe des tatsächlich hochgeladenen Bildes gleich oder größer als die Einstellung „Hauptbildbreite“ im Design Ihrer Website sein.
Stellen Sie sicher, dass Sie Ihre Miniaturansichten neu generieren, nachdem Sie die WooCommerce-Bildgrößen geändert haben. Dadurch werden Ihre neuen Bildgrößen auf alle Bilder angewendet, die bereits auf Ihre Website hochgeladen wurden. Sie können dazu das plugin „Miniaturansichten regenerieren“ verwenden.
Anpassen der Produktbildgrößeneinstellungen in WooCommerce.
WooCommerce bietet Optionen zum Anpassen der Größe von Produktbildern in den Abschnitten „Katalog“ und „Einzelproduktbilder“ des Shops. Darüber hinaus gibt es spezielle Avada-Einstellungen, die in Verbindung mit den von Ihrem WooCommerce-Shop verwendeten Bildgrößen funktionieren. Bei der Konfiguration dieser Bildgrößeneinstellungen ist zu beachten, dass auch die globalen Optionseinstellungen von Avada berücksichtigt werden müssen. Wir werden jede dieser Optionen später ausführlicher besprechen.
Angenommen, die Bilder, die Sie für Ihre Produkte hochladen, sind an der Quelle kleiner als die in Ihren WooCommerce-Einstellungen angegebenen Bildgrößen. In diesem Fall stellen Sie möglicherweise einige visuelle Layout-Diskrepanzen im Frontend Ihrer Shop-Seiten fest. Dies ist in keiner Weise ein Fehler. Das liegt einfach daran, dass Ihre Bilder zu klein waren, als dass die WooCommerce-Einstellungen sie beeinflussen könnten. Sie können sich diese Einstellungen als maximale Breite und Höhe Ihrer Bilder in Bezug auf die Bildabmessungen vorstellen. Alles, was unter den angegebenen Grenzwert fällt, wird nicht in der Größe geändert.
Stellen Sie bei der Konfiguration Ihres Shops sicher, dass sowohl die WooCommerce-Bildgrößeneinstellungen als auch die tatsächliche Größe Ihrer Bilder berücksichtigt werden. Zusammenfassend lässt sich sagen, dass Ihre Bilder die gleiche Größe wie oder größer als die Bildgrößeneinstellungen in Ihrem WooCommerce-Shop haben sollten.
Bei allen Änderungen an Ihren Bildgrößeneinstellungen müssen Sie Ihre Miniaturansichten neu erstellen, damit sie auf Bilder wirksam werden, die bereits auf Ihre Website hochgeladen wurden. Daher wird die Verwendung des Regenerate Thumbnails- plugin dringend empfohlen. Darüber hinaus können die Bildgrößen mit den folgenden Schritten angepasst werden:
Schritt 1 – Navigieren Sie in Ihrer Admin-Seitenleiste zur Registerkarte „ Darstellung “ und dann zur Registerkarte „ Anpassen “, um mit der Anpassung Ihrer Website zu beginnen.
Schritt 2 – Navigieren Sie zur Registerkarte „ WooCommerce “ oben auf der Seite.
Schritt 3 für einzelne Produktbilder finden Sie auf der Registerkarte „ Produktbilder “ des Konfigurationsfensters.
Schritt 4 – Wenn Sie Bilder auf Ihre einzelnen Produktseiten hochladen, wählen Sie die Option für die Hauptbildbreite. Die Miniaturbildbreite ist die Breite der Miniaturansichten für Ihre Produkte im Katalog. Füllen Sie die Lücken mit dem gewünschten Breitenwert aus.
Schritt 5 – Um Miniaturansichten neu zu generieren, nachdem Sie die Bildgrößen geändert und gespeichert haben, müssen Sie das plugin Plugin finden . Installieren Sie zunächst das plugin und navigieren Sie dann zur „WP Admin“ > „Tools“ , wo Sie Ihre Bildminiaturen neu generieren und die neuen Bildgrößen erstellen können.
