< Alle Themen

Bildzoom deaktivieren

WooCommerce hat standardmäßig einen Bildzoom, der immer aktiv wird, wenn man beispielsweise in einer Produktansicht über das Produktbild mit der Maus fährt. Dieser Bildzoom kann unter gewissen Umständen jedoch als störend empfunden werden. Doch wie deaktiviert man diesen Bildzoom?

Manche Themes erlauben eine Aktivierung bzw. eine Deaktivierung des Bildzooms mittels Optionen. Wenn diese Optionen jedoch fehlen, dann muss man auf einige Tricks zurückgreifen, wie z.B. CSS-Anpassungen oder eigener Code in der functions.php

Wir haben einige mögliche Varianten gesammelt, die zur Deaktivierung es Bildzooms beitragen können:

Bildzoom mit CSS deaktivieren

Die folgenden Codes sollten via DesignCustomizerZusätzliches CSS hinterlegt werden und sind (sofern sie bei deinem Theme funktionieren) sofort aktiv.

.woocommerce div.product div.images img {
    pointer-events: none;
    transform: none !important;
}

Falls das nicht hilft, probiere diesen:

.woocommerce div.product div.images img:hover {
    transform: none !important;
    cursor: default !important;
}

Oder diesen:

.woocommerce div.product div.images .woocommerce-product-gallery__wrapper {
    pointer-events: none;
}

Oder:

.woocommerce div.product div.images figure {
    zoom: 1 !important;
    transform: none !important;
}

WooCommerce Bild-Zoom über die functions.php deaktivieren

WooCommerce hat von Haus aus den Zoom-Effekt für Produktbilder aktiviert. Du kannst ihn mit folgendem Code deaktivieren:

Code in die functions.php einfügen:

  • Gehe zu DesignTheme-Datei-Editor
  • Wähle rechts die Datei functions.php deines Child-Themes aus
  • Füge diesen Code am Ende ein:
function disable_woocommerce_zoom() {
    remove_theme_support( 'wc-product-gallery-zoom' );
}
add_action( 'after_setup_theme', 'disable_woocommerce_zoom' );

Inhaltsverzeichnis