Jak przedstawić produkty na osi czasu w Woocommerce?

Dzisiaj wchodzi nowy plugin do naszego LAB. Plugin, który pozwoli Ci na sklepie internetowym przedstawić produkty w formie osi czasowej. Moduł jest dedykowany stronom artystycznym i rzemieślniczym — tam, gdzie chcecie pokazać swoje prace na osi czasu, a nie w kolejnej kratce katalogu.

Powstał z myślą o sklepach z unikalnymi produktami: takimi, których produkcja wymaga czasu, a w poszczególnych latach i miesiącach powstaje ich mała ilość. Zrodził się podczas tworzenia sklepu internetowego dla Zimowa Galeria. Chciałem pokazać przyrost prac w podziale na lata i sezony. Obrazy powstają w miesiącach zimowych, każdego roku. Oś czasu kategoryzuje je za jednym zamachem na kilku poziomach. Widać na niej wzrost umiejętności artysty. Jeśli klientowi podoba się styl z danej pracy, bardzo prawdopodobne, że równie ciekawy obraz znajdzie w tym samym roku. Wielu artystów — świadomie albo nie — co roku minimalnie zmienia swój styl. To też efekt szlifowania warsztatu i dążenia do tego źródła, z którego bije inspiracja. Kategoryzujemy produkty według daty powstania. To oczywiste. Plugin po prostu pokazuje to tak, jak ludzie i tak oglądają prace: po kolei, po sezonach, po latach.

Design Cart Woo Timelines to wtyczka WordPress dla WooCommerce. Wstawia się ją shortcode’em. Można mieć wiele niezależnych instancji — każda z własnymi produktami, datami i wyglądem. Klik w miniaturę otwiera kartę produktu. Nie ma tu koszyka na osi. Oś ma prowadzić wzrok i sortować. Sprzedaż zostaje na karcie, tam gdzie WooCommerce i tak jest najlepsze.

 

Jak działa moduł od strony frontowej

Na desktopie środek zajmuje pionowa linia. Od niej odchodzą poziome ramiona. Nad ramieniem, na jego krańcu — zawsze licząc od osi — stoi data. Pod linią leżą miniatury produktów, małe, tak żeby w rzędzie zmieściły się mniej więcej cztery. Pod zdjęciem nazwa. Klik przenosi na kartę produktu. Gałęzie idą na przemian: lewa, prawa, lewa. Pineska siedzi dokładnie na osi.

Na telefonie pionowa linia schodzi na lewą stronę. Wszystkie poziome ramiona idą od lewej do prawej. Data ląduje na prawym krańcu. Miniatury nadal startują od osi. Nie ma lustrzanego układania, które na wąskim ekranie tylko myli.

To, co widzisz na osi, zależy od formatu daty. Nie od osobnego przełącznika „grupuj tak albo inaczej”. Format daty sam decyduje, jak prace się zbierają.

Wybierasz rok — na przykład „2024”. Wtedy jedna gałąź to cały rok. Wszystkie prace z 2025 siedzą razem, nie rozjeżdżają się na dwanaście identycznych napisów „2025”. To układ, który zrobiłem najpierw dla Zimowej Galerii: sezon zimowy, jeden rok, jeden odcinek osi.

Wybierasz miesiąc i rok albo MM.RRRR. Plugin grupuje po roku i miesiącu. Styczeń 2024 to inna gałąź niż luty 2024. Dobry układ, gdy prace powstają falami: jeden miesiąc plenairu, jeden miesiąc pracowni, jeden miesiąc ciszy.

Wybierasz dzień — DD.MM.RRRR, „12 września 2026” albo Y-m-d. Wtedy grupa to konkretna data. Ma sens przy premierach, wystawach, limitowanych zrzutach, dniu, w którym mebel wyszedł z pracowni.

Kolejność: od najnowszych albo od najstarszych. Najnowsze na górze to opowieść „tu jesteśmy dziś”. Najstarsze na górze to historia od początku — od pierwszej rzeźby, od pierwszej książki, od pierwszego instrumentu.

Źródło produktów też zmienia front. Zaznaczone — pokazujesz dokładnie te prace i w tej kolejności, jaką ułożysz na liście, a daty możesz dopisać ręcznie. Kategoria — WooCommerce dociąga publikacje z wybranej kategorii, datą jest data publikacji, chyba że na liście dopiszesz inną. Promocyjne — na oś wchodzą produkty aktualnie na promocji. Limit obcina zestaw, żeby oś nie urosła do katalogu.

