Domyślna ikona lupy (zoomu) w WooCommerce może nie zawsze pasować do wyglądu Twojego sklepu lub identyfikacji wizualnej marki. Na szczęście, WooCommerce oferuje kilka sposobów na jej dostosowanie – od prostych zmian w CSS, przez wstawienie własnej grafiki, aż po użycie wtyczek.
Poniżej znajdziesz sprawdzone metody, dzięki którym zmienisz ikonę powiększenia według własnych potrzeb.
1️⃣ Zmiana ikony lupy za pomocą własnego CSS
Najprostszy i najszybszy sposób to zmodyfikowanie wyglądu ikony przez nadpisanie jej stylu CSS.
🔧 Jak to zrobić:
-
Wejdź w WordPress > Wygląd > Dostosuj > Dodatkowy CSS.
-
Wklej poniższy kod CSS:
✅ Wskazówka: Możesz podać inny unicode lub zmienić ikonę na dowolną z Font Awesome.
2️⃣ Podmiana ikony lupy na własną grafikę
Jeśli chcesz wstawić ikonę jako obrazek (np. własne logo lupy), użyj tła CSS.
🔧 Instrukcja:
-
Wgraj grafikę ikony lupy do biblioteki mediów.
-
Skopiuj adres URL obrazka.
-
Przejdź do Wygląd > Dostosuj > Dodatkowy CSS i wklej:
🔄 Dostosuj: Wysokość, szerokość i URL obrazka do własnych potrzeb.
3️⃣ Edycja plików szablonu WooCommerce
Dla bardziej zaawansowanych użytkowników – możesz zmodyfikować plik szablonu odpowiedzialny za galerię produktu.
📁 Kroki:
-
Zlokalizuj plik:
wp-content/plugins/woocommerce/templates/single-product/product-image.php
-
Skopiuj go do motywu potomnego:
your-theme/woocommerce/single-product/product-image.php
-
Edytuj kod HTML odpowiedzialny za ikonę:
Zamień:
na:
🔐 Dzięki umieszczeniu pliku w motywie potomnym – Twoje zmiany nie zostaną nadpisane przy aktualizacji WooCommerce.
4️⃣ Wtyczki umożliwiające zmianę ikony powiększenia
Jeśli nie chcesz edytować kodu, możesz skorzystać z gotowych wtyczek dających możliwość personalizacji lupy i efektu zoomu.
🧩 Polecane wtyczki:
-
WooThumbs for WooCommerce – rozbudowane opcje galerii i zoomu, z możliwością edycji ikon.
-
YITH WooCommerce Zoom Magnifier – prosty w obsłudze plugin do zarządzania lupą oraz efektem przybliżania zdjęć.
✅ Jak zainstalować:
-
Przejdź do Wtyczki > Dodaj nową.
-
Wyszukaj nazwę wtyczki.
-
Zainstaluj i aktywuj.
-
Skonfiguruj w ustawieniach WooCommerce lub zakładce wtyczki.
✅ Podsumowanie
Zmiana domyślnej ikony lupy w WooCommerce to prosty sposób na dopracowanie wyglądu Twojego sklepu. Możesz to zrobić na kilka sposobów:
Metoda | Poziom trudności | Kod wymagany? | Dla kogo? |
---|---|---|---|
Custom CSS | Łatwy | Tak | Dla osób z podstawową wiedzą |
Obrazek jako tło | Średni | Tak | Dla estetów i projektantów |
Edycja pliku product-image.php |
Zaawansowany | Tak | Dla deweloperów |
Wtyczki | Bardzo łatwy | Nie | Dla użytkowników bez kodowania |
Wybierz metodę odpowiednią dla siebie i spraw, by wygląd Twojego sklepu był jeszcze bardziej spójny z identyfikacją Twojej marki.