Wie man eine beeindruckende Produktbildgalerie in WooCommerce erstellt 

Suchen Sie nach einer einfachen Möglichkeit, eine Produktbildgalerie für Ihre WooCommerce-Website zu erstellen?

Produktbildergalerien können den Umsatz steigern und das Kundenerlebnis in Ihrem Online-Shop verbessern. Glücklicherweise ist das Hinzufügen von Galerien zu Ihrer WooCommerce-Website relativ einfach und erfordert nur ein paar einfache Schritte.

In diesem Artikel führen wir Sie Schritt für Schritt durch die Einrichtung einer WooCommerce-Produktgalerie, vom Hochladen Ihrer Produktbilder bis zur Anpassung der Galerieanzeige.

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.

Warum SeedProd für die Erstellung einer Produktbildergalerie verwenden?

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.

Deshalb ist unsere bevorzugte Wahl für das Hinzufügen einer Produktbildgalerie zu WooCommerce SeedProd.

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.

Ganz gleich, 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 dies 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.

Wenn Sie das getan haben, folgen Sie diesen Schritten, um eine beeindruckende Bildergalerie zu WooCommerce hinzuzufügen.

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.

Um weitere Produktfotos hinzuzufügen, navigieren Sie in Ihrem WordPress-Admin 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

Klicken Sie anschließend im linken Bereich auf den Block Produktgalerie-Bilder und ziehen Sie ihn auf Ihre Seitenvorschau, um das Galerielayout 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, wie z. B.:

• 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

Continue customizing your product page until you’re happy with the design. For instance, you may want to add the related products block to cross-sell other products.

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

Produktvideos sind eine weitere gute Möglichkeit, das Engagement in Ihrem Online-Shop zu erhöhen. Untersuchungen zufolge haben 88 % der Menschen ein Produkt oder eine Dienstleistung gekauft, nachdem sie ein Video gesehen haben.

Es gibt verschiedene Möglichkeiten, Videos von Plattformen wie YouTube, Vimeo und anderen zu Ihrer WordPress-Website hinzuzufügen. Unsere Lieblingslösung ist jedoch das YouTube-Feed-Plugin von Smash Balloon.

Dieses Plugin hat sowohl eine kostenlose als auch eine Pro-Version, mit der Sie beeindruckende YouTube-Galerien überall auf Ihrer Website einbetten können. Es bietet mehrere Galerie-Layouts und Autoplay-Optionen, und Sie können Ihre Video-Feeds mit einem WordPress-Block oder Shortcode einbetten.

Auf diese Weise können Sie nutzergenerierte Inhalte wie Produktbewertungen, Unboxing-Videos, Anleitungen und vieles mehr präsentieren.

Folgen Sie dieser Anleitung zum Erstellen einer Videogalerie in WordPress, um alle Schritte zu erfahren.

Da haben Sie es!

More Ways to Customize WooCommerce

Creating a product image gallery is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:

• How to Customize the WooCommerce Additional Information Tab
• 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
• How to Display Related Products in WooCommerce
• Anzeige von Produktkategorien und Tags in WooCommerce 
• Wie man Produktbeschreibungen in WooCommerce erhält und anzeigt
• How to Display Featured Products in WooCommerce 
• Wie WooCommerce View Cart nicht funktioniert zu beheben
• How to Hide Out of Stock Products in WooCommerce

We hope this guide has helped you learn to create a stunning product image gallery in WooCommerce.

Vielen Dank fürs Lesen! Wir würden uns freuen, Ihre Meinung zu hören. Bitte hinterlassen Sie einen Kommentar mit Ihren Fragen und Ihrem Feedback.

Sie können uns auch auf YouTube, X (früher Twitter) und Facebook folgen, um weitere hilfreiche Inhalte für Ihr Unternehmen zu erhalten.