+48 506 130 673 info@tosetec.com

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ć:

  1. Wejdź w WordPress > Wygląd > Dostosuj > Dodatkowy CSS.

  2. Wklej poniższy kod CSS:

.woocommerce-product-gallery__trigger::before {
content: "\f002"; /* Unicode Font Awesome (ikona lupy) */
font-family: "FontAwesome"; /* upewnij się, że masz włączoną tę czcionkę */
font-size: 20px; /* dopasuj wielkość */
color: #ff6600; /* zmień kolor na własny */
}

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:

  1. Wgraj grafikę ikony lupy do biblioteki mediów.

  2. Skopiuj adres URL obrazka.

  3. Przejdź do Wygląd > Dostosuj > Dodatkowy CSS i wklej:

.woocommerce-product-gallery__trigger {
background: url('https://twojastrona.pl/wp-content/uploads/lupa.png') no-repeat center;
background-size: contain;
width: 30px;
height: 30px;
text-indent: -9999px; /* ukrycie domyślnej ikony */
}

🔄 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:

  1. Zlokalizuj plik:
    wp-content/plugins/woocommerce/templates/single-product/product-image.php

  2. Skopiuj go do motywu potomnego:
    your-theme/woocommerce/single-product/product-image.php

  3. Edytuj kod HTML odpowiedzialny za ikonę:

Zamień:

<a href="#" class="woocommerce-product-gallery__trigger">...</a>

na:

<a href="#" class="woocommerce-product-gallery__trigger">
<img src="https://twojastrona.pl/lupa.png" alt="Powiększ">
</a>

🔐 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ć:

  1. Przejdź do Wtyczki > Dodaj nową.

  2. Wyszukaj nazwę wtyczki.

  3. Zainstaluj i aktywuj.

  4. 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.