So beheben Sie Probleme mit der WooCommerce-Bildgröße

Haben Sie Probleme mit den Bildgrößen in Ihrem Online-Shop? Sie sind an der richtigen Stelle. In diesem Leitfaden zeigen wir Ihnen verschiedene Möglichkeiten, die häufigsten Probleme mit der Bildgröße von WooCommerce zu beheben .

WooCommerce ist eine der besten E-Commerce-Plattformen, aber hin und wieder kann es zu Problemen kommen. Wir haben bereits gesehen, wie man die häufigsten Probleme an der Kasse behebt und was zu tun ist, wenn die Schaltfläche „In den Warenkorb“ nicht funktioniert. In diesem Tutorial zeigen wir Ihnen verschiedene Lösungen zur Behebung von Problemen mit der Bildgröße.

Diese Probleme können aus verschiedenen Gründen auftreten, wie z. B. Theme- oder Plugin-Inkompatibilität, falsche Bildgrößen, fehlende Bildfelder und so weiter. Bevor wir sehen, wie die verschiedenen Probleme mit der Bildgröße gelöst werden können, werfen wir einen Blick auf die verschiedenen Arten von Bildern in WooCommerce.

Arten von Bildern in WooCommerce

Es gibt viele Arten von Bildern, die Sie zu Ihrer Website hinzufügen können, aber die wichtigsten 3 Arten, die in WooCommerce verwendet werden, sind Produkt-, Katalog- und Produkt-Miniaturbilder.

• Einzelproduktbilder: Einzelproduktbilder sind großformatige Bilder , die verwendet werden, um ein einzelnes Produkt anzuzeigen. Dies ist das Hauptbild des Produkts, das Sie Kunden zeigen, wenn sie die jeweilige WooCommerce-Produktseite öffnen. Sie können mehr als ein Produktbild hinzufügen, um das Produkt aus verschiedenen Blickwinkeln zu zeigen.
• Katalogbilder: Dies sind mittelgroße Bilder von Produkten, die typischerweise auf der WooCommerce-Shopseite verwendet werden. Wenn Sie in Ihrem Online-Shop eine separate Kategorieseite haben, sind diese Katalogbilder auch auf den Produktkategorien oder den Produkten selbst zu sehen.
• Produkt-Miniaturbilder: Dies sind Miniaturbilder , die sehr klein sind. Sie werden zur Identifizierung der Produkte auf verschiedenen WooCommerce-Seiten wie Warenkorbseiten, Widget-Bereichen oder auch auf den Bestellseiten angezeigt.

Häufige Probleme mit WooCommerce-Bildgrößen

Jetzt haben Sie ein besseres Verständnis für die verschiedenen Arten von WooCommerce-Bildern und den Unterschied in ihren Größen. Bilder sind äußerst wichtig, um Besucher in Kunden umzuwandeln, daher können Probleme mit Ihren Bildern große Kopfschmerzen bereiten.

Um Probleme mit der WooCommerce-Bildgröße beheben zu können, müssen Sie zuerst Ihr Problem identifizieren . Der knifflige Teil ist, dass es mehrere Probleme gibt, mit denen Sie in Bezug auf die Bildgröße konfrontiert sein können. Einige der häufigsten sind:

1. Verschwommene Bilder

Dies ist eines der häufigsten Probleme. Die Bilder, die Sie für Ihre Produkte oder Miniaturansichten hochladen, erscheinen verschwommen und sind möglicherweise nicht deutlich sichtbar , selbst wenn das Originalbild nicht komprimiert, deutlich sichtbar und von hervorragender Qualität war.

Verschwommene Bilder sehen nicht nur schlecht aus, sondern erwecken auch den Eindruck, dass Ihre Website nicht professionell ist.

Original Bild

Verschwommenes Bild

2. Bild von geringer Qualität

Ähnlich wie bei verschwommenen Bildern können einige Bilder auf Ihrer Website nach dem Hochladen von geringerer Qualität sein. Sie können verpixelt erscheinen oder nicht so glatte Linien wie die Originale haben.

