Większość przypadków nieostrych obrazów jest spowodowana stylizacją motywu, co oznacza, że motyw ma wymiary obrazu w pikselach, które mogą nie współgrać z WooCommerce.

Uaktualnienie od WooCommerce 3.3 Wróć na górę

WooCommerce w wersji 3.3 i wyższej posiada wsparcie dla tworzenia motywów kompatybilnych z WooCommerce oraz ulepszenia w renderowaniu i kadrowaniu rozmiaru obrazu. Te nowe funkcje oznaczają, że:

• Nie powinny już występować nieostre obrazy spowodowane przez niekompatybilność motywu lub nadpisanie kodu.
• Właściciele sklepów mogą kontrolować szerokość i wysokość swoich głównych obrazów.
• Zmiana rozmiaru miniatur może być wykonywana automatycznie lub ręcznie.
• Obrazy pokazywane klientom zawsze wyglądają domyślnie świetnie, więc Twoje produkty nadal się sprzedają!

Aby dowiedzieć się, jak korzystać z tych nowych funkcji, przejdź do: Zarządzanie produktami i Dodawanie obrazów i galerii produktów.

Inne rozwiązania Powrót do góry

Jeśli używasz wersji WooCommerce wcześniejszej niż 3.3, zalecamy aktualizację do najnowszej wersji, aby skorzystać z funkcji opisanych powyżej.

Jeśli z jakiegoś powodu nie chcesz używać najnowszej wersji lub aktualizacja do wersji 3.3 nie rozwiązuje problemu, którego doświadczasz, może to być:

• Twoje ustawienia rozmiaru obrazu są zbyt małe.
• Oryginalne obrazy muszą mieć wyższą rozdzielczość.

Aby rozwiązać ten problem:

• Wymiary twoich obrazów powinny być zgodne lub wyższe niż wymiary twojego motywu.
• Oryginalne obrazy, które przesyłasz, powinny mieć co najmniej 800 x 800px lub wyższą rozdzielczość, aby działały w większości motywów.

Pokazujemy, jak znaleźć maksymalny rozmiar obrazu, który chce twój motyw w wideo i poniżej.

Typy obrazów Wróć do góry

• Pojedynczy obraz produktu: Największy obraz na stronie szczegółów pojedynczego produktu i odnosi się do głównego/właściwego obrazu.
• Obrazy katalogowe: Średniej wielkości obraz używany w pętlach produktu, takich jak strona Sklepu, strony kategorii produktów, produkty powiązane, Up-sells i Cross-sells.
• Miniatury produktów: Najmniejszy obraz powszechnie używany w koszyku, widżetach i (opcjonalnie) obrazach galerii pod pojedynczym obrazem produktu.

Standardowe wymiary obrazu Powrót do góry

W WooCommerce w wersji 3.2x i poniżej, ustawienia Obrazu produktu można znaleźć w WooCommerce > Ustawienia > Produkty > Wyświetl > Obrazy produktów. Zauważ, że pierwsza liczba to szerokość, a druga wysokość.

Obrazy, które przesyłasz, są zmieniane w celu dopasowania do wartości, które wprowadzasz. Na przykład, jeśli twoje ustawienia to 100×100 i załadujesz obraz 300×600, zostanie on zmniejszony do 100×200. Możesz również wybrać „twarde kadrowanie” swoich obrazów, które wymusza ich rozmiar określony w ustawieniach, niezależnie od surowego obrazu, który przesyłasz, więc są one przycięte, a nie zniekształcone w skali.

Jeśli zmienisz ustawienia po przesłaniu obrazów produktów, musisz zregenerować miniatury w WordPressie, aby zmiany zostały zastosowane. Aby to zrobić, zalecamy użycie wtyczki Regenerate Thumbnails.

Od wersji WooCommerce 3.3, ustawienia Obrazu produktu można znaleźć pod Customizer, w WooCommerce > Obrazy produktów:

Znajdź wymiary obrazu produktu motywu Powrót do góry

Wybrany motyw deleguje maksymalny rozmiar obrazu, więc musisz znać wymiary, w których je renderuje, aby ustawić te w WooCommerce.

Obrazy katalogów Wróć do góry

Określ, gdzie Twój motyw renderuje miniatury katalogów jako największe. W niektórych przypadkach jest to strona sklepu; w motywie Twenty Eleven, jest to w pętli powiązanych produktów.

Z włączonymi narzędziami deweloperskimi w wybranej przeglądarce, możesz kliknąć prawym przyciskiem myszy na obraz i wybrać „Inspect” lub „Inspect Element”. To pokaże Ci wymiary obrazu. Zanotuj to, ponieważ będziemy musieli użyć ich później.

W Storefront (powyżej), największe obrazy katalogowe są renderowane w 213 x 213px.

Pojedynczy obraz produktu Powrót do góry

Powtórz proces dla pojedynczego obrazu produktu – największego obrazu na stronie produktu.

W Storefront, największy pojedynczy obraz produktu ma rozmiar 298 x 298px.

Product Thumbnail Back to top

Najmniejsza jest prawdopodobnie miniatura w galerii produktu. Powtórz proces inspekcji, aby uzyskać wymiary.

W Storefront, renderuje się na 43 x 43px.

Dostosuj wymiary obrazu i zregeneruj miniatury Wróć do góry

Teraz, gdy wszystkie rozmiary miniatur obrazów dla naszego konkretnego motywu są znane, możemy dodać te nowe wymiary do WooCommerce, aby zapewnić, że przyszłe rozmiary obrazów będą miały ten rozmiar lub większy.

W WooCommerce > Ustawienia > Produkty > Wyświetlanie, upewnij się, że maksymalne rozmiary obrazu są co najmniej tak duże, jak wymiary, które twój motyw renderuje dla tych miniatur. Następnie zapisz zmiany.

Wszystkie nowe obrazy produktów, które zostały przesłane, będą teraz miały miniatury w tych ustawieniach i powinny pojawić się bez zniekształceń lub rozmycia.

Obsługa Retina Wróć do góry

Wyświetlacze HiDPI, powszechnie znane jako wyświetlacze siatkówki, zawierają dwa razy więcej pikseli niż starsze wyświetlacze. Aby uzyskać obraz idealny pod względem pikseli na wyświetlaczach Retina, ustaw miniaturki tak, aby miały podwójny rozmiar renderowany przez motyw. Na przykład, jeśli motyw renderuje obrazy w rozmiarze 80 x 80px, chcesz aby miały one rozmiar 160 x 160px.