Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

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.

So erstellen Sie eine WooCommerce-Produktbildgalerie

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-Produktbildgalerie zu erstellen, ist die Verwendung von SeedProd. Es ist der beste Drag & 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, benutzerdefinierte WordPress-Themes und Landingpages einfach und ohne Code zu erstellen. 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 eine ausführliche Überprüfung von SeedProd, die alle seine Funktionen und Vorteile abdeckt.

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

Hinweis: Es gibt eine kostenlose Version von SeedProd, die Sie ausprobieren können, aber Sie benötigen SeedProd's Elite-Plan, um auf WooCommerce-Blöcke zugreifen zu können.

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

Eingabe des SeedProd-Lizenzschlüssels

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-Vorlagenkit 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“.

Installieren eines WooCommerce-Template-Kits mit SeedProd

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.

Wählen Sie ein WooCommerce-Theme-Kit

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, importiert SeedProd es, und Sie können eine Liste aller Vorlagenteile im Theme-Dashboard sehen.

SeedProd importiert alle Vorlagenteile des Themes

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

Finden Sie zuerst den Vorlagenteil, den Sie anpassen möchten. Für dieses Tutorial wählen wir den Teil 'Einzelbeitrag'. Dies ist die Vorlage, die bestimmt, wie alle Ihre einzelnen Blogbeiträge aussehen.

Fahren Sie einfach mit der Maus darüber und klicken Sie auf den Link „Design bearbeiten“.

Klicken Sie auf den Link "Design bearbeiten", um anzupassen

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.

SeedProd visueller Builder

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, können Sie eine schöne Produktbildergalerie hinzufü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.

Ziehen Sie den Block 'Produktbildergalerie' auf Ihre Seite

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.

Produktbildergalerie-Zoom konfigurieren

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.

Legen Sie den Bildrand für Ihre Produktgalerie fest

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.

Erweiterte Einstellungen für die SeedProd-Produktbildgalerie

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 Produktbildgalerie auf Ihrer Website live schalten. Um dies zu tun, verlassen Sie den visuellen Builder und kehren Sie zum Dashboard des 'Theme Builders' zurück.

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

SeedProd-Theme aktivieren

Das war's!

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

Beispiel für eine SeedProd-Produktbildergalerie für WooCommerce

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

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 zu 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 Sie ein WordPress-Plugin installieren.

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.

Envira-Lizenzschlüssel eingeben

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 nun auf die Schaltfläche „Installieren“ unter dem Featured Content Addon.

Addon für hervorgehobene Inhalte installieren

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.

Fügen Sie einen Titel für Ihre Produktgalerie hinzu

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

Scrollen Sie als Nächstes nach unten zum Tab „Bilder“. Im Feld „Wählen Sie Ihre Beitragstypen aus“ müssen Sie die Option „Produkt“ auswählen, was der benutzerdefinierte Beitragstyp für WooCommerce-Produkte ist.

Produkt als Beitragstyp auswählen

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

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

Produktkategorien 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.

Wählen Sie eine Taxonomie-Term-Beziehung

Weitere Details finden Sie in unserem Leitfaden zur Erstellung 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.

Veröffentlichen Sie Ihre Produktgalerie

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.

Envira-Galerieblock hinzufügen

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.

Wählen Sie Ihre Produktgalerie aus dem Dropdown-Menü

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.

Produktbildgalerie-Vorschau

Häufig gestellte Fragen

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 loszulegen, sehen Sie sich unser Tutorial an unter wie Sie Produktvideos zu Ihren WooCommerce-Galerien hinzufügen können.

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.

Für weitere Informationen möchten Sie vielleicht unseren Leitfaden für Anfänger zum Thema Optimierung von Bildern für Web-Performance ohne Qualitätsverlust lesen.

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

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

1 CommentLeave a Reply

  1. Ich bin wirklich begeistert von diesem Artikel! Sie haben sehr gut beschrieben, wie man einfach Bildergalerien in WooCommerce erstellt, was perfekt für jemanden wie mich ist, der noch lernt, wie man einen Online-Shop betreibt. Glücklicherweise bin ich auf dieser Reise nicht allein :). Die Verwendung von Optin Monster für einen CTA am Ende des Artikels ist eine brillante Idee, besonders da wir Optin Monster (sowie Seed Prod für Landing Pages) nicht nur auf WooCommerce, sondern auch auf unserem Blog und unserer Unternehmenswebsite verwenden. Es hat mein Wissen über E-Commerce auf der Woo-Plattform wieder einmal erweitert.

Hinterlassen Sie eine Antwort

Vielen Dank, dass Sie einen Kommentar hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Führen wir ein persönliches und bedeutungsvolles Gespräch.