Dies kann auch dann passieren, wenn das hochgeladene Bild eine hervorragende Qualität hat. Wir werden im nächsten Abschnitt sehen, warum und wie es behoben werden kann.

3. Falsche Bildgrößen

Manchmal stellen Sie möglicherweise auch fest, dass die hochgeladenen Bilder andere Größen als die Originalbilder haben. Dies ist ein sehr häufiges Problem, wenn Sie Ihre Bildeinstellungen nicht gemäß den Designanforderungen anpassen .

Nehmen wir zum Beispiel an, Ihre Designanforderung für Katalogbilder beträgt mindestens 250 x 250 Pixel, aber die WooCommerce-Bildeinstellungen Ihres Shops sind auf 200 x 200 Pixel eingestellt. Da die Einstellungen nicht gemäß den Designanforderungen konfiguriert sind, wird Ihr Bild möglicherweise automatisch mit der falschen Bildgröße neu angepasst.

4. Zoom-, Lightbox- oder Slider-Probleme

WooCommerce bietet Ihnen Zoom-, Lightbox- und Slider-Optionen, um eine Vorschau Ihrer Bilder anzuzeigen. Dies war eine neue Funktion, die WooCommerce mit der Veröffentlichung von Version 3.0 hinzugefügt wurde . Wenn Ihr Design nicht gemäß seinen Spezifikationen aktualisiert wurde, können einige Probleme auftreten.

5. Bildbreite und Thumbnail-Felder fehlen

Möglicherweise stellen Sie auch fest, dass die Breiten- und Miniaturansichtsfelder Ihrer WooCommerce-Bilder im Customizer unter Aussehen > Anpassen > WooCommerce > Produktbilder fehlen.

Dies kann der Fall sein, wenn Ihr Design sehr strenge Bildgrößen hat, sodass Sie die Bildgrößen des Designs überhaupt nicht über den Administrator ändern können. In diesem Fall benötigen Sie einige programmatische Kenntnisse , die wir in den folgenden Lösungen besprechen werden.

Nachdem wir nun die Arten von Bildern und die häufigsten Probleme besser verstehen, sehen wir uns verschiedene Lösungen an, um Probleme mit der Bildgröße in WooCommerce zu beheben.

So beheben Sie Probleme mit der WooCommerce-Bildgröße

Da Sie mit einigen der häufigsten Probleme mit der Bildgröße von WooCommerce vertraut sind, lassen Sie uns diese ebenfalls beheben. Die Probleme mit der Bildgröße, auf die Sie stoßen, können jedoch verschiedene Gründe haben. Daher gibt es möglicherweise keine spezielle Lösung für sie.

Daher empfehlen wir Ihnen, einige der unten aufgeführten allgemeinen Lösungen für Probleme mit der Bildgröße zu verwenden. Wir sind sicher, dass eine der Lösungen die Probleme mit der WooCommerce-Bildgröße beheben kann.

1. Anfangs-Checkliste, die Sie im Hinterkopf behalten sollten

Bevor wir die spezifischen Lösungen zur Behebung von Problemen mit der Bildgröße durchgehen, gibt es einige Dinge, die Sie beachten müssen. Stellen Sie zunächst sicher, dass Sie WooCommerce richtig eingerichtet haben, ohne Schritte auszulassen. Es können Probleme mit Ihrer Website auftreten, wenn sie nicht korrekt installiert ist.

Zweitens möchten wir Sie daran erinnern, zu überprüfen, ob alles auf Ihrer Website aktualisiert ist . Es kann Probleme in Ihrem Shop geben, wenn Sie Ihr Design oder Ihre Plugins nicht auf die neueste Version aktualisiert haben.

