So erstellen Sie eine WooCommerce-Produktbildgalerie (Schritt für Schritt)

Online-Shopping bedeutet, dass Kunden Ihre Produkte nicht anfassen, halten oder persönlich untersuchen können.

Genau deshalb müssen Ihre WooCommerce-Produktbilder besonders gut funktionieren, um die vollständige Geschichte dessen zu erzählen, was Sie verkaufen.

Eine gut gestaltete Produktbildgalerie zeigt mehr als nur Ihre Artikel – sie beantwortet Fragen, schafft Vertrauen und hilft Kunden, sich den Besitz Ihrer Produkte vorzustellen.

Durch unsere Arbeit mit unzähligen WooCommerce-Shops haben wir gesehen, wie die richtige Galerie-Einrichtung aus zufälligen Besuchern zufriedene Kunden machen kann.

Das Beste daran? Sie benötigen keine teuren Werkzeuge oder technisches Fachwissen, um Galerien zu erstellen.

Wir zeigen Ihnen genau, wie Sie Produktbildergalerien einrichten, die Ihren WooCommerce-Shop professionell aussehen lassen und Ihre Produkte von selbst verkaufen.

Warum sollten Sie WooCommerce-Produktgalerien erstellen?

WooCommerce ist das beliebteste WordPress E-Commerce-Plugin auf dem Markt. Es ermöglicht Ihnen, Produkte durch die Erstellung eines Online-Shops zu verkaufen.

Die meisten WordPress-Themes für WooCommerce werden mit Standardvorlagen für Shop- und Shop-Kategorie-Seiten geliefert. Diese Seiten listen einfach Ihre Produkte im Stil des Themes auf.

Was ist, wenn Sie eine Produktgalerie erstellen und sie in einem Blogbeitrag oder einer anderen Seite Ihrer Website anzeigen möchten? Indem Sie Ihre Produkte in Ihren beliebten Blogbeiträgen und Seiten anzeigen, können Sie Ihren Umsatz und Ihre Konversionen steigern.

Werfen wir einen Blick darauf, wie Sie ganz einfach WooCommerce-Produktbildgalerien erstellen können. Wir stellen zwei verschiedene Methoden vor, und Sie können die unten stehenden Schnelllinks verwenden, um zu der für Sie passenden Option zu springen:

Methode 1: WooCommerce-Produktgalerien mit SeedProd erstellen (empfohlen)

Der beste Weg, eine WooCommerce-Produktbildergalerie zu erstellen, ist die Verwendung von SeedProd. Es ist der beste Drag-and-Drop-WordPress-Page-Builder auf dem Markt.

Wir haben SeedProd verwendet, um mehrere Seitenlayouts auf unseren Demo-Websites zu erstellen, und die Ergebnisse waren beeindruckend – die Layouts sahen professionell aus und luden reibungslos.

SeedProd ermöglicht es Ihnen, ganz einfach benutzerdefinierte WordPress-Themes und Landingpages zu erstellen, ohne dass Sie programmieren müssen. Außerdem verfügt es über integrierte WooCommerce-Blöcke und -Integrationen, die es einfach machen, Produktbildergalerien zu jeder Seite oder jedem Beitrag in WordPress hinzuzufügen.

Wenn Sie mehr Details sehen möchten, haben wir einen ausführlichen Testbericht über SeedProd, der alle seine Funktionen und Vorteile abdeckt.

Um loszulegen, müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, können Sie dieser Anleitung folgen, wie man ein WordPress-Plugin installiert.

Sobald das Plugin aktiviert ist, gehen Sie in Ihrem WordPress-Dashboard zu SeedProd » Einstellungen und geben Sie Ihren Lizenzschlüssel ein.

Sie finden Ihren Lizenzschlüssel in Ihrem Konto auf der SeedProd-Website. Nachdem Sie Ihren Lizenzschlüssel eingegeben haben, klicken Sie auf die Schaltfläche 'Schlüssel überprüfen', um fortzufahren.

Auswahl eines WooCommerce Template Kits

Als Nächstes müssen Sie ein WooCommerce-Template-Kit für Ihren Online-Shop auswählen. Dies ersetzt Ihr bestehendes WordPress-Theme durch ein neues, benutzerdefiniertes Design.

Gehen Sie einfach zu SeedProd » Theme Builder und klicken Sie dann auf die Schaltfläche „Theme Template Kits“.

Dies führt Sie zur Website-Kit-Bibliothek von SeedProd.

Von hier aus können Sie auf den Tab 'WooCommerce' klicken, um alle Vorlagenkits anzuzeigen, die speziell für Online-Shops erstellt wurden.

Sie können mit der Maus über ein beliebiges Vorlagenkit fahren und auf die Lupe klicken, um die Vorschau des Designs anzuzeigen. Wenn Sie ein Vorlagenkit finden, das Ihnen gefällt, klicken Sie einfach auf das Häkchen, um es zu verwenden.

Für dieses Tutorial verwenden wir das WooCommerce Starter Theme, aber Sie können jedes beliebige Template-Kit verwenden.

