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:
- Öffnen Sie das Theme Ihres WooCommerce-Shops.
- Suchen Sie die Datei
style.css. - 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.