Przy produkcie możesz zostawić pustą datę — wtedy idzie data publikacji z WooCommerce. Możesz wpisać własną datę powstania. Możesz też dać etykietę: „Zima 2024”, „Sezon III”, „Przed konserwacją”. Etykieta zastępuje sformatowaną datę w tej grupie. To się przydaje, gdy kalendarz nie oddaje tego, jak sami nazywacie okres.

Format zdjęcia zmienia charakter osi. Kwadrat 1:1 jest spokojny. 3:2 i 16:9 kłamią mniej przy pejzażu. 2:3 i 3:4 trzymają portret i figurę. Koło robi z miniatury pieczątkę — dobrze przy seriach, portretach, okładkach. Obramowanie jest opcjonalne: włączasz, dajesz kolor i grubość. Hover nie powiększa ramki. Powiększa się tylko zdjęcie w środku, żeby sąsiednie kafelki nie skakały.

Nagłówek osi możesz pokazać albo schować. Typografię ustawiasz osobno dla tytułu, daty i nazwy produktu. Nazwa to link: ma swój kolor i kolor po najechaniu. Tło instancji, kolor linii, kolor pineski, grubości, szerokość kontenera — to wszystko idzie na front jako zmienne CSS tej konkretnej osi. Druga instancja na innej stronie może wyglądać zupełnie inaczej.

 

Instalacja modułu

Wtyczka wymaga WordPressa 6.0 lub nowszego, PHP 7.4 oraz aktywnego WooCommerce (od 8.0). Pobierasz paczkę ze strony Design Cart albo z GitHub. Wgrywasz folder design-cart-woo-timelines do wp-content/plugins/, włączasz wtyczkę na liście wtyczek. Jeśli WooCommerce nie stoi, w panelu pojawi się komunikat i oś nie wstanie. To celowe. Bez produktów nie ma czego układać na czasie.

Po aktywacji w menu WordPressa pojawia się pozycja Woo Timelines. Tam dodajesz instancję, ustawiasz źródło i wygląd, kopiujesz shortcode.

Osadzenie na stronie:

[design_cart_woo_timelines id="1"]

Liczba po id to numer instancji z listy. Działa też krótszy alias [design_cart_woo_timeline id="1"] oraz [dcwt_timeline id="1"]. Shortcode wklejasz w treść strony, w blok shortcode albo w szablon. Jedna strona może mieć kilka osi, każda z innym ID.

Pobranie: strona Design Cart (LAB) oraz repozytorium GitHub. Aktualizacje i kolejne wersje idą tą samą drogą.

1

 

Dokumentacja funkcji

Ekran startowy to lista instancji, nie jeden formularz na cały sklep. Każda karta ma nazwę, liczbę produktów na liście i shortcode. Nowa oś startuje z domyślnym wyglądem: białe tło, linia i pineska w kolorze Design Cart, kontener 1100 px, miniatury 110 px, format 1:1, grupowanie według formatu daty.

Opcja	Co robi
Dodaj timeline	Tworzy nową instancję z domyślnym wyglądem i pustą listą produktów.
Shortcode na kafelku	Klik kopiuje [design_cart_woo_timelines id="…"] do schowka.
Edytuj	Otwiera konfigurację instancji (trzy zakładki: Ogólne, Produkty, Wygląd).
Duplikuj	Kopiuje wygląd i listing, dopisuje do nazwy, że to kopia, nadaje nowy shortcode.
Usuń	Kasuje instancję po potwierdzeniu. Tej operacji nie można cofnąć. Produktów w WooCommerce nie rusza.

 

Zakładka Ogólne

Tu decydujesz, skąd brać prace, jak datować gałęzie i czy nad osią ma stać tytuł.

Opcja	Co robi
Nazwa timeline	Nazwa instancji na liście i w nagłówku edycji. Jeśli włączysz pokazywanie nagłówka, ta sama treść wychodzi na front jako tytuł osi.
Pokazuj nagłówek timeline	Włącza albo gasi h2 nad osią. Wyłącz, gdy tytuł i tak stoi w hero strony.
Źródło: Zaznaczone	Oś pokazuje wyłącznie produkty z zakładki Produkty, w kolejności z listy, z Twoimi datami i etykietami.
Źródło: Kategoria	WooCommerce dociąga publikacje z wybranej kategorii, z limitem. Data to publikacja, chyba że na liście dopiszesz inną.
Źródło: Promocyjne	Produkty aktualnie na promocji. Jeśli sale jest puste, a na liście coś zostało, wtyczka wraca do tej listy, żeby oś nie zniknęła.
Kategoria produktów	Select z kategoriami WooCommerce. Ma znaczenie tylko przy źródle Kategoria.
Limit produktów	Maksymalna liczba prac na osi. Przy zaznaczonych obcina listę od góry. Przy kategorii i promocjach ogranicza zapytanie. Domyślnie 24.
Format daty	Jednocześnie etykieta gałęzi i reguła grupowania. Rok — jedna gałąź na rok. Miesiąc i rok / MM.RRRR — rok plus miesiąc. Dzień (DD.MM.RRRR, dzień miesiąc rok, Y-m-d) — rok plus miesiąc plus dzień.
Kolejność	Od najnowszych (najnowsza gałąź na górze) albo od najstarszych (historia od początku).
Shortcode	Gotowy kod instancji z przyciskiem kopiowania. Po zapisie ten sam kod jest na kafelku listy.

 

