Ich habe an WooCommerce-Websites gearbeitet, bei denen alles perfekt aussah, außer den Produktseiten. Sie hatten nur ein Bild, vielleicht zwei, und nichts, um verschiedene Blickwinkel, Funktionen oder Stile zu zeigen.
Nach dem Hinzufügen einer einfachen Produktbildergalerie änderten sich die Dinge schnell. Die Kunden blieben länger auf der Seite, stellten weniger Fragen, und die Verkäufe stiegen. Allein die Tatsache, dass mehr Fotos gezeigt wurden, ließ die Produkte realer und vertrauenswürdiger erscheinen.
In dieser Anleitung zeige ich Ihnen Schritt für Schritt, wie Sie eine WooCommerce-Produktgalerie erstellen können, so wie ich es in meinen eigenen Shops mit SeedProd mache. Sie brauchen keine zusätzlichen Plugins oder Code, um Ihre Produkte zum Strahlen zu bringen.
Bevor wir in das Tutorial einsteigen, hier ein kurzer Blick darauf, was eine Produktbildgalerie Ihrem WooCommerce-Shop hinzufügen kann und warum es sich lohnt, eine einzurichten:
| Merkmal | Warum es wichtig ist |
|---|---|
| WooCommerce Produktbild-Galerie | Ermöglicht den Käufern, jeden Winkel und jedes Detail Ihres Produkts zu sehen |
| Galerie-Schieberegler | Zeigt Produktvariationen wie Farben oder Stile an einem Ort an |
| Zoom & Leuchtkasten | Interaktive und professionelle Gestaltung der Produktseiten |
| Produktvideo (optional) | Schafft Vertrauen und steigert die Konversionsrate, indem es Produkte in Aktion zeigt |
Warum eine WooCommerce Produktbildgalerie erstellen?
Die Erstellung von Produktbildgalerien in WooCommerce kann dazu beitragen, Ihre Produkte bestmöglich zu präsentieren. Eine gut gestaltete WooCommerce-Galerie gibt Käufern mehr Vertrauen und hilft ihnen, einen vollständigen Überblick über Ihr Produkt zu erhalten.
Darüber hinaus kann eine visuell ansprechende Bildergalerie die allgemeine Benutzerfreundlichkeit Ihres Online-Shops verbessern, indem sie ihn ansprechender und einfacher zu navigieren macht. Dies kann zu einer höheren Kundenzufriedenheit und zu höheren Umsätzen führen.
Indem Sie Ihren Kunden klare und detaillierte Bilder von Ihren Produkten zur Verfügung stellen, können Sie Vertrauen und Glaubwürdigkeit in Ihre Marke aufbauen, was zu höheren Konversionsraten und mehr Verkäufen führt. Noch besser: Sie können Ihren Online-Shop von der Konkurrenz abheben und sich so einen Vorteil auf einem überfüllten Markt verschaffen.
Der beste Weg, um eine WooCommerce Produktbildgalerie zu erstellen (ohne Plugin)
Wenn Sie darüber nachdenken, wie Sie eine Produktgalerie für Ihre WordPress-Website erstellen können, greifen Sie vielleicht sofort nach einem WooCommerce-Produktgalerie-Plugin. Schließlich machen sie die Anpassung der standardmäßigen WooCommerce-Funktionen einfach.
Allerdings haben nicht alle Plugins für Bildergalerieslider die wichtigsten Funktionen, die Sie für einen Online-Shop benötigen. Infolgedessen installieren Sie möglicherweise mehr WordPress-Plugins als vorgesehen, was Ihre Website unnötig aufblähen kann.
Anstatt sich auf ein sperriges Produktgalerie-Plugin für WooCommerce zu verlassen, verwende ich lieber SeedProd, da es die Galerie-Funktionen integriert hat.
Es ist der beste Website- und Landing Page-Builder für WordPress, mit dem Sie jeden Teil Ihrer WooCommerce-Website ohne Code leicht anpassen können.
Egal, ob Sie eine komplette WooCommerce-Website von Grund auf neu erstellen oder einzelne Produktseiten anpassen möchten, mit dem Drag-and-Drop-Builder von SeedProd können Sie das alles tun.
Hier sehen Sie einen Vorgeschmack auf einige der Anpassungsmöglichkeiten von SeedProd in WooCommerce:
- Website-Kits: Vorgefertigte WooCommerce-Themenvorlagen, die Sie mit einem einzigen Klick installieren können.
- Drag-and-Drop-Builder: Erstellen Sie benutzerdefinierte Seiten für Ihren Shop, einschließlich Kasse, Einkaufswagen, Shop-Seite und mehr ohne Code.
- WooCommerce Vorlage Tags: Produktgalerie, Produktvorstellungsbild, Produktdaten-Tabs, Produkt-Meta, Produktinhalt und mehr.
- WooCommerce-Blöcke: Schaltfläche "In den Warenkorb", Menü "Warenkorb", Produktraster, Top bewertete Produkte, neueste Produkte, vorgestellte Produkte und mehr.
- Seiten-Modi: Erstellen Sie eine WooCommerce "Coming Soon"-Seite, oder setzen Sie Ihren eCommerce-Shop in den Wartungsmodus.
Darüber hinaus können Sie alle anderen Blöcke und Funktionen von SeedProd verwenden, z. B. den Karussell-Slider, Opt-in-Formulare, Countdown-Timer, Bewertungen, Zeugnisse und vieles mehr.
Angesichts der Benutzerfreundlichkeit und der unendlichen Anpassungsmöglichkeiten ist es sinnvoll, das Design und Layout Ihres Online-Shops mit SeedProd zu verwalten.
Erstellen einer WooCommerce Produktbildgalerie mit SeedProd
Bevor wir in diese Schritt-für-Schritt-Anleitung eintauchen, müssen Sie zunächst sicherstellen, dass Sie WooCommerce auf Ihrer WordPress-Website installiert haben. Wenn Sie noch dabei sind, Ihren Shop einzurichten, können Sie zunächst diese Anleitung zur Erstellung eines Online-Shops lesen.
Sobald Sie das getan haben, folgen Sie diesen Schritten, um eine beeindruckende Bildergalerie zu WooCommerce hinzuzufügen.
- Schritt 1. Installieren und Aktivieren von SeedProd
- Schritt 2. Wählen Sie eine WooCommerce Theme-Vorlage
- Schritt 3. WooCommerce Produktbildgalerie hinzufügen
- Schritt 4. Passen Sie Ihre WooCommerce-Produktseitenvorlage an
- Schritt 5. Veröffentlichen Sie die Änderungen in Ihrem WooCommerce-Shop
- Bonus: Produktvideos zu WooCommerce hinzufügen
- Weitere Möglichkeiten zur Anpassung von WooCommerce
Schritt 1. Installieren und Aktivieren von SeedProd
Zunächst müssen Sie SeedProd Elite herunterladen und auf Ihrer WordPress-Website installieren und aktivieren. Der Elite-Plan gibt Ihnen Zugang zu allen besten WooCommerce-Features und -Funktionen.
Wenn Sie Hilfe bei der Installation benötigen, können Sie unsere Dokumentation zur Installation von SeedProd einsehen. Sie führt Sie durch das Hochladen und Aktivieren des Plugins und die Aktivierung Ihres SeedProd-Lizenzschlüssels.
Schritt 2. Wählen Sie eine WooCommerce Theme-Vorlage
Sobald das Plugin auf Ihrer Website aktiviert ist, navigieren Sie in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder . Klicken Sie dann auf die Schaltfläche Theme Template Kits.
Auf dem folgenden Bildschirm sehen Sie eine Bibliothek von Vorlagen, die Sie mit einem Klick installieren können. Jede Vorlage wird mit allen Seiten geliefert, die Sie in der Demo sehen. Wenn Sie zum Beispiel eine Vorlage mit einer "Über uns"- oder "Referenzen"-Seite in der Vorschau sehen, wird SeedProd diese Seiten automatisch für Sie erstellen.
Um nur Vorlagen zu sehen, die mit WooCommerce kompatibel sind, klicken Sie auf die Registerkarte WooCommerce. Durchsuchen Sie von dort aus die Designs, bis Sie eines finden, das Ihren Anforderungen entspricht, bewegen Sie dann den Mauszeiger darüber und klicken Sie auf das Häkchensymbol.
Nun importiert SeedProd diese Vorlage und in wenigen Sekunden sehen Sie alle Vorlagenteile in einer Liste auf dem Themen-Dashboard:
Mit dem Drag-and-Drop-Seitenersteller von SeedProd können Sie jeden Teil der Vorlage, einschließlich Kasse, Warenkorb, Shop und einzelner Produktseiten, leicht anpassen. So fügen wir einen responsiven Produktgalerieslider hinzu.
Aber zuerst müssen Sie Ihren WooCommerce-Produkten Galeriebilder hinzufügen. Wir zeigen Ihnen, wie das geht.
Schritt 3. WooCommerce Produktbildgalerie hinzufügen
Das Hinzufügen zusätzlicher Fotos zu Ihren Produkten ist eine fantastische Möglichkeit, um potenziellen Kunden mehr Informationen zu bieten. Sie können zum Beispiel eine Galerie verwenden, um zusätzliche Bilder hochzuladen, wenn ein Produkt verschiedene Farboptionen oder Produktvarianten hat.
Sie können ganz einfach zusätzliche Produktbilder in WooCommerce hinzufügen, indem Sie mehrere Dateien in den Abschnitt Produktgalerie hochladen. Navigieren Sie in Ihrer WordPress-Verwaltung zu Produkte " Alle Produkte . Suchen Sie dann das Produkt, dem Sie eine Produktgalerie hinzufügen möchten, und klicken Sie auf Bearbeiten.
Im Produkt-Editor sehen Sie auf der rechten Seite einen Bereich namens "Produktgalerie". Klicken Sie in diesem Bereich auf den Link "Produktgalerie-Bilder hinzufügen", um Ihre Galerie-Miniaturansichten hinzuzufügen.
Wenn Sie auf diesen Link klicken, öffnet sich die WordPress-Medienbibliothek, in die Sie entweder Bilder von Ihrem Computer oder direkt aus der Bibliothek hochladen können.
Halten Sie die Umschalttaste auf Ihrer Tastatur gedrückt, um mehrere Bilder auszuwählen, und klicken Sie dann auf die Schaltfläche Zur Galerie hinzufügen.
WooCommerce fügt nun neue Bilder zu Ihrem Produkteditor hinzu. Sie sollten Ihr Hauptbild sehen, dann die Galerie mit zusätzlichen Miniaturbildern darunter.
Klicken Sie unbedingt auf die Schaltfläche Aktualisieren, um Ihre Änderungen zu speichern.
Schritt 4. Passen Sie Ihre WooCommerce-Produktseitenvorlage an
Nachdem Sie Ihrem WooCommerce-Shop nun Galeriebilder hinzugefügt haben, können Sie Ihre Produktseiten mit SeedProd anpassen.
Gehen Sie also noch einmal zum Theme Builder von SeedProd und suchen Sie nach der Vorlage "Produktseite". Diese Vorlage bestimmt, wie alle Ihre individuellen Produktseiten aussehen.
Um es anzupassen, fahren Sie einfach mit dem Mauszeiger darüber und klicken Sie auf den Link Design bearbeiten.
Auf dem nächsten Bildschirm sehen Sie den visuellen Seitenersteller von SeedProd. Hier können Sie neue Designelemente per Drag-and-Drop auf Ihre Seite ziehen und das Gesamtdesign anpassen.
Wie Sie sehen können, verwendet diese Vorlage das Product Featured Image als Standardproduktbild. Dies ist eines der WooCommerce-Vorlagen-Tags von SeedProd, das die Produktinformationen direkt aus WooCommerce bezieht.
Ersetzen wir diesen Block durch den Produktgalerie-Block von SeedProd.
Bewegen Sie dazu den Mauszeiger über das Produktvorstellungsbild, bis Sie einen orangefarbenen Rahmen sehen, und klicken Sie dann auf das Mülleimersymbol.
Produktbild-Galerie-Block hinzufügen
SeedProd enthält integrierte WooCommerce-Einstellungen für die Vergrößerung von Produktbildern, so dass Kunden feine Details aus der Nähe betrachten können. Klicken Sie also auf den Block Produktgalerie-Bilder im linken Bereich und ziehen Sie ihn auf Ihre Seitenvorschau, um das Galerie-Layout einzubetten.
Wenn Sie auf den Galerieblock klicken, sehen Sie verschiedene Einstellungen, die Sie anpassen können.
Die erste ist die Bildzoom-Option, die ein Bild vergrößert, wenn Sie mit dem Mauszeiger darüber fahren.
Hier können Sie die horizontalen Schieberegler ziehen, um die Position der Zoom-Schaltfläche und die Schriftgröße zu ändern. Sie können auch die Farbe des Symbols, den Radius des Rahmens und die Hintergrundfarbe bearbeiten.
Als Nächstes folgen Anpassungen für den Hauptbildrahmen. Sie können zum Beispiel einen durchgehenden, gepunkteten oder gestrichelten Rahmen hinzufügen und den Radius, die Farbe und die Breite des Rahmens ändern.
Ähnliche Anpassungen sind für die Miniaturbilder der Galerie möglich.
Wenn Sie zur Registerkarte Erweitert wechseln, sehen Sie weitere Styling-Optionen, darunter
- Radius, Farbe, Breite und Stil der Umrandung
- Abstände für die Blockränder und Polsterung
- CSS-Klassenoptionen
- Umschalten der Gerätesichtbarkeit für Mobil- und Desktopgeräte
- Animationseffekte
Passen Sie Ihre Produktseite weiter an, bis Sie mit dem Design zufrieden sind. Sie können zum Beispiel den Block "Verwandte Produkte" hinzufügen, um andere Produkte zu verkaufen.
Oder Sie können eine Tweet-Schaltfläche einbetten, um die Nutzer zu ermutigen, Ihr Produkt in den sozialen Medien zu teilen.
Vergessen Sie nicht, auf die Schaltfläche " Speichern" zu klicken, wenn Sie mit Ihrem Entwurf zufrieden sind.
Schritt 5. Veröffentlichen Sie die Änderungen in Ihrem WooCommerce-Shop
Der letzte Schritt besteht darin, Ihre Änderungen auf Ihrer WooCommerce-Website zu aktivieren. Dazu müssen Sie den Page Builder verlassen und zum Theme Builder-Bildschirm zurückkehren.
Suchen Sie dort den Schalter "SeedProd-Theme aktivieren", und schalten Sie ihn auf "Ja".
Jetzt können Sie Ihre Produktseite besuchen, um Ihre neue Produktbildergalerie zu sehen.
Wie Sie sehen, können Sie durch jedes Bild klicken und verschiedene Details vergrößern. Und wenn Sie auf die Zoom-Schaltfläche klicken, wird das Bild in einem Leuchtkasten im Vollbildmodus geöffnet.
Von dort aus können Sie jedes Bild in einem Diashow-ähnlichen Format durchklicken.
Bonus: Produktvideos zu WooCommerce hinzufügen
Das Hinzufügen von Videos zu Ihren Produktseiten ist eine der einfachsten Möglichkeiten, das Engagement zu erhöhen und Vertrauen aufzubauen. Ich habe gesehen, dass Produktvideogalerien einen echten Unterschied machen, vor allem bei Artikeln, die davon profitieren, in Aktion gesehen zu werden, wie Kleidung, Gadgets oder Werkzeuge.
Sie können Videos direkt von YouTube oder Vimeo mit dem Videoblock von SeedProd einbetten oder ein Plugin wie Smash Balloon verwenden, um eine vollständige WooCommerce-Produktvideogalerie zu erstellen.
Wie man ein Produktvideo mit SeedProd einbettet
So füge ich normalerweise Videos zu einer WooCommerce-Produktseite hinzu, indem ich den Drag-and-Drop-Builder von SeedProd verwende:
- Gehen Sie in Ihrem WordPress-Dashboard zu SeedProd " Theme Builder und bearbeiten Sie Ihre Produktseitenvorlage.
- Ziehen Sie den Videoblock im linken Bereich in Ihr Layout an die Stelle, an der das Video erscheinen soll - normalerweise unter der Bildergalerie oder der Produktbeschreibung.
- Fügen Sie Ihren YouTube- oder Vimeo-Link in die Blockeinstellungen ein. Er wird automatisch eingebettet und ein responsiver Player angezeigt.
- Verwenden Sie die Blockeinstellungen, um die Ausrichtung, die Auffüllung und die Abstände an Ihr Design anzupassen.
Wenn Sie lieber eine Galerie von Produktvideos anzeigen möchten, ist das YouTube-Feed-Plugin von Smash Balloon eine weitere gute Option. Ich habe es verwendet, um Kundenrezensionen, Produktdemos und Anleitungsvideos an einem Ort zu präsentieren.
Welche Methode Sie auch immer wählen, stellen Sie sicher, dass das Video dem Kunden hilft, sich die Verwendung Ihres Produkts vorzustellen. Das ist es, was einen Klick in einen Verkauf verwandelt.
Weitere Möglichkeiten zur Anpassung von WooCommerce
Die Erstellung einer Produktbildgalerie ist nur eine der vielen Möglichkeiten, Ihren Shop zu optimieren. Weitere WooCommerce-Anpassungen finden Sie in den folgenden Anleitungen:
- So passen Sie die Registerkarte "Zusätzliche Informationen" von WooCommerce an
- Wie man den View Cart Button in WooCommerce hinzufügt
- Wie man den Titel der Shop-Seite in WooCommerce ändert
- Wie man Stern-Bewertung zu WooCommerce Produkt-Seiten hinzufügen
- Wie man verwandte Produkte in WooCommerce anzeigt
- Anzeige von Produktkategorien und Tags in WooCommerce
- Wie man Produktbeschreibungen in WooCommerce erhält und anzeigt
- Wie man in WooCommerce vorgestellte Produkte anzeigt
- Wie WooCommerce View Cart nicht funktioniert zu beheben
- Wie man nicht vorrätige Produkte in WooCommerce ausblendet
Wir hoffen, dass diese Anleitung Ihnen geholfen hat, eine beeindruckende Produktbildgalerie in WooCommerce zu erstellen.
Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte beteiligen Sie sich an der Konversation auf YouTube, X und Facebook, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