Sobald Sie ein Template-Kit ausgewählt haben, wird SeedProd es importieren, und Sie sehen eine Liste aller Template-Teile im Theme-Dashboard.

Sie können jeden Teil des Templates anpassen, einschließlich Produktseiten, Shop-Seite, Kassenseite und mehr, mit dem einfachen Drag-and-Drop-Builder von SeedProd. So fügen wir eine WooCommerce-Produktbildergalerie hinzu.

Suchen Sie zuerst den Vorlagenteil, den Sie anpassen möchten. Für dieses Tutorial wählen wir den Teil „Einzelnes Produkt“.

Dies ist die Vorlage, die bestimmt, wie alle Ihre einzelnen WooCommerce-Produktseiten aussehen. Fahren Sie einfach mit der Maus darüber und klicken Sie auf den Link „Design bearbeiten“.

Dies öffnet den visuellen Seitenersteller von SeedProd.

Von hier aus können Sie vorgefertigte Blöcke per Drag & Drop auf Ihre Seite ziehen, auf jedes Element klicken, um es anzupassen, und in Echtzeit eine Vorschau darauf sehen, wie Ihr Design aussieht.

Nehmen Sie alle gewünschten Anpassungen vor und wir fügen die Produktbildergalerie im nächsten Schritt hinzu.

WooCommerce-Produktbildergalerie-Slider in WordPress hinzufügen

Jetzt, da Sie ein benutzerdefiniertes WooCommerce-Theme-Design haben, sind Sie bereit, eine schöne Produktbildergalerie hinzuzufügen.

Klicken Sie dazu auf das WooCommerce-Vorlagen-Tag 'Produktgaleriebilder' im linken Bereich und ziehen Sie es an eine beliebige Stelle in Ihrem Seiten-Vorschaufenster.

Dies zieht Ihre Produktinformationen und Bilder direkt aus WooCommerce.

Als Nächstes können Sie auf den Block klicken, um die Einstellungen für Ihre Produktbildgalerie anzupassen.

Zuerst sehen Sie die Bild-Zoom-Option. Dies ermöglicht es Besuchern, mit der Maus über ein Bild zu fahren, um eine vergrößerte Ansicht eines Produkts zu erhalten.

Sie können die horizontalen Schieberegler ziehen, um die Position des Zoom-Buttons zu steuern. Sie können auch die Schriftgröße, die Symbolfarbe, den Randradius und die Hintergrundfarbe ändern.

Wenn Sie nach unten scrollen, können Sie auch die Ränder von Bildern und Thumbnails anpassen. Sie können den Radius, Stil, die Farbe und die Breite des Rahmens festlegen.

Es gibt auch einen Reiter „Erweitert“, auf den Sie klicken können, um weitere Anpassungsoptionen anzuzeigen.

Dazu gehören Abstände, CSS-ID und -Klasse, Sichtbarkeit auf Geräten, Animationseffekte und mehr.

Wenn Sie mit der Anpassung Ihrer Produktbildgalerie fertig sind, vergessen Sie nicht, auf die Schaltfläche 'Speichern' zu klicken.

Veröffentlichung Ihrer WooCommerce-Produktbildergalerie

Schließlich müssen Sie Ihre Produktbildergalerie auf Ihrer Website live schalten. Gehen Sie dazu aus dem visuellen Builder heraus und zurück zum 'Theme Builder'-Dashboard.

Schalten Sie dann einfach den Schalter 'SeedProd Theme aktivieren' auf die Position 'Ja'.

Das war's!

Sie können Ihre Website besuchen und Ihre WooCommerce-Produktbildgalerie live in Aktion sehen.

Nun können Ihre Besucher die Produktbilder in Ihrer Galerie wie eine Diashow durchklicken und auf Produktdetails zoomen.

Methode 2: Erstellen von WooCommerce-Produktgalerien mit Envira Gallery

Während die erste Methode Ihnen hilft, die Galerie auf Ihrer tatsächlichen Produktseite anzupassen, ist diese Methode für Fälle gedacht, in denen Sie eine Galerie mit mehreren Produkten erstellen möchten, die in Beiträgen, Seiten oder Seitenleisten angezeigt werden soll.

Envira Gallery ist das beste WordPress-Fotogalerie-Plugin und erleichtert die Anzeige von Produkten überall auf Ihrer Website.

Wir haben es auf unserer Website ausgiebig getestet und beeindruckende Ergebnisse erzielt. Es ist eine schnelle Möglichkeit, eine WooCommerce-Produktgalerie in WordPress zu erstellen.

Weitere Details finden Sie in unserem umfassenden Testbericht über Envira Gallery, um alle Funktionen und Möglichkeiten zu erkunden.

Das erste, was Sie tun müssen, ist, das Envira Gallery-Plugin zu installieren und zu aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung müssen Sie zur Seite Envira Gallery » Einstellungen gehen, um Ihren Lizenzschlüssel einzugeben. Diese Informationen finden Sie in Ihrem Konto auf der Website von Envira Gallery.

Herunterladen des WooCommerce Products Addons

Sobald der Lizenzschlüssel verifiziert ist, können Sie zu Envira Gallery » Addons gehen, um das 'Featured Content'-Addon zu installieren und zu aktivieren.

