Möchten Sie es Ihren Kunden erleichtern, mehr über Ihre Produkte zu erfahren und sie schnell in ihren Einkaufswagen zu legen? Eine Produkt-Schnellansicht hilft Ihnen dabei.
Es zeigt den Besuchern wichtige Informationen wie den Produktpreis, eine kurze Beschreibung, Kundenbewertungen, Farb- und Größenvarianten, komplett mit einem Add-to-Cart-Button.
Auch wenn WooCommerce keine native Schnellansichtsoption bietet, können Sie sie mithilfe von Tools von Drittanbietern hinzufügen.
Technisch gesehen könnten Sie ein Plugin verwenden, um die Schnellansichtsfunktion zu Ihrem WooCommerce-Shop hinzuzufügen, aber die Installation zu vieler Plugins kann zu Website-Abstürzen, langsamen Seitenladevorgängen und Sicherheitsverletzungen führen.
In diesem Tutorial zeige ich Ihnen also, wie Sie Ihren WooCommerce-Produkten eine Modalbox für die Schnellansicht hinzufügen, ohne ein Plugin zu verwenden.
1. Installieren Sie das Botiga WooCommerce-Design
Der einfachste Weg, die Schnellansichtsfunktion zu Ihrem Shop hinzuzufügen, ist die Verwendung eines WooCommerce-Themes, das diese Funktion enthält, wie z. B. unser kostenloses Botiga-Theme.
Botiga ermöglicht es Ihnen nicht nur, Ihren Produkten ein Schnellansichtsfeld hinzuzufügen, sondern bietet auch unzählige Design- und E-Commerce-Funktionen – Sie können beispielsweise Ihre eigene Farbpalette erstellen, das Layout Ihres Einkaufswagens und Ihrer Produktgalerien anpassen und Produktfilter hinzufügen und Abzeichen und mehr.
Laden Sie zunächst das Design herunter und installieren Sie es von der Darstellung > Designs > Neu hinzufügen > Design hochladen Speisekarte:
Alternativ können Sie auch zu gehen Darstellung > Themen > Neu hinzufügenund geben Sie „botiga“ in die Suchleiste ein.
Wenn das Design angezeigt wird, klicken Sie auf Installieren Knopf:
Nachdem Sie das Design auf Ihrer Website installiert haben, klicken Sie auf die aktivieren Sie Knopf.
2. Importieren Sie eine Starter-Site (optional)
Eine Starter-Site ist eine vorgefertigte Demo, die Sie mit nur wenigen Klicks in Ihre eigene Website importieren können.
Botiga hat derzeit eine kostenlose (Beauty) und vier Premium-Startseiten (Bekleidung, Möbel, Schmuck, Einzelprodukt). In diesem Tutorial verwende ich die kostenlose Beauty-Demo – Sie können sich hier alle Starterseiten ansehen.
Wenn Sie keine der vorgefertigten Demos verwenden möchten, können Sie Ihrem Botiga-Shop auch Ihre eigenen Inhalte von Grund auf neu hinzufügen.
Um die Starterseiten zu finden, klicken Sie auf die Darstellung > Starterseiten Menü in Ihrem WordPress-Dashboard.
Bewegen Sie den Mauszeiger über die Demo, die Sie installieren möchten, und klicken Sie auf die Vorschau-Demo Schaltfläche, um eine Vorschau anzuzeigen.
Wenn es Ihnen gefällt, klicken Sie Importieren So installieren Sie die vorgefertigten Inhalts- und Designeinstellungen auf Ihrer Website:
Das Design importieren modal zeigt Ihnen die Plugins und Inhalte, die auf Ihre Website importiert werden.
Sie haben die Möglichkeit, den Import von Plugins und Inhalten abzulehnen, aber ich empfehle, alles zu importieren:
3. Öffnen Sie den Customizer
Die Vorarbeiten sind abgeschlossen. Jetzt zeige ich Ihnen, wie Sie die WooCommerce-Schnellansichtsfunktion zu Ihrem Shop hinzufügen.
Gehen Sie in Ihrem WordPress-Adminbereich zu Aussehen > Anpassen So öffnen Sie den Customizer, in dem Sie auf die Schnellansichtsfunktion zugreifen können:
4. Aktivieren Sie die Schnellansicht-Schaltfläche für Ihre Produkte
Der Customizer wird auf der linken Seite des Bildschirms geöffnet. Botiga hat hier unzählige Optionen, aus denen Sie wählen können.
Um auf die Schnellansichtsfunktion zuzugreifen, gehen Sie zu WooCommerce > Produktkatalog > Allgemein:
Im Allgemein Registerkarte, sollten Sie a sehen Produktkarte Möglichkeit. Wählen Sie es aus, und das Element wird erweitert:
Scrollen Sie nun nach unten zu Schnellansicht Möglichkeit.
Wie Sie im folgenden Screenshot sehen können, ist die Schnellansicht-Schaltfläche auf Ihrer Website bereits aktiviert:
Um zu überprüfen, wie der Button im Frontend Ihrer Website aussieht, öffnen Sie Ihre Shop-Seite. Wenn Sie die Beauty-Demo importiert haben, finden Sie im oberen Menü einen Link zum Shop.
Bewegen Sie den Mauszeiger über eines der Produktbilder, und die Schaltfläche „Schnellansicht“ wird angezeigt:
Die Schaltfläche „Schnellansicht“ wird angezeigt, wenn eine Gruppe von Produkten auf derselben Seite angezeigt wird.
Zum Beispiel in der Beauty-Demo, der Ausgewählte Sammlung Abschnitt zeigt auch die Schnellansicht Schaltfläche für jedes Produkt:
Da es sich bei Botiga um ein responsives Theme handelt, funktioniert die Schnellansicht-Schaltfläche auch auf Mobilgeräten – ein leichtes Tippen auf das Produktbild zeigt es an:
5. Wählen Sie ein Layout für Ihre Schnellansichtsschaltflächen
Sie müssen bemerkt haben, dass es drei Layoutoptionen für die Schnellansicht gibt:
Der erste entfernt die Schnellansicht-Schaltflächen vollständig von Ihrer Website.
Die zweite Option zeigt die Schaltfläche in der Mitte des Produktbildes (dies ist die Standardeinstellung):
Und die dritte Option zeigt die Schnellansicht-Schaltfläche am unteren Rand des Produktbildes an:
Wenn Sie zwischen den Layouts wechseln möchten, wählen Sie die Option, die Sie verwenden möchten, und drücken Sie die Veröffentlichen Schaltfläche oben im Customizer:
6. Elemente im Schnellansichtsfeld hinzufügen oder entfernen
Das Schnellansicht-Modal enthält den Namen des Produkts, den Preis, eine kurze Beschreibung, einen Mengenzähler, einen stilvollen Warenkorb-Button, die Produktbilder und die Produktkategorie:
Wenn Sie einige dieser Elemente nicht in Ihrem Schnellansichtsfeld sehen, können Sie sie über hinzufügen Kartenelemente Option, die gefunden werden kann direkt unter der Schnellansicht Einstellung.
Klicken Sie auf das Augensymbol neben dem Element, das Sie hinzufügen möchten, und es wird im Schnellansichtsfeld angezeigt.
Das Entfernen von Elementen funktioniert auf die gleiche Weise. Klicken Sie auf das Augensymbol, um ein Element zu deaktivieren, und es verschwindet aus dem Schnellansichtsfeld:
7. Fügen Sie Ihrem Geschäft weitere Produkte hinzu
Sie können Ihrem Shop weitere Produkte über hinzufügen Produkte > Neu hinzufügen Admin-Menü. Diese Option befindet sich nicht im Customizer – um darauf zuzugreifen, müssen Sie zu Ihrem WordPress-Dashboard zurückkehren.
Schließen Sie den Customizer und klicken Sie auf Produkte > Neu hinzufügen in der linken Seitenleiste Ihres Admin-Bereichs. Der Produkteditor erscheint auf Ihrem Bildschirm.
Füllen Sie die Felder Titel, Beschreibung, Produktbild, Produktgalerie, Produktkategorien, Produkttags und Produktdaten/Metadaten aus:
Beachten Sie, dass beim Hinzufügen von mehr als drei Bildern zur Produktgalerie standardmäßig nur die ersten drei Bilder im Schnellansichtsfeld angezeigt werden.
Benutzer können jedoch auf die restlichen Bilder zugreifen, indem sie auf das Pfeilsymbol klicken:
Ich empfehle, eine Vorschau der Seite anzuzeigen, während Sie die Produktdetails mit ausfüllen Vorschau der Änderungen Knopf. Machen Sie sich keine Sorgen, Fehler zu machen – Sie können jederzeit zurückkommen und die Produktdetails ändern.
Wenn Sie bereit sind, drücken Sie die Veröffentlichen klicken, und das neue Produkt erscheint auf Ihrer Shop-Seite.
Fazit
WooCommerce ist ein fantastisches Plugin zum Einrichten eines Online-Shops mit WordPress. Allerdings gibt es einige Funktionen, zB die Produktschnellansicht, die es nicht standardmäßig bietet.
Glücklicherweise kann ein hochwertiges WooCommerce-Theme wie Botiga diese Lücke füllen. Alles, was Sie tun müssen, ist das Design zu installieren und zu aktivieren, zum Customizer zu gehen und ein Schnellansichtslayout auszuwählen.
Neben der Schnellansichtsfunktion enthält Botiga viele nützliche E-Commerce-Funktionen.
Sie können beispielsweise Ihren Produktbildern einen Hover-Effekt hinzufügen, Ihre Produktgalerien mit Videos erweitern, Ihre eigene Farbpalette erstellen und vieles mehr.
Um zu sehen, was Botiga für Sie tun kann, laden Sie das Design kostenlos herunter oder sehen Sie sich die Demos an.
Ich hoffe, Sie fanden dieses Tutorial hilfreich. Wenn Sie Fragen oder Vorschläge zum Hinzufügen der Schnellansichtsfunktion zu Ihrem WooCommerce-Shop haben, hinterlassen Sie uns unten einen Kommentar.