Zakładka Produkty

Tu składasz listing. Nawet przy źródle kategoria albo promocje ta lista trzyma ręczne daty, etykiety i kolejność, gdy wracasz do zestawu zaznaczonego.

Opcja	Co robi
Szukaj produktu	Wyszukiwarka WooCommerce na żywo. Wyniki pokazują miniaturę i nazwę. Klik dodaje produkt do listy instancji.
Wczytaj produkty ze źródła	Dociąga publikacje zgodnie z trybem z Ogólnych. Przy tym samym ID zachowuje już wpisaną datę i etykietę.
Lista z przeciąganiem	Uchwyt, miniatura, nazwa i kosz. Przy źródle Zaznaczone kolejność na liście to kolejność w grupie na froncie.
Data	Data powstania w formacie YYYY-MM-DD. Puste pole = data publikacji produktu.
Etykieta daty	Własny napis zamiast sformatowanej daty, na przykład „Zima 2024”. Produkty z tą samą etykietą lądują w jednej grupie.
Usuń	Ściąga produkt z listy tej instancji, nie kasuje go w WooCommerce.

 

Zakładka Wygląd — linia i miniatury

Tu składasz sam rysunek osi: proporcje kadrów, kolory, grubości, obramowanie.

Opcja	Co robi
Format zdjęcia	Proporcje miniatury: 1:1, 3:2, 2:3, 4:3, 3:4, 16:9, 4:5, 5:4 albo koło. Koło tnie kadr do okręgu.
Kolor tła	Tło całego bloku #dcwt-1 (numer to ID instancji). Domyślnie białe.
Kolor linii	Pionowa oś i poziome ramiona. Domyślnie #1fa28c.
Kolor węzła	Pineska na styku ramienia i osi.
Szerokość kontenera	Szerokość osi, nie całej strony. Px albo %, wyśrodkowana. Domyślnie 1100 px.
Grubość linii pionowej	Od 1 do 20 px. Domyślnie 2.
Grubość linii poziomej	Ramiona dat. Osobno od pionu, gdy chcesz cieńszą belkę pod miniaturami.
Średnica węzła	Pineska, 6–40 px. Środek zawsze na osi.
Szerokość miniatury	40–200 px. W rzędzie celujemy w około cztery kadry. Domyślnie 110.
Obramowanie zdjęcia	Włącznik. Po włączeniu pokazują się kolor i grubość ramki (1–20 px). Działa też na formacie koło.

 

Zakładka Wygląd — typografia

Typografia jest rozbita na elementy, nie na jeden globalny zestaw. Każdy element ma własną czcionkę, wielkość, jednostkę, grubość, wyrównanie, uppercase i kolor. Jednostki: px, rem, vw, vh, %. Grubość: 300–800. Wyrównanie: lewo, środek, prawo. Lista krojów obejmuje czcionkę motywu oraz Playfair Display, Cormorant Garamond, Cinzel, Inter, Montserrat i resztę zestawu Design Cart.

 

Element	Gdzie widać i co da się ustawić extra
Nagłówek timeline	Tytuł nad osią, gdy w Ogólnych włączysz pokazywanie nagłówka. Domyślnie Playfair Display, 32 px.
Nagłówek z datą	Etykieta gałęzi. Domyślnie uppercase, kolor linii.
Nazwa produktu (link)	Podpis pod miniaturą. Dodatkowo kolor hover. Cały kafelek jest linkiem do karty produktu.

Jeśli w typografii pojawi się kiedyś przycisk, system ma już pola tła i hover tła. Przy linku zostaje sam kolor hover. Tak samo budujemy resztę modułów Design Cart, żeby ręka pamiętała panel.

 

Przykłady zastosowania

Odrestaurowane meble

Pracownia konserwacji ma inną logikę niż sklep z nowymi stołami. Klient chce wiedzieć, kiedy kredens wrócił do życia, nie tylko ile kosztuje. Oś po latach pokazuje, ile obiektów wyszło z warsztatu. Oś po miesiącach oddaje tempo: trzy komody w marcu, cisza w lipcu, szafa w październiku. Datą jest dzień zakończenia prac, nie data wrzucenia produktu do WooCommerce. Etykieta „po konserwacji” albo „przed / po” zbiera parę zdjęć w jedną gałąź. Format 3:2 albo 4:3 trzyma kadry wnętrz. Klik idzie na kartę z opisem drewna, lakieru i historii mebla.

