{"id":104,"date":"2026-04-20T14:55:38","date_gmt":"2026-04-20T12:55:38","guid":{"rendered":"https:\/\/projektwordpress.pl\/index.php\/2026\/04\/20\/motyw-woocommerce-ktory-nie-psuje-zdjec-produktow-i-cls-na-telefonach\/"},"modified":"2026-04-20T14:55:38","modified_gmt":"2026-04-20T12:55:38","slug":"motyw-woocommerce-ktory-nie-psuje-zdjec-produktow-i-cls-na-telefonach","status":"publish","type":"post","link":"https:\/\/projektwordpress.pl\/index.php\/2026\/04\/20\/motyw-woocommerce-ktory-nie-psuje-zdjec-produktow-i-cls-na-telefonach\/","title":{"rendered":"Motyw WooCommerce kt\u00f3ry nie psuje zdj\u0119\u0107 produkt\u00f3w i CLS na telefonach"},"content":{"rendered":"

Zdj\u0119cia produkt\u00f3w na telefonach wygl\u0105daj\u0105 \u015bwietnie w demo, a potem w realnym sklepie wychodzi chaos. Jedne kadry s\u0105 przyci\u0119te, inne za wysokie, siatka skacze, a klient pr\u00f3buje trafi\u0107 w przycisk kt\u00f3ry w\u0142a\u015bnie si\u0119 przesun\u0105\u0142. Najcz\u0119\u015bciej pow\u00f3d jest prozaiczny \u017ale dobrany motyw albo konfiguracja, kt\u00f3ra nie pilnuje proporcji miniatur i nie rezerwuje miejsca na obrazy przed ich za\u0142adowaniem.<\/p>\n

Motyw to nie tylko wygl\u0105d. Wp\u0142ywa na szybko\u015b\u0107, wygod\u0119 edycji, zgodno\u015b\u0107 z wtyczkami, UX i mobilne do\u015bwiadczenie. \u0179le dobrany potrafi zamieni\u0107 prosty sklep w wieczne gaszenie po\u017car\u00f3w i d\u0142ubanie w detalach kt\u00f3re powinny dzia\u0142a\u0107 od r\u0119ki.<\/p>\n

Co naprawd\u0119 psuje zdj\u0119cia produkt\u00f3w na telefonie<\/h2>\n

Nier\u00f3wne proporcje zdj\u0119\u0107 i brak sta\u0142ej wysoko\u015bci kafelk\u00f3w to pierwszy winowajca. Je\u015bli w siatce cz\u0119\u015b\u0107 zdj\u0119\u0107 jest pionowa, cz\u0119\u015b\u0107 pozioma, a motyw nie utrzymuje sta\u0142ych proporcji miniatur, w kategorii tworzy si\u0119 zygzak. Dobry motyw oferuje r\u00f3wne kafelki lub kontrol\u0119 proporcji np. kwadrat, prostok\u0105t pionowy albo wymusza sp\u00f3jny kadr w miniaturach.<\/p>\n

Drugi problem to stare miniatury po zmianie rozmiar\u00f3w. W WooCommerce ustawienia obraz\u00f3w potrafi\u0105 si\u0119 zmieni\u0107, ale biblioteka medi\u00f3w wci\u0105\u017c u\u017cywa dawnych plik\u00f3w. Efekt to rozmyte zdj\u0119cia lub niepotrzebne przyci\u0119cia. Po aktualizacji rozmiar\u00f3w trzeba od\u015bwie\u017cy\u0107 miniatury, aby wszystkie warianty rozdzielczo\u015bci by\u0142y sp\u00f3jne.<\/p>\n

Trzecia rzecz to galerie i efekty kt\u00f3re wyliczaj\u0105 wysoko\u015b\u0107 dopiero po za\u0142adowaniu obraz\u00f3w. Gdy przegl\u0105darka nie zna wymiar\u00f3w wcze\u015bniej, sekcja z produktem ma pocz\u0105tkowo zero miejsca i po chwili ro\u015bnie, co wida\u0107 jako skok uk\u0142adu. Stabilny motyw wpisuje atrybuty szeroko\u015bci i wysoko\u015bci, korzysta ze srcset oraz sizes i rezerwuje przestrze\u0144 zanim obraz si\u0119 pojawi.<\/p>\n

CLS na produktach co to oznacza dla klienta<\/h2>\n

CLS to wska\u017anik przesuni\u0119\u0107 uk\u0142adu czyli sytuacji gdy elementy strony zmieniaj\u0105 pozycj\u0119 podczas \u0142adowania. Na karcie produktu oznacza to przesuwaj\u0105ce si\u0119 zdj\u0119cie, tytu\u0142, cen\u0119 lub przycisk dodaj do koszyka. U\u017cytkownik klika w puste miejsce albo w z\u0142y element i rezygnuje z dalszych krok\u00f3w.<\/p>\n

\u0179r\u00f3d\u0142em skok\u00f3w bywaj\u0105 obrazy bez znanych wymiar\u00f3w, czcionki \u0142adowane z op\u00f3\u017anieniem, naklejki promocji dociskaj\u0105ce tre\u015b\u0107 albo op\u00f3\u017anione karuzele. Motyw kt\u00f3ry dba o CLS ustala miejsca na media, przewiduje wysoko\u015b\u0107 dynamicznych element\u00f3w i nie opiera kluczowych fragment\u00f3w na skryptach kt\u00f3re buduj\u0105 layout dopiero po za\u0142adowaniu.<\/p>\n

Jak szybko sprawdzi\u0107 motyw pod k\u0105tem zdj\u0119\u0107 i stabilno\u015bci<\/h2>\n

Wrzu\u0107 do testu kilka produkt\u00f3w z r\u00f3\u017cnymi proporcjami zdj\u0119\u0107 oraz d\u0142ugimi tytu\u0142ami. Otw\u00f3rz list\u0119 kategorii na telefonie i przewijaj. Zwr\u00f3\u0107 uwag\u0119 czy kafelki maj\u0105 r\u00f3wn\u0105 wysoko\u015b\u0107, czy siatka nie skacze i czy przycisk dodaj do koszyka zostaje w tym samym miejscu.<\/p>\n

Otw\u00f3rz stron\u0119 produktu, prze\u0142\u0105czaj miniatury, powi\u0119kszenie oraz warianty. Sprawd\u017a czy g\u0142\u00f3wne zdj\u0119cie nie zmienia nagle wysoko\u015bci i czy opis nie zje\u017cd\u017ca w d\u00f3\u0142 przy ka\u017cdej akcji. Je\u015bli w\u0142\u0105czona jest naklejka promocji albo odznaka dost\u0119pno\u015bci, zobacz czy nie wypycha tytu\u0142u.<\/p>\n

Na koniec sp\u00f3jrz w raport wydajno\u015bci i metryk\u0119 CLS. Nie chodzi o punktacj\u0119 tylko o to, czy najwi\u0119ksze skoki dotycz\u0105 listy produkt\u00f3w lub galerii. Zasymuluj wolniejsze \u0142\u0105cze i gorszy procesor. Je\u015bli wtedy wszystko trzyma si\u0119 w ryzach, motyw jest bli\u017cej solidnego wyboru.<\/p>\n

Zobacz wi\u0119cej darmowej wiedzy na ProjektWordPress.pl<\/a><\/p>\n

Ustawienia WooCommerce kt\u00f3re pomagaj\u0105<\/h2>\n

W sekcji ustawie\u0144 obraz\u00f3w dobierz proporcje miniatur i w\u0142\u0105cz przycinanie tak, aby siatka by\u0142a r\u00f3wna. Po zmianie rozmiar\u00f3w od\u015bwie\u017c miniatury w bibliotece medi\u00f3w, inaczej kategorie dalej b\u0119d\u0105 pokazywa\u0107 stare pliki. Pami\u0119taj aby nie przesadzi\u0107 z szeroko\u015bci\u0105, bo telefon i tak nie poka\u017ce ogromnych grafik.<\/p>\n

Na stronie produktu ogranicz nadmiar efekt\u00f3w galerii. Zoom i lightbox s\u0105 przydatne, ale je\u015bli powoduj\u0105 zmiany wysoko\u015bci zdj\u0119cia w trakcie interakcji, lepiej je upro\u015bci\u0107. Zadbaj te\u017c o sp\u00f3jne kadry mi\u0119dzy zdj\u0119ciem g\u0142\u00f3wnym a miniaturami, dzi\u0119ki temu galeria nie b\u0119dzie zmienia\u0107 rozmiaru przy prze\u0142\u0105czaniu uj\u0119\u0107.<\/p>\n

Cechy motywu kt\u00f3re u\u0142atwiaj\u0105 \u017cycie<\/h2>\n

Dobra baza to wsparcie dla edytora blok\u00f3w i szablon\u00f3w witryny oraz czytelne opcje odst\u0119p\u00f3w i siatki. Im mniej nieprzewidywalnych wstawek, tym \u0142atwiej utrzyma\u0107 stabilny layout na ma\u0142ych ekranach. Motyw powinien pozwala\u0107 na r\u00f3wn\u0105 wysoko\u015b\u0107 kafelk\u00f3w i kontrol\u0119 proporcji obraz\u00f3w bez kombinowania.<\/p>\n

Liczy si\u0119 spos\u00f3b \u0142adowania medi\u00f3w. Szukaj rozwi\u0105za\u0144 kt\u00f3re dodaj\u0105 atrybuty szeroko\u015bci i wysoko\u015bci do ka\u017cdego obrazka, stosuj\u0105 lazy loading oraz srcset i sizes. W uproszczeniu przegl\u0105darka dostaje zestaw dost\u0119pnych rozmiar\u00f3w i wybiera ten najbardziej pasuj\u0105cy do ekranu, co zmniejsza wag\u0119 i ogranicza skoki.<\/p>\n

Wa\u017cna jest te\u017c lekko\u015b\u0107 galerii. Je\u017celi podstawowa galeria dzia\u0142a na natywnych mechanizmach przegl\u0105darki i nie potrzebuje ci\u0119\u017ckich skrypt\u00f3w, rzadziej zobaczysz problemy na telefonach. Dodatkowe efekty powinny by\u0107 do w\u0142\u0105czenia, nie obowi\u0105zkowe, aby\u015b m\u00f3g\u0142 zrezygnowa\u0107 z nich na rzecz stabilno\u015bci.<\/p>\n

Na co uwa\u017ca\u0107 w motywach marketplace<\/h2>\n

Nadmiernie rozbudowane paczki z dziesi\u0105tkami dem, karuzel i okien podgl\u0105du potrafi\u0105 wygl\u0105da\u0107 efektownie, ale ka\u017cda warstwa dodaje ryzyko skok\u00f3w i konflikt\u00f3w. Je\u015bli demo opiera si\u0119 na ci\u0119\u017ckich skryptach i wielu dynamicznych wstawkach, w realnym sklepie \u0142atwo o galeri\u0119 kt\u00f3ra zmienia wymiary przy ka\u017cdym klikni\u0119ciu i list\u0119 produkt\u00f3w gdzie ka\u017cdy kafelek \u017cyje w\u0142asnym \u017cyciem.<\/p>\n

Motyw do WooCommerce a wygoda edycji<\/h2>\n

Sprawd\u017a jak szybko zmienisz uk\u0142ad strony produktu bez si\u0119gania po kolejny kreator i kr\u00f3tkie kody. Globalne style, wzorce blok\u00f3w i czytelne sekcje w personalizacji pozwalaj\u0105 ustawi\u0107 siatk\u0119, typografi\u0119 i odst\u0119py tak, aby zdj\u0119cia mia\u0142y przewidywalne otoczenie.<\/p>\n

Warto aby motyw szanowa\u0142 szablony WooCommerce, zamiast nadpisywa\u0107 wszystko w\u0142asnymi rozwi\u0105zaniami. Dzi\u0119ki temu aktualizacje rzadziej psuj\u0105 galeri\u0119, a Ty skupiasz si\u0119 na tre\u015bci i zdj\u0119ciach, nie na ci\u0105g\u0142ym \u0142apaniu b\u0142\u0119d\u00f3w wizualnych.<\/p>\n

Kiedy zmiana motywu ma sens<\/h2>\n

Je\u015bli po ustawieniu proporcji, od\u015bwie\u017ceniu miniatur i wy\u0142\u0105czeniu zb\u0119dnych efekt\u00f3w wci\u0105\u017c widzisz skoki uk\u0142adu albo przyci\u0119te zdj\u0119cia, a ka\u017cda aktualizacja przywraca problem, szkoda czasu. Szukaj motywu kt\u00f3ry utrzymuje sta\u0142e proporcje miniatur, rezerwuje miejsce na obrazy, ma lekk\u0105 galeri\u0119 i jest rozwijany w rytmie WooCommerce. Zanim prze\u0142\u0105czysz produkcj\u0119, sprawd\u017a wszystko na kopii testowej i zr\u00f3b pe\u0142n\u0105 kopi\u0119 zapasow\u0105.<\/p>\n","protected":false},"excerpt":{"rendered":"

Zdj\u0119cia produkt\u00f3w na telefonach wygl\u0105daj\u0105 \u015bwietnie w demo, a potem w realnym sklepie wychodzi chaos. Jedne kadry s\u0105 przyci\u0119te, inne za wysokie, siatka skacze,…<\/p>\n","protected":false},"author":1,"featured_media":105,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-104","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-motywy"],"_links":{"self":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/comments?post=104"}],"version-history":[{"count":0,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/posts\/104\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/media\/105"}],"wp:attachment":[{"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/media?parent=104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/categories?post=104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/projektwordpress.pl\/index.php\/wp-json\/wp\/v2\/tags?post=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}