Wszystko o strona produktu | Webinsider - Internet widziany od środka ™

Tag: strona produktu

Dodawanie własnych etykiet (odznak, badge), np. na zdjęciach produktów w sklepie internetowym na WooCommerce

Dostałem zapytanie od czytelniczki (i klientki naszego sklepu internetowego), jakiej wtyczki właśnie w naszym sklepie używamy do wyświetlania dodatkowych etykiet (po angielsku „badge”, więc tłumacząc dosłownie, będzie to odznaka) na zdjęciach produktów. I choć mógłbym zgodnie z prawdą podać nazwę wtyczki, to nic by to nie dało, bo jest to wtyczka napisana specjalnie na potrzeby naszego sklepu, specjalnie na potrzeby wyświetlania właśnie tych etykiet (odznak). Mogę jednak pokazać, jak szybko w prosty sposób, za pomocą kilku linijek kodu, wdrożyć coś takiego w swoim sklepie.

Usuwanie lupki (zooma) i linku ze zdjęcia produktu na stronie produktu w sklepie internetowym na WooCommerce

Dziś na tapet bierzemy zdjęcie produktu w WooCommerce. Ale nie będziemy go wyrównywać w widoku archiwum. Zajmiemy się zdjęciem produktu na karcie produktu. Jednak nie będziemy go modyfikować np. dla produktów niedostępnych na stanie, a zajmiemy się jego powiększaniem. Od sterowania jego „intensywnością”, po całkowite wyłączenie. A na deser pozbędziemy się linku, który pod zdjęciem się w standardzie kryje.

Kod CSS dla wybranych produktów w WooCommerce, czyli gdy strona produktu ma wyglądać trochę inaczej niż pozostałe

Kilka dni temu, na „skrzynkę redakcyjną” wpłynęło „zapytanie premium” o możliwość modyfikacji pewnych elementów  graficznych na stronach poszczególnych produktów. Strona działa na dobrze znanym mi motywie Divi, więc teoretycznie można by skorzystać z opcji „theme builder”, by dla wybranych produktów przygotować inny wygląd. Jednak zmiany choć drobne – zmiana koloru dla kilku wybranych elementów, to miały docelowo dotyczyć wszystkich produktów w sklepie, a więc tworzenie dla każdego produktu oddzielnego szablonu choć możliwe, to w tym przypadku raczej nie byłoby najlepszym sposobem. Zwłaszcza że wszystko można było ogarnąć dosłownie 2-3 linijkami kodu CSS.

Loading

Pin It on Pinterest