So ändern Sie die Miniaturansichtsgröße der WooCommerce-Galerie

Als Online-Shop-Betreiber sind optisch ansprechende Bilder Ihrer Produkte von entscheidender Bedeutung, um potenzielle Kunden anzulocken. WooCommerce, die beliebte E-Commerce-Plattform, bietet eine integrierte Bildergalerie-Funktion zur Präsentation Ihrer Produktbilder. Allerdings passt die Standardgröße der Galerie-Miniaturansichten möglicherweise nicht immer zum Design und Layout Ihrer Website. In diesem Artikel zeigen wir Ihnen, wie Sie die Miniaturbildgröße Ihrer WooCommerce-Galerie ändern, damit sie besser zu Ihrer Website passt.

Schritt 1: Zugriff auf die Datei „Functions.php“ Ihres Themes

Um die Miniaturansichtsgröße Ihrer WooCommerce-Galerie zu ändern, müssen Sie zunächst auf die Datei „functions.php“ Ihres Themes zugreifen. Sie können dies tun, indem Sie sich bei Ihrem WordPress-Dashboard anmelden und zu „Darstellung“ > „Theme-Editor“ navigieren. Wählen Sie die Datei „functions.php“ aus der Liste auf der rechten Seite des Bildschirms aus.

Schritt 2: Hinzufügen einer neuen Bildgröße

Um eine neue Bildgröße für die Miniaturansicht Ihrer WooCommerce-Galerie hinzuzufügen, können Sie die Funktion add_image_size() in der Datei „functions.php“ Ihres Themes verwenden. Hier ist ein Beispiel-Codeausschnitt zum Hinzufügen einer neuen Miniaturbildgröße:

add_image_size( 'woocommerce-thumbnail-new', 200, 200, true );

In diesem Beispiel haben wir die neue Bildgröße „woocommerce-thumbnail-new“ genannt und die Abmessungen auf 200 x 200 Pixel festgelegt. Der letzte Parameter „true“ bedeutet, dass das Bild genau auf die Abmessungen zugeschnitten wird.

Schritt 3: Miniaturansichten neu generieren

Nachdem Sie die neue Bildgröße hinzugefügt haben, müssen Sie die Miniaturansichten Ihrer Bilder neu generieren, damit sie an die neuen Abmessungen angepasst werden. Sie können dazu ein Plugin wie Regenerate Thumbnails oder Thumbnail Regeneration verwenden.

Schritt 4: Aktualisieren Sie das CSS Ihres Themes

Nachdem Sie die Miniaturansichten Ihrer Bilder neu generiert haben, müssen Sie das CSS Ihres Themes aktualisieren, um die neue Miniaturansichtsgröße richtig anzuzeigen. Sie können dies tun, indem Sie den folgenden CSS-Code zur style.css-Datei Ihres Themes hinzufügen:

.woocommerce div.product div.images .woocommerce-product-gallery__image img {
Breite: 200px!wichtig;
Höhe: 200px!wichtig;
}

In diesem Beispiel haben wir die Breite und Höhe so eingestellt, dass sie der neuen Bildgröße entsprechen, die wir zuvor erstellt haben. Die „wichtige“ Deklaration stellt sicher, dass die CSS-Eigenschaften auch dann angewendet werden, wenn andere Stylesheet-Regeln mit ihnen in Konflikt stehen.

Schritt 5: Testen Sie Ihre neue Miniaturbildgröße

Abschließend können Sie die neue Miniaturbildgröße testen, indem Sie zu einer Ihrer Produktseiten mit mehreren Bildern navigieren und prüfen, ob die Miniaturbilder jetzt in der richtigen Größe angezeigt werden.

Zusammenfassung

Das Ändern der Miniaturansichtsgröße Ihrer WooCommerce-Galerie kann einen großen Unterschied darin machen, wie Ihre Produktbilder auf Ihrer Website angezeigt werden. Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie ganz einfach eine neue Bildgröße für Ihre Miniaturansichten erstellen, Ihre Miniaturansichten neu generieren, das CSS Ihres Themes aktualisieren und Ihre neue Miniaturansichtsgröße testen. Mit ein wenig CSS-Kenntnissen und einigen einfachen Codeänderungen sind Sie auf dem besten Weg, Ihre Produkte bestmöglich zu präsentieren.