<< powrót
Opublikowano 8 komentarzy

Nieostre miniatury produktów w WooCoomerce

Nieostre miniatury produktu w WooCommerce

Czy w Twoim sklepie internetowym miniatury produktów są niewyraźne i rozmyte? Dzieje się tak nawet gdy wgrywasz dobrej jakości zdjęcia? Jeśli tak, to zapraszam do poradnika, w którym pokazuję, jak można poprawić nieostre miniatury produktów w WooCommerce.

Dlaczego zdjęcia są rozmyte

Jeśli podczas robienia zdjęcia poruszysz aparatem, lekkie drgania sprawią, że zdjęcie będzie rozmyte. Chyba że Twój aparat posiada funkcję stabilizacji obrazu. Oczywiście można to naprawić przy użyciu programu do obróbki graficznej, jednak proces ten jest czasochłonny i nie zawsze się opłaca. Prawie zawsze lepiej jest wykonać nowe zdjęcie.

Kolejną przyczyną jest sprzęt, którym wykonujesz zdjęcia. Stare aparaty, czy smartfony z gorszej jakości obiektywem mogą się nie nadawać do robienia zdjęć produktom. Wysokiej jakości zdjęcia mogą przyczynić się do wzrostu sprzedaży w Twoim sklepie, dlatego warto zainwestować w lepszy sprzęt.

Jednak co zrobić w przypadku gdy, pomimo że wgrywasz wysokiej rozdzielczości zdjęcia, to miniatury produktów i tak są niewyraźne i rozmyte i wyglądają jak na poniższym obrazku?

W takim przypadku problem leży w ustawieniach wielkości miniatur w WooCommerce. W celu optymalizacji szybkości strony domyślnie są wczytywane różne rozmiary zdjęć w zależności od tego, gdzie występują. Na stronie z pojedynczym produktem wyświetlane są wyższej jakości zdjęcia. Natomiast w katalogu z produktami wyświetlane są miniatury o mniejszej rozdzielczości. Dzięki takiemu ustawieniu podstrona z produktami szybciej się wczytuje. Jest to bardzo ważny aspekt, zwłaszcza w przypadku sklepów internetowych. Nie warto testować cierpliwości klienta, ponieważ w przypadku długiego wczytywania się strony, najprawdopodobniej opuści Twój sklep i skorzysta z oferty konkurencji.

Tak więc jest to korzystne ustawienie z punktu widzenia optymalizacji szybkości strony. Problem pojawia się wtedy, gdy obrazki w motywie mają większe wymiary niż miniatury. Przykładowo obrazki w katalogu mają wymiary 600 x 600px. Natomiast miniatury mają wymiary 450 x 450px. W takim przypadku otrzymasz rozmazane miniatury, ponieważ Twój motyw próbuje powiększyć zdjęcia o wielkości 450px do 600px.

Zmiana ustawień wielkości miniatur produktów nie jest trudna. Poniżej pokazuję, jak można tego dokonać.

Sposób 1 – zmień ustawienia w WooCommerce

Sposób ten niestety zadziała tylko w wybranych motywach, gdzie wymiary miniatur produktów nie są ustawione „na sztywno” i można zmieniać je z poziomu panelu WooCommerce.

Wybierz: Wygląd -> Dostosuj

Nieostre miniatury produktów w WooCoomerce

Następnie z menu po lewej stronie wybierz WooCommerce -> Obrazki produktu. W polu „szerokość miniaturki” można zmienić wymiary obrazka. Po zapisaniu ustawień zmiany będą od razu widoczne na stronie.

Jeśli Twój motyw nie ma opcji zmiany rozmiarów miniatur z poziomu WooCoomerce, przejdź do kolejnego punktu.

Sposób 2 – dla motywów bez możliwości wyboru wymiarów z poziomu panelu

Brak możliwości wyboru wymiarów miniatur oznacza, że są one ustawione w motywie „na sztywno”. W takim przypadku należy dodać filtr do pliku functions.php. Plik ten znajdziesz w folderze ze swoim motywem (wp-content->themes->Twój motyw->functions.php).

Dodaj poniższy kod do pliku functions.php. W miejsce 'width’ i 'height’ dodaj wymiary, kolejno szerokość i wysokość podaną w pikselach. UWAGA: wpisz wartości bez px tak jak poniżej:

add_filter( 'woocommerce_get_image_size_thumbnail', function( $size ) {
	return array(
	'width' => 600, //szerokość miniatury w px
	'height' => 600, //wysokość miniatury w px
	'crop' => 0,
	);
	} );

Niestety po dodaniu kodu zmiany nie będą jeszcze widoczne, ponieważ należy odświeżyć miniatury. W tym celu użyj wtyczki Odnawianie miniaturek.

Odnawianie miniaturek w WooCommerce

Po zainstalowaniu wtyczki przejdź do jej ustawień: Narzędzia -> Regenerate Thumbnails. Do wyboru są dwie opcje:

  • Regenerate Thumbnails For All x Attachments -> Odśwież miniatury dla wszystkich załączników (obrazków)
  • Regenerate Thumbnails For The x Featured Images Only -> Odśwież miniatury tylko dla obrazków wyróżniających
Odnawianie miniaturek w WooCommerce

Po odświeżeniu miniatur odinstaluj wtyczkę.

Nieostre miniatury produktów w WooCoomerce – podsumowanie

W sklepie internetowym bardzo ważne są unikalne, wyczerpujące opisy przedstawiające produkt z jak najlepszej strony. Jednak równie ważne są ciekawe i przyciągające uwagę zdjęcia. Klient odwiedzający sklep w pierwszej kolejności ogląda zdjęcia. Dopiero potem zapoznaje się z opisem produktu. Bardzo nieprofesjonalnie prezentuje się sklep, w którym zdjęcia produktów są niewyraźne. Tak więc warto zadbać o to, aby w naszym sklepie zdjęcia produktów były wyświetlane w jak najlepszej jakości.

Subskrybuj
Powiadom o
guest
8 komentarzy
najstarszy
najnowszy oceniany
Inline Feedbacks
View all comments
Artur
Artur
3 lat temu

Hej…cały czas korzystam z Twoich porad. Bardzo dziękuję Ci za Twoją pracę. Dzięki niej rozwiązałem wiele problemów.
Pozdrawiam
Artur

Agata
Agata
3 lat temu

Cześć, dzięki za ten wpis, choć nie rozwiązał moich problemów;) Zauważyłam, że jedyne zdjęcia miniaturek, które są ostre w moim sklepie to te, które są w kwadracie (same miniaturki mają kształt kwadratu). Wszystkie zdjęcia, które są prostokątne są rozmyte. Zapewniam, że nie chodzi o jakość zdjęć. Masz może jakiś pomysł na to zjawisko?

Last edited 3 lat temu by Agata
Aleksandra
Aleksandra
2 lat temu

Super, dzięki za wpis . U mnie właśnie był taki problem i tym sposobem go rozwiązałam .

Aga
Aga
5 miesięcy temu

Dziękuję ❤ Wreszcie moje grafiki w woocommerce wyglądają dobrze.