Obrazy

To jest powód, dla którego wtyczka w ogóle powstała. W Zimowej Galerii prace rodzą się zimą. Rok na osi to sezon. Klient, któremu podoba się światło z 2024, nie grzebie w filtrach — widzi sąsiadów z tego samego roku. Widać też, jak rysunek twardnieje, jak cień się uspokaja, jak format się zmienia. Miniatura 3:2 przy pejzażu, 2:3 przy pionie. Źródło: zaznaczone, daty wpisane ręcznie jako data powstania, nie publikacji na stronie. Promocje możesz wypuścić drugą instancją: ta sama oś, inne źródło, inna strona.

Sklep fotografa

Sesje, plenery, wydruki limitowane. Oś po dniach ma sens, gdy każda premiera to konkretna data wypuszczenia odbitki. Oś po miesiącach układa rok w sezony: wiosna w górach, lato nad wodą, zima w mieście. Koło na miniaturze robi z serii zestaw pieczątek — dobrze przy portretach. Etykieta „edycja 12/30” nie zastąpi numeru na karcie, ale na osi może zebrać cały zrzut z jednego dnia. Limit 24 pilnuje, żeby oś nie stała się drugim archiwum Lightrooma.

Rzeźby

Rzeźba zajmuje czas. Czasem rok. Czasem trzy. Oś od najstarszych opowiada warsztat od pierwszej figury. Oś od najnowszych pokazuje, przy czym artysta jest teraz. Format 2:3 albo 3:4 nie ścina pionu. Obramowanie cienkie, w kolorze osi, oddziela kadr od tła strony, gdy motyw jest bardzo jasny albo bardzo ciemny. Źródło kategoria „Rzeźba”, jeśli w katalogu masz też inne techniki i nie chcesz ich mieszać na jednej belce.

Książki

Wydawnictwo autorskie, mała oficyna, kolejne tomy tego samego cyklu. Rok wydania to naturalna gałąź. Miesiąc przydaje się, gdy w jednym roku wychodzą trzy premiery i nie chcesz, żeby zlały się w kupę. Etykieta „tom I”, „wznowienie”, „edycja bibliofilska” mówi więcej niż sucha data. Miniatura 2:3 trzyma grzbiet i okładkę. Klik na kartę z ISBN, ceną i dostępnością. Druga instancja może pokazać tylko zapowiedzi — te same ustawienia wyglądu, inna lista.

Instrumenty robione ręcznie

Gitara, skrzypce, flet — numer seryjny i data ukończenia są częścią produktu, nie dodatkiem. Oś po latach pokazuje, ile instrumentów opuściło warsztat. Oś po dniach — konkretny egzemplarz, konkretny finisz. Klient, który szuka brzmienia i drewna z danego okresu, widzi sąsiadów od razu. Źródło zaznaczone, bo każdy instrument jest jeden. Data ręczna. Nazwa pod miniaturą krótka: model i numer. Reszta — menzura, podstrunnica, lakier — zostaje na karcie, nie na osi. Oś ma prowadzić, nie zastępować opisu.

 

Podsumowanie

Design Cart Woo Timelines nie udaje, że każdy sklep potrzebuje osi czasu. Potrzebują jej miejsca, w których czas jest częścią towaru: obraz malowany zimą, mebel wyciągnięty z warsztatu po pół roku, książka z datą premiery, instrument z numerem i dniem ukończenia. Siatka WooCommerce tego nie opowie. Filtry kategorii też nie, bo rok nie jest hierarchią w menu, tylko porządkiem w głowie klienta.

Plugin robi trzy rzeczy i na tym się zatrzymuje. Układa prace na pionowej osi. Grupuje je tak, jak sam nazywasz czas — rokiem, miesiącem albo dniem. Oddaje klik karcie produktu. Reszta jest konfiguracją: źródło, daty, etykiety, kadry, linia, typografia, wiele instancji, shortcode. Panel jest ten sam, którego używamy w innych modułach Design Cart. Front nie dociąga Reacta. WooCommerce zostaje WooCommerce.

Jeśli prowadzisz sklep z unikalnymi pracami i do tej pory układałeś je w siatce, bo „tak się robi sklep” — wstaw oś obok katalogu. Katalog niech sprzedaje. Oś niech pokazuje, skąd te prace się wzięły i w której zimie artysta był już sobą.