Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin der plugin . Es ist lächerlich einfach, einen Online-Shop einzurichten und mit dem Verkauf Ihrer Produkte zu beginnen, sobald Sie 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.
Avada bietet Ihnen die Möglichkeit, das Erscheinungsbild Ihrer Website anzupassen, was bei der WooCommerce-Integration nicht anders ist. Mit unserem beliebten Netzwerk für erweiterte Optionen können Sie aus einer Vielzahl von Anpassungen für eine Vielzahl von Designmöglichkeiten auswählen, darunter:
- WooCommerce hat sein eigenes Avada Global Options Panel, das vom Avada Global Options Panel getrennt ist.
- Avada Page Options sind für jedes Produkt verfügbar.
- Avada Builder ermöglicht Ihnen das Erstellen von Produktseitendesigns durch Ziehen und Ablegen von Elementen.
Um Ihre E-Commerce-Site mit Avada zu erstellen.
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
- Produkt-Zoom-Effekt erstellen
- Anpassen der Produktbildgrößeneinstellungen in WooCommerce.
WooCommerce installieren – Schritt für Schritt Anleitung
Gehen Sie zu Avada > Plugin s / 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 Wizard angezeigt werden. Wenn Sie eine unserer Woo-Demos wie Modern Shop oder Classic Shop importieren, können Sie diesen Schritt überspringen, ohne Ihre Daten zu verlieren. Um weiter zu springen, wählen Sie im Dropdown-Menü „Nicht jetzt“ aus. Wenn Sie keine unserer Woo-Demos importieren, fahren Sie mit dem nächsten Schritt fort, indem Sie auf „Let's Go!“ klicken. Taste, um mit dem Einrichtungsvorgang zu beginnen.
Schritt 4 – Befolgen Sie die Aufforderungen und Anweisungen auf dem Bildschirm, um den Vorgang abzuschließen, und geben Sie die erforderlichen Informationen zu Ihrem Geschäft ein. 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
Als Teil des normalen WooCommerce-Installationsprozesses sollte der Einrichtungsassistent gestartet werden, mit dem Sie Ihren Shop konfigurieren und Ihre Shop-Seiten Kunden zuordnen können. Weitere Informationen zu den Seiten, die der Einrichtungsassistent 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 im Hilfe-Menü auf einer beliebigen WooCommerce-Seite, die sich oben links im befindet, Setup-Assistent auswählen Fenster.
Sie können die Shop-Seite manuell festlegen, indem Sie in den WooCommerce-Einstellungen auf die Registerkarte Produkte gehen – WooCommerce > Einstellungen > Produkte – und aus dem Dropdown-Menü die Seite auswählen, die die Hauptshop-Seite sein soll. WooCommerce zeigt dann Ihre Produkte auf dieser Seite als Ergebnis Ihrer Aktion an.
Die restlichen Seiten können im Erweitert-Tab konfiguriert werden, zu finden 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 Post-Content-Feld mit dem Text aus der Produktbeschreibung aus. Alle Produktinformationen werden in diesem Abschnitt angezeigt.
Schritt 4 – Füllen Sie das Feld „ Produktdaten “ mit allen Produktinformationen aus. amp sind 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; Diese muss für jedes Produkt ausgefüllt werden.
Schritt 7 Produktgalerie weitere Bilder hinzu, Bildergalerie verwenden möchten.
Schritt 8 – Sie im Feld Produktkategorien Kategorien Füllen Sie als Nächstes die Lücken mit den entsprechenden Tags für Ihr Produkt im Feld „ Produkttags “ aus .
Schritt 9 – Nachdem Sie alle erforderlichen Informationen eingegeben haben, klicken Sie auf die Veröffentlichen “ und der Artikel wird auf Ihrer Haupt-Storefront-Seite angezeigt.
Produkt-Zoom-Effekt erstellen
Wenn Sie Avada Layouts verwenden, müssen Sie sicherstellen, dass die Option WooCommerce Product Images Zoom in Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Zoom option oder in der Registerkarte General Woo Product Images Element > 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 > Allgemeiner WooCommerce > Breite der WooCommerce-Produktbilder oder die Einstellung im Woo Product Images Element. 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-Hauptbilds – Die Einstellung für die Breite des WooCommerce-Hauptbilds finden Sie im Customizer Ihrer WordPress-Website. Navigieren Sie im WordPress-Dashboard zu Darstellung > Anpassen > WooCommerce > Produktbilder , wo Sie die Einstellung Breite des Hauptbilds finden; Dadurch wird die tatsächliche Größe des in der Galerie angezeigten Bildes bestimmt.
Je detaillierter Ihr Zoom-Effekt 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 der Bildbreite in den globalen Optionen von Avada entspricht, ist kein Zoomen sichtbar, wenn die Maus über das Bild auf der Seite fährt. Darüber hinaus muss die Größe des tatsächlichen Bildes, das Sie hochladen, gleich oder größer als die Einstellung für die 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 das plugin Regenerate Thumbnails verwenden, um dies zu erreichen.
Anpassen der Produktbildgrößeneinstellungen in WooCommerce.
WooCommerce enthält 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. Beachten Sie bei der Konfiguration dieser Bildgrößeneinstellungen, dass auch die Einstellungen der globalen Avada-Optionen berücksichtigt werden müssen. Auf jede dieser Optionen gehen wir später noch genauer ein.
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 werden Sie möglicherweise einige visuelle Layout-Diskrepanzen im Frontend Ihrer Shop-Seiten bemerken. Dies ist in keinster Weise ein Fehler. Es 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 die maximale Breite und Höhe Ihrer Bilder in Bezug auf die Bildabmessungen vorstellen. Alles, was unter das angegebene Limit fällt, wird nicht in der Größe geändert.
Achten Sie bei der Konfiguration Ihres Shops darauf, dass sowohl die WooCommerce-Bildgrößeneinstellungen als auch die tatsächliche Größe Ihrer Bilder berücksichtigt werden. Zusammenfassend sollten Ihre Bilder die gleiche Größe haben oder größer als die Bildgrößeneinstellungen in Ihrem WooCommerce-Shop.
Bei Änderungen an Ihren Bildgrößeneinstellungen müssen Sie Ihre Miniaturansichten neu generieren, 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 mithilfe der folgenden Schritte angepasst werden:
Schritt 1 – Navigieren Sie in Ihrer Admin-Seitenleiste zur 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 Bildeinstellung für einzelne Produktbilder finden Sie auf der Registerkarte Produktbilder
Schritt 4 – Wenn Sie Bilder auf Ihre einzelnen Produktseiten hochladen, wählen Sie die Option für die Hauptbildbreite aus. Die Thumbnail-Breite ist die Breite der Thumbnails für Ihre Produkte im Katalog. Füllen Sie die Lücken mit Ihrem gewünschten Breitenwert aus.
Schritt 5 plugin Regenerate Thumbnails Abschnitt Plugin finden Installieren Sie zuerst das plugin und navigieren Sie dann zur WP Admin > Tools , wo Sie auswählen können, ob Sie Ihre Bild-Thumbnails regenerieren und die neuen Bildgrößen erstellen möchten.