Dieses Addon ermöglicht es Ihnen, Ihre WooCommerce-Produkte in den Envira-Galerien anzuzeigen. Klicken Sie auf die Schaltfläche 'Installieren' unter dem Featured Content Addon.

Erstellen einer neuen Produktgalerie

Als Nächstes müssen Sie zur Seite Envira Gallery » Neu hinzufügen gehen, um Ihre neue Produktgalerie zu erstellen.

Von hier aus können Sie mit dem Hinzufügen eines Titels für die neue Galerie beginnen.

Nach dem Titel müssen Sie zum Tab „Externe Galerie“ wechseln und auf die Option „Hervorgehobene Inhalte“ klicken.

Scrollen Sie als Nächstes zum Tab „Bilder“. Im Feld „Wählen Sie Ihren Beitragstyp(en)“ müssen Sie die Option „Produkt“ auswählen.

Dies weist Envira an, automatisch das Beitragsbild aus Ihren WooCommerce-Produkten zu ziehen, um die Galerie zu erstellen.

Wenn Sie Hunderte von Produkten haben, möchten Sie vielleicht mehrere Galerien erstellen.

Sie können die Galerie-Listings eingrenzen, indem Sie Taxonomie-Begriffe für bestimmte Produkt- Tags oder Kategorien auswählen.

Wiederholen Sie diesen Vorgang einfach mit verschiedenen Produkt-Tags und Kategorien jedes Mal, wenn Sie eine neue Produktgalerie erstellen. Der Beitragstyp wird bei all Ihren WooCommerce-Produktgalerien immer „Produkt“ sein.

Sie können auch einen Taxonomiebegriffsbezug wählen, um bestimmte Produkte in Ihren Galerien auszuwählen und anzuzeigen.

Weitere Details finden Sie in unserem Leitfaden zum Thema Erstellen einer Bildergalerie in WordPress.

Sobald Sie fertig sind, können Sie Ihre Produktgalerie veröffentlichen, wodurch sie überall auf Ihrer WordPress-Website hinzugefügt werden kann.

WooCommerce-Produktgalerie in WordPress hinzufügen

Als Nächstes können Sie einen neuen Beitrag oder eine neue Seite hinzufügen oder einen vorhandenen bearbeiten, um Ihre WooCommerce-Produktgalerie anzuzeigen.

Sobald Sie sich im Inhaltseditor befinden, klicken Sie einfach auf die Schaltfläche „+“ und fügen Sie den Envira Gallery-Block hinzu.

Danach können Sie Ihre Produktbildergalerie im Envira Gallery-Block auswählen.

Klicken Sie einfach auf das Dropdown-Menü und wählen Sie die zuvor erstellte Galerie aus.

Sie sehen nun eine Vorschau Ihrer Galerie im Block-Editor. Wenn sie nicht geladen wird, machen Sie sich keine Sorgen. Sie können Ihren Blogbeitrag oder Ihre Seite einfach in der Vorschau anzeigen, um zu sehen, ob sie ordnungsgemäß funktioniert.

Als Nächstes können Sie Ihren Beitrag speichern und veröffentlichen. Besuchen Sie danach Ihre Website, um die Produktgalerie in Aktion zu sehen.

Häufig gestellte Fragen zu WooCommerce-Produktgalerien

Hier sind einige häufig gestellte Fragen zur Erstellung von Produktgalerien in WooCommerce.

Kann ich Videos zur WooCommerce-Produktbildgalerie hinzufügen?

Ja, Sie können Ihre WooCommerce-Produktbildergalerie verbessern, indem Sie Videos einfügen. Videos bieten eine dynamische Möglichkeit, Ihre Produkte zu präsentieren und potenziellen Kunden eine detaillierte Ansicht zu bieten.

Um zu beginnen, sehen Sie sich unser Tutorial zum Thema Hinzufügen von Produktvideos zu Ihren WooCommerce-Galerien an.

Wie kann ich Galeriebilder für schnellere Ladezeiten optimieren?

Die Optimierung Ihrer Galeriebilder ist wichtig, um die Ladezeiten von Seiten zu verbessern und die Benutzererfahrung zu steigern.

Wir empfehlen, mit der Komprimierung von Bildern zu beginnen, indem Sie Tools wie EWWW Image Optimizer verwenden, die die Dateigröße erheblich reduzieren können, ohne die Qualität zu beeinträchtigen.

Zusätzlich sollten Sie die Verwendung eines Content Delivery Network (CDN) in Betracht ziehen, um Bilder schnell an Benutzer zu verteilen, unabhängig davon, wo sie sich befinden.

Verwenden Sie schließlich Lazy Loading, um sicherzustellen, dass Bilder nur geladen werden, wenn Benutzer nach unten auf der Seite scrollen.

Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zum Thema Optimieren von Bildern für Web-Performance ohne Qualitätsverlust.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie eine WooCommerce-Produktbildergalerie erstellen. Möglicherweise möchten Sie auch unseren Leitfaden zum Thema Upselling von Produkten in WooCommerce und unsere Expertenauswahl der besten WooCommerce-Plugins für Ihren Shop sehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.