WooCommerce: Klick auf das Bild deaktivieren mit CSS

In WooCommerce können Sie den Klick auf das Bild in der Produktansicht deaktivieren, indem Sie eine CSS-Regel hinzufügen. Dies kann zum Beispiel sinnvoll sein, wenn Sie ein anderes Element, wie z. B. eine Schaltfläche, verwenden möchten, um das Bild zu öffnen.

So deaktivieren Sie den Klick auf das Bild:

1. Öffnen Sie das Theme Ihres WooCommerce-Shops.
2. Suchen Sie die Datei style.css.
3. Fügen Sie die folgende CSS-Regel hinzu:

CSS.woocommerce .product .thumbnail img { cursor: default; }

Diese Regel setzt den Cursor auf “default”, was bedeutet, dass er nicht in Form einer Hand erscheint, wenn der Benutzer auf das Bild klickt.

Alternativ können Sie auch folgende CSS-Regel verwenden:

CSS.woocommerce .product .thumbnail img { pointer-events: none; }

Diese Regel verhindert, dass das Bild überhaupt auf Klick reagiert.

Testen Sie die Änderungen:

Speichern Sie die Datei style.css und laden Sie Ihre Website neu. Wenn Sie die Änderungen richtig vorgenommen haben, sollte der Klick auf das Bild in der Produktansicht deaktiviert sein.

Weitere Möglichkeiten:

Wenn Sie möchten, dass das Bild beim Klick eine andere Aktion ausführt, können Sie eine JavaScript-Funktion verwenden. Dazu müssen Sie die folgende CSS-Regel hinzufügen:

CSS.woocommerce .product .thumbnail img { cursor: pointer; }

Dann können Sie die folgende JavaScript-Funktion in Ihrem Theme hinzufügen:

JavaScript$(document).ready(function() { $('.woocommerce .product .thumbnail img').click(function() { // Führen Sie hier Ihre Aktion aus. }); });

In dieser Funktion können Sie z. B. das Bild in einem Lightbox-Fenster öffnen oder eine andere Aktion ausführen.

Jessy James

Jessy James ist WordPress Experte und Mitbegründer von WordPress Soforthilfe. WP Soforthilfe ist für viele WordPress-Benutzer die erste Anlaufstelle für technische Fragen und WordPress-Soforthilfe.