Stellen Sie außerdem sicher, dass Sie WooCommerce auf die neueste verfügbare Version aktualisieren. Um zu erfahren, ob Sie ausstehende Updates haben, gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Installierte Plugins . Wenn Sie aufgefordert werden, WooCommerce zu aktualisieren, klicken Sie auf Jetzt aktualisieren .

Wenn Sie WordPress mit dem Gutenberg-Editor aktualisiert haben, stellen Sie außerdem sicher, dass WordPress auch auf die neueste Version aktualisiert wird . Wenn Sie WordPress hingegen mit dem klassischen Editor verwenden, aktualisieren Sie diesen am besten mit der neuesten Version von WordPress 4.9.

Wenn Sie nach all diesen Schritten weiterhin Probleme mit den Bildgrößen haben, fahren Sie mit der nächsten Lösung fort.

HINWEIS: Wir verwenden das Divi-Design für dieses Tutorial, sodass einige der Seiten möglicherweise anders aussehen als Ihre Website, wenn Sie ein anderes Design verwenden. Sie sollten jedoch jeder einzelnen Lösung problemlos folgen können. Wenn Sie nach einem neuen Thema suchen, das mit WooCommerce kompatibel ist, werfen Sie einen Blick auf diesen Artikel.

2. Legen Sie benutzerdefinierte WooCommerce-Bildgrößen fest

Das Hinzufügen benutzerdefinierter Bildgrößen ist eine der häufigsten Methoden, um die Probleme mit der WooCommerce-Bildgröße zu beheben. Da die meisten Probleme aufgrund der Änderung der Standardbildgrößen auftreten, sollte dies Ihr erster Schritt sein.

Das Einrichten einer benutzerdefinierten Bildgröße ist ganz einfach. Gehen Sie in Ihrem Admin-Dashboard zu Darstellung > Anpassen und öffnen Sie die Registerkarte WooCommerce , um auf den Customizer zuzugreifen.

Öffnen Sie dann die Option Produktbilder . Hier können Sie die Größe der Produktseite und der Miniaturbilder Ihrer Produkte ändern. Um das Hauptbild der Produktseite zu bearbeiten, fügen Sie die gewünschte Bildgröße zum Abschnitt Hauptbildbreite hinzu.

Sie können hier auch die Größe der Miniaturansichten und das Zuschneiden bearbeiten. Wenn Sie die Größe des Miniaturbilds anpassen möchten, bearbeiten Sie die Option „ Breite der Miniaturansicht “.

Darüber hinaus gibt es drei Optionen zum Anpassen des Zuschneidens von Miniaturansichten: 1:1, benutzerdefiniert und unbeschnitten. Um die Bildprobleme sowohl für die Funktionalität als auch für das Erscheinungsbild zu minimieren, ist das 1:1 -Zuschneiden die beste Option. Nachdem Sie alle erforderlichen Änderungen vorgenommen haben, klicken Sie auf Veröffentlichen .

3. Überprüfen Sie die Produktbildabmessungen Ihres Themes

Wenn Sie auch nach dem Hinzufügen der benutzerdefinierten Bildgrößen immer noch Probleme haben, ist die Bildgröße möglicherweise falsch. Wie bereits beim Problem der falschen Bildgröße erwähnt, gibt es in WooCommerce spezifische Designanforderungen für Bildgrößen. Wenn diese Größen die Anforderungen nicht erfüllen, können Probleme auftreten.

Um diese WooCommerce-Bildgrößenprobleme zu beheben, ist es am besten, zuerst die Produktbildgrößen des Themas zu überprüfen. Öffnen Sie die Produktseite eines Ihrer Produkte und verwenden Sie das Inspect-Element-Entwicklertool in Ihrem Webbrowser, um die Bildgröße des Themas anzuzeigen.

Wenn Sie beispielsweise Google Chrome verwenden, klicken Sie mit der rechten Maustaste auf das Produktbild und drücken Sie auf Prüfen . Sie können die Bildgröße im Inspect-Element-Entwicklertool wie unten gezeigt sehen.

In diesem Fall beträgt die Produktbildgröße 900×600 . Wenn die Bildanforderungen Ihres Designs anders sind, können Probleme auftreten.

Sie können die Produktbildgröße im Customizer entsprechend anpassen, indem Sie die in Punkt 2 beschriebene Methode verwenden. Ebenso können Sie die Größe des Miniaturbilds auf die gleiche Weise überprüfen und bei Bedarf im Customizer weiter bearbeiten.

4. Standardbildgrößen ändern

Wenn Sie alle oben genannten Lösungen ausprobiert haben, aber immer noch mit Bildproblemen konfrontiert sind, müssen Sie möglicherweise die standardmäßigen WordPress-Bildgrößen anpassen .

Gehen Sie dazu in Ihrem WordPress-Dashboard zu Einstellungen > Medien und Sie sehen die Größenoptionen für Miniaturansichten, mittlere und große Bilder .

Stellen Sie die Bildgrößen entsprechend den Designanforderungen ein und speichern Sie die Änderungen .

Darüber hinaus können Sie einige der Standardgrößen entfernen, wenn Sie sie nicht verwenden. Um mehr darüber zu erfahren, sieh dir unseren Leitfaden zum Entfernen der WordPress-Standardbildgrößen an.

5. Beheben Sie WooCommerce-Bildgrößenprobleme mit Plugins

Eine weitere Alternative zur Behebung der WooCommerce-Bildgrößenprobleme besteht darin, ein dediziertes Plugin zu verwenden. Es gibt mehrere Tools, die Sie dafür verwenden können. In diesem Abschnitt zeigen wir Ihnen einige, damit Sie weitere Probleme mit der Bildgröße auf Ihrer Website vermeiden können.

Werfen wir einen Blick auf einige der besten Tools, die Sie verwenden sollten.

5.1. Perfekte Bilder und Retina-Unterstützung

Einfach ausgedrückt ist Retina Support eine Anzeigeoption für Bilder auf Ihrer Website mit einer sehr hohen Auflösung und Qualität . Ein Retina-fähiges Display stellt sicher, dass jedes Bild, das auf jedem Gerät mit jeder Bildschirmgröße zu sehen ist, scharf und ohne sichtbare pixelige Linien oder Ränder ist.

Dies ist eine perfekte Lösung, wenn die hochgeladenen Bilder auf Ihrer Website verschwommen oder von geringer Qualität sind. Wenn Sie ein retinafähiges Bild manuell erstellen möchten, müssen Sie die Bildgröße und -abmessungen verdoppeln, optimieren und dann erneut hochladen. Sie können jedoch ein Plugin verwenden, damit Ihre Bilder automatisch retina-fähig sind. Dafür ist Perfect Images eines der besten Plugins da draußen.

Perfect Images ist ein einfaches Plugin zum Hinzufügen von Bildern mit Retina-Display zu Ihrer Website. Es erkennt automatisch alle Bilder mit Netzhautproblemen und erstellt eine retinafähige Kopie davon. Darüber hinaus können Sie einzelne Retina-fähige Bilder erstellen oder dies in großen Mengen tun, um Zeit zu sparen.

Sehen wir uns nun an, wie dieses Plugin verwendet wird.

5.1.1. Installieren und aktivieren Sie das Plugin

Zuerst müssen Sie es installieren und aktivieren. Gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen , suchen Sie nach dem Plugin und klicken Sie auf Jetzt installieren .

Nachdem die Installation abgeschlossen ist, aktivieren Sie das Plugin. Alternativ können Sie es manuell installieren. Wenn Sie sich nicht sicher sind, wie das geht, werfen Sie einen Blick auf unsere Anleitung zur manuellen Installation eines WordPress-Plugins.

5.1.2. Konfigurieren Sie die Bildoptionen für das Retina-Display

Nach der Aktivierung des Plugins müssen Sie die Retina-Optionen für Ihre WooCommerce- oder Website-Bilder konfigurieren. Gehen Sie zu Meow Apps > Perfekte Bilder und Sie sehen alle Optionen für Ihre Retina-Bilder auf der Registerkarte Allgemein . Die Standardoptionen sind für die meisten Websites in Ordnung, da sie Retina-Bilder für die gängigsten Bildgrößen erstellen.

Nachdem die Bilder jedoch in retinafähige Bilder konvertiert wurden, müssen sie möglicherweise optimiert werden. Retina-fähige Bilder sind in der Regel sehr groß und können Ihre Website verlangsamen. Dies kann Ihre Kunden stark abschrecken, da die meisten Benutzer Mobilgeräte für Online-Einkäufe verwenden.

Um sicherzustellen, dass die Retina-Bilder die Geschwindigkeit Ihrer Website nicht beeinträchtigen, müssen Sie sicherstellen, dass sie gut optimiert sind. Sie können dies über das Plugin tun, indem Sie zur Registerkarte Optimierung und Geschwindigkeit gehen. Denken Sie daran, dass Sie dafür ihren Premium-Plan abonnieren müssen, der Easy IO zur Optimierung beinhaltet und 10 USD pro Monat kostet.

Alternativ können Sie sie auch manuell mit einem Bildoptimierungs-Plugin oder -Dienst wie TinyPNG oder Smush optimieren.

5.1.3. Konvertieren Sie Bilder für die Retina-Unterstützung

Nachdem Sie alle notwendigen Optionen für Ihre Retina-Bilder konfiguriert haben, können Sie mit der Konvertierung beginnen. Gehen Sie zuerst zu Medien > Perfekte Bilder und Sie werden zur Registerkarte Retina-Probleme weitergeleitet. Hier können Sie retinafähige Bilder erstellen, um die Probleme mit der WooCommerce-Bildgröße zu beheben.

Sie können auch Miniaturansichten und Retina-Bilder erstellen, indem Sie die gewünschten Bilder auswählen.

5.2. Miniaturbild neu erstellen

Das Regenerieren von Thumbnails ist auch eine ausgezeichnete Möglichkeit, Probleme mit Bildgrößen zu lösen, insbesondere mit Thumbnail-Bildern .

Diese Probleme treten normalerweise auf, wenn Sie Ihr Design kürzlich geändert haben. Das neue Design hat möglicherweise andere Designanforderungen für Bildgrößen, daher müssen Sie sie neu anpassen.

Wenn Sie eine große Anzahl von Miniaturansichten auf Ihrer Website haben, können Sie Perfect Images verwenden. Alles, was Sie tun müssen, ist, die Bildgrößenoptionen so zu konfigurieren, wie wir es in den Schritten 5.1.1 und 5.1.2 getan haben. Gehen Sie dann zu Medien > Perfekte Bilder , öffnen Sie die Registerkarte Alle und Sie sehen alle Bilder auf Ihrer Website. Ähnlich wie beim Retina-Support-Schritt können Sie Miniaturansichten für bestimmte Bilder oder in großen Mengen regenerieren.

Um Bilder in großen Mengen neu zu generieren, drücken Sie Massenaktionen und wählen Sie Alle Einträge neu generieren, um Miniaturansichten neu zu generieren. Beachten Sie, dass dies einige Minuten dauern kann, wenn Sie viele Bilder auf Ihrer Website haben.

6. Programmatische Lösung

Wenn Sie so weit gekommen sind, haben Sie versucht, die Probleme mit der Bildgröße mit den standardmäßigen WooCommerce-Optionen und sogar mit Plugins zu beheben. Wenn nichts funktioniert hat und Sie immer noch Probleme haben, können Sie noch etwas tun. Um diese Lösung zu verwenden, empfehlen wir Ihnen grundlegende Programmierkenntnisse, da wir ein wenig Code verwenden werden.

Es gibt einige Code-Snippets, die Sie verwenden können, um Bildprobleme zu beheben, aber denken Sie daran, dass das von uns verwendete Snippet die Bildgrößen auf Ihrer Website ändert. Dies kann nützlich sein, wenn die Hauptbildbreiten und Thumbnail-Felder in Ihrem Theme Customizer fehlen und Sie benutzerdefinierte WooCommerce-Bildgrößen festlegen möchten.

Da wir einige Kerndateien bearbeiten, bevor wir beginnen, empfehlen wir Ihnen, Ihre WordPress-Website zu sichern. Darüber hinaus ist es eine gute Praxis, ein untergeordnetes Thema zu erstellen oder eines dieser untergeordneten WordPress-Theme-Plugins zu verwenden.

Ändern Sie die Bildgröße mit Code-Snippets

Um die Bildgrößen zu ändern, wenn die Bildbreite und die Thumbnail-Breite im Customizer fehlen, können Sie das folgende Code-Snippet verwenden. Gehen Sie zu Appearance > Theme Editor und öffnen Sie die Datei functions.php .

Fügen Sie dann einfach das folgende Code-Snippet unten im Editor hinzu.

 add_theme_support( 'woocommerce', apply_filters( 'divi_woocommerce_args', array(
   'einzelbild_breite' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => Array(
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

Dieses Snippet ändert die Produktbildbreite auf 600 und die Thumbnail-Breite auf 300, was die Standardparameter sind. Passen Sie diese Werte Ihren Anforderungen entsprechend an und vergessen Sie nicht, die Datei zu aktualisieren.

7. Support-Optionen

Wenn Sie jede hier erwähnte Lösung ausprobiert haben, aber keine Lösung für die Probleme mit der Bildgröße finden konnten, ist das Problem, mit dem Sie konfrontiert sind, entweder selten oder es gibt ein Problem mit den Kerndateien von WooCommerce oder Ihrem Design.

An dieser Stelle wenden Sie sich am besten an den Kundendienst. WooCommerce verfügt über hervorragende Support-Optionen, sodass Sie sie bezüglich Ihrer Probleme mit der Bildgröße kontaktieren können. Wenn Sie der Meinung sind, dass Ihr Design das Problem sein könnte, können Sie sich alternativ an Ihren Designanbieter wenden und ihn um Hilfe bitten.

Fazit

Alles in allem gibt es verschiedene Bildtypen (einzelne Produkt-, Katalog- und Produkt-Thumbnails) und mehrere häufige Probleme mit Bildgrößen. Die häufigsten sind verschwommen oder Bilder von geringer Qualität, falsche Bildgrößen, Zoom-, Lightbox- und Schieberegleroptionen sowie fehlende Felder für Breite und Miniaturansichten.

In diesem Leitfaden haben wir verschiedene Lösungen gesehen, um die häufigsten Probleme mit der Bildgröße von WooCommerce zu beheben .

1. Aktualisieren Sie Ihr Design und Ihre Plugins auf die neueste Version, einschließlich WooCommerce
2. Legen Sie benutzerdefinierte WooCommerce-Bildgrößen fest
3. Überprüfen Sie die Bildproduktabmessungen Ihres Themas
4. Ändern Sie die Standardbildgrößen
5. Plugins verwenden
6. Programmatische Lösung mit ein bisschen Code
7. Wenden Sie sich an WooCommerce oder das Support-Team Ihres Themes

Wenn dieser Artikel für Sie hilfreich war, teilen Sie ihn in den sozialen Medien und helfen Sie Ihren Freunden, diese Probleme loszuwerden. Sind Sie mit diesen Problemen schon einmal konfrontiert worden? Wie hast du sie gelöst? Lassen Sie es uns in den Kommentaren unten wissen.

Für weitere nützliche Anleitungen finden Sie hier Artikel, die Sie interessant finden könnten:

• So fügen Sie einem Produkt in WooCommerce ein Bild hinzu
• 3 Methoden zum Entfernen von Miniaturansichten in WordPress
• So fügen Sie benutzerdefinierte Bildgrößen in WordPress hinzu