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 Design → Customizer → Zusä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 Design → Theme-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' );