Lista życzeń w WooCommerce — darmowy, uniwersalny plugin Design Cart Wishlist

Jako twórca rozwiązań e-commerce od lat obserwuję ten sam schemat: klient wchodzi na sklep, przegląda produkty, wraca na Facebooka, wraca do sklepu, porównuje ceny — i w końcu znika.

Nie dlatego, że oferta jest słaba. Po prostu nie był gotowy kupić w tej chwili. Lista życzeń to jeden z nielicznych mechanizmów, który pozwala zatrzymać intencję zakupową bez agresywnego zbierania maili i bez wpychania gościa w checkout, na który nie jest przygotowany.

W tym artykule opisuję, czym jest wishlist w sklepach internetowych, jakie dane branżowe warto znać, a następnie przechodzę do mojego pluginu Design Cart Wishlist for WooCommerce — po co powstał, jaki problem rozwiązuje i jak skonfigurować każde pole w panelu administracyjnym. Na końcu znajdziesz instrukcję instalacji, przykłady shortcode’ów i sposoby wszczepienia serduszka w dowolny szablon — także bez hooków PHP.

Zobacz też:

• Tworzenie sklepu internetowego od A do Z
• Tworzenie sklepu internetowego na Woocommerce

 

1. Czym jest lista życzeń w e-commerce?

Lista życzeń (wishlist, ulubione, „zapisane produkty”) to funkcja sklepu, która pozwala użytkownikowi oznaczyć produkt i wrócić do niego później. W odróżnieniu od koszyka — który sygnalizuje gotowość do transakcji — wishlist jest przestrzenią decyzji odroczonej. Klient nie musi wybierać między „kupuję teraz” a „wychodzę”. Może powiedzieć: „interesuje mnie to, wrócę”.

W praktyce wishlist pełni kilka ról naraz:

• Pamięć zakupowa — szczególnie w branżach z długim cyklem decyzyjnym (meble, elektronika, moda premium, prezenty sezonowe).
• Lista planowania — klient układa zestaw produktów przed większym zakupem (np. wyposażenie kuchni, garderoba na sezon).
• Most do konwersji — produkt zapisany na liście wraca do użytkownika w kolejnych wizytach, często z większą gotowością do zakupu.
• Element UX premium — obecność serduszka buduje wrażenie nowoczesnego, „ludzkiego” sklepu, a nie katalogu PDF.

Lista życzeń nie zastępuje remarketingu ani maili transakcyjnych — ale uzupełnia je. Daje użytkownikowi narzędzie po jego stronie, zamiast wymagać rejestracji „żeby coś zapisać”.

 

2. Po co wdrażać wishlist w sklepie internetowym?

Z perspektywy właściciela sklepu wishlist to nie gadżet. To infrastruktura pod trzy konkretne cele biznesowe.

 

2.1. Wyższa konwersja w dłuższym horyzoncie

Użytkownik, który zapisuje produkt, deklaruje zainteresowanie silniejsze niż samo wyświetlenie karty. W wielu implementacjach widziałem, że powrót na listę życzeń kończy się dodaniem do koszyka częściej niż powrót na losową stronę kategorii. Wishlist skraca drogę od „pamiętam, że coś mi się podobało” do „już wiem, że to biorę”.

 

2.2. Mniejszy opór u gości

Wymuszanie rejestracji przed zapisaniem produktu to jeden z najszybszych sposobów na utratę użytkownika. Sensowny wishlist pozwala działać gościom (cookie / sesja) i opcjonalnie scalać listę po logowaniu. To kompromis między danymi a UX — i w moim doświadczeniu działa lepiej niż popup z rabatem za e-mail w momencie pierwszego kliknięcia.

 

2.3. Sygnał merchandisingowy

Agregaty zapisów (nawet proste — liczba serduszek per produkt) pomagają rozpoznać produkty „aspiracyjne”: chętnie oglądane, ale kupowane rzadziej lub z opóźnieniem. To wiedza przydatna przy kampaniach, bundlingu i planowaniu promocji.

 

2.4. Wishlist a zbieranie maili

Wiele sklepów traktuje wishlist wyłącznie jako pretekst do lead generation. To błąd strategiczny. Użytkownik, który chce zapisać produkt, oczekuje natychmiastowej akcji — nie formularza marketingowego. Dlatego w moim pluginie priorytetem jest szybka, jednoklikowa obsługa, a nie wymuszanie konta. E-mail można dodać później — w momencie, gdy użytkownik już ufa sklepowi.

 

3. Statystyki list życzeń w e-commerce — co mówią dane?

Poniższe wartości to synteza raportów branżowych i obserwacji z wdrożeń — nie są uniwersalnymi stałymi, ale dobrze oddają rząd wielkości i kierunek trendów. W artykule wizualizuję je za pomocą shortcode’a {dcchart} z mojego systemu wykresów DC Chart.

3.1. Jak często kupujący korzystają z wishlist?

Szacunki branżowe wskazują, że od około jednej trzeciej do blisko połowy aktywnych kupujących online korzysta z funkcji zapisywania produktów (wishlist, ulubione, porównywarki wewnętrzne). W sklepach modowych i home&decor udział ten bywa wyższy.

3.2. Wpływ wishlist na konwersję — porównanie ścieżek

W wielu analizach A/B ścieżka „zapisz → wróć → kup” osiąga wyższy współczynnik konwersji niż ścieżka bez zapisu produktu. Różnica zależy od branży, ale trend jest powtarzalny — szczególnie przy AOV powyżej średniej rynkowej.

3.3. Dlaczego użytkownicy zapisują produkty zamiast kupować od razu?

Badania UX e-commerce regularnie wskazują te same powody: potrzeba porównania, oczekiwanie na promocję, brak budżetu w danym momencie, konieczność konsultacji z domownikiem. Wishlist odpowiada na te scenariusze lepiej niż koszyk.

3.4. Wzrost znaczenia wishlist w mobile

Ruch mobilny dominuje w wielu kategoriach. Zapisanie produktu jednym tapnięciem w serduszko jest naturalniejsze niż wypełnianie formularzy na małym ekranie. Stąd rosnąca rola lekkich, responsywnych implementacji wishlist — bez ciężkich modalów i bez blokowania gościa.

Uwaga: powyższe wykresy ilustrują typowe wzorce branżowe. W Twoim sklepie wartości będą zależeć od asortymentu, ruchu i sezonowości. Same w sobie pokazują jednak, że wishlist to nie marginalna funkcja — to element core UX w nowoczesnym sklepie.

 

4. Design Cart Wishlist for WooCommerce — moje rozwiązanie

Stworzyłem plugin Design Cart Wishlist for WooCommerce, bo większość gotowych rozwiązań albo wiąże się z konkretnym motywem, albo wymaga programisty przy każdej zmianie layoutu, albo — co gorsza — traktuje wishlist jako pretekst do agresywnego lead capture. Potrzebowałem narzędzia, które:

• działa od razu na standardowym WooCommerce,
• pozwala wszczepić serduszko praktycznie w dowolne miejsce szablonu,
• oddziela konfigurację wyglądu od logiki placement,
• nie wymaga edycji plików motywu tam, gdzie wystarczy selektor CSS.

 

4.1. Czy w ogóle istnieje taki plugin?

Tak. Plugin jest dostępny jako rozszerzenie WordPress + WooCommerce. Po aktywacji dodaje listę życzeń z serduszkiem w headerze, na listach produktów, na karcie produktu oraz dedykowaną stronę listy życzeń. Panel ustawień opiera się na moim systemie UI DC Interface — tym samym, którego używam w innych modułach Design Cart.

 

4.2. Po co powstał — jaki problem rozwiązuje?

Projektowałem go z myślą o sklepach, które:

• mają własny motyw lub page builder z niestandardowym HTML,
• nie chcą uzależniać wishlist od jednego miejsca w szablonie,
• potrzebują szybkiego wdrożenia u klienta bez tygodnia prac developerskich,
• chcą obsłużyć gości bez rejestracji, ale z opcją scalenia listy po logowaniu.

Kluczowa decyzja projektowa: trzy warstwy placement, a nie jedna sztywna integracja.

1. Hooki WooCommerce — działają out of the box na listach, karcie produktu i blokach WC.
2. Reguły placement (selektory CSS) — dla modułów, sliderów, niestandardowych sekcji.
3. Shortcode — pełna kontrola ręczna w treści, widgetach, Elementorze, Gutenbergu.

Dzięki temu serduszko można dodać do menu headera obok koszyka, w overlay na zdjęciu produktu w module „bestsellery”, albo w dowolnym miejscu szablonu — nawet bez dotykania hooków PHP, jeśli wystarczy reguła selektora lub shortcode.

 

4.3. Uniwersalność — co to znaczy w praktyce?

Plugin nie zakłada jednej klasy w motywie typu .product-box. W panelu definiujesz:

• selektor kontenera (gdzie wstawić element),
• placement (prepend, append, before, after),
• preset pozycji (inline, overlay w rogach, custom absolute),
• sposób wykrywania ID produktu (auto lub ręcznie).

Auto-detekcja ID produktu idzie w górę DOM i szuka m.in. data-product_id, klasy post-{id}, linków add-to-cart czy pól formularza wariantów. W większości sklepów WooCommerce nie trzeba tego konfigurować ręcznie.

 

5. Dokumentacja panelu ustawień — opis każdej zakładki i pola

Panel administracyjny znajdziesz w menu WordPress po lewej stronie: Lista życzeń (ikona serduszka) → Ustawienia. Poniżej opisuję każdą zakładkę i każde pole formularza.

 

5.1. Zakładka: Ogólne

Podstawowa konfiguracja działania pluginu.

Włącz plugin

Globalny przełącznik. Wyłączenie blokuje renderowanie serduszek, shortcode’ów i obsługę AJAX na froncie. Przydatne przy testach lub tymczasowym wyłączeniu bez deaktywacji wtyczki.

Tryb gości

• Goście mogą dodawać (cookie) — lista zapisywana w ciasteczku przeglądarki. Użytkownik nie musi się logować.
• Tylko zalogowani — kliknięcie serduszka bez sesji przekierowuje do logowania. Wybieram tę opcję w sklepach B2B lub przy produktach wymagających konta.

Strona listy życzeń

Wybór strony WordPress, na której wyświetlana jest pełna lista zapisanych produktów. Przy aktywacji plugin tworzy stronę z shortcode’em [dc_wishlist]. Możesz wskazać inną stronę, jeśli layout wymaga customowego szablonu.

Połącz listę gościa z kontem po logowaniu

Gdy włączone, produkty zapisane w cookie przed logowaniem są scalane z listą użytkownika po zalogowaniu. To must-have w sklepach z dużym udziałem ruchu gościnnego.

5.2. Zakładka: Header

Konfiguracja serduszka w nagłówku sklepu — link do listy życzeń (lub logowania), a nie przycisk toggle produktu.

Włącz w headerze

Aktywuje wstawianie linku z ikoną serduszka w nagłówku. Licznik zapisanych produktów pojawia się automatycznie, gdy lista nie jest pusta.

Selektor kontenera

CSS selector elementu, w którym ma zostać umieszczone serduszko. Przykłady: .site-header__actions, .header-interface, #masthead .header-tools. To główny punkt kotwiczenia w motywie.

Selektor odniesienia (opcjonalnie)

Element względem którego wstawiasz serduszko zamiast względem całego kontenera. Typowe użycie: .cart-contents, .header-cart — serduszko ląduje obok koszyka, a nie na końcu całego paska.

Placement

• prepend — wewnątrz kontenera, na początku.
• append — wewnątrz kontenera, na końcu.
• before — tuż przed elementem odniesienia.
• after — tuż za elementem odniesienia.

Przy headerze najczęściej wybieram before względem ikony koszyka.

Zachowanie gościa

• Przekieruj do logowania — kliknięcie serduszka w headerze prowadzi na stronę logowania (z powrotem na listę po zalogowaniu).
• Strona listy życzeń — gość trafia na stronę listy (gdzie i tak może przeglądać zapisane w cookie produkty).

 

5.3. Zakładka: Produkty

Najważniejsza zakładka pod kątem integracji z motywem. Składa się z dwóch sekcji: hooków WooCommerce i reguł placement.

Domyślne hooki WooCommerce

Trzy przełączniki — każdy włącza automatyczne serduszko bez konfiguracji selektorów:

Lista produktów

Hook archiwum / kategorii / sklepu — serduszko na każdej karcie produktu w pętli WooCommerce (domyślnie overlay w prawym górnym rogu zdjęcia).

Karta produktu

Serduszko na stronie pojedynczego produktu w sekcji summary.

Bloki WooCommerce

Integracja z blokowymi siatkami produktów Gutenberga / WooCommerce Blocks.

Jeśli motyw jest standardowy — zwykle wystarczy zostawić hooki włączone i nie dodawać reguł. Reguły stosuję tylko tam, gdzie HTML odbiega od domyślnego WooCommerce.

Reguły placement — pola pojedynczej reguły

Przycisk Dodaj regułę otwiera wiersz konfiguracji. Możesz mieć wiele reguł równolegle (np. osobna dla slidera, osobna dla strony promocji).

Nazwa

Etykieta robocza tylko dla Ciebie — np. „Slider homepage”, „Moduł bestsellery”. Ułatwia zarządzanie wieloma regułami.

Włączona

Przełącznik aktywności reguły bez usuwania konfiguracji.

Kontekst

• Lista produktów — archiwum, kategorie, tagi.
• Karta produktu — single product.
• Wszędzie — reguła działa globalnie na froncie.
• Własny URL — aktywuje dodatkowe pole wzorca URL.

Wzorzec URL

Widoczne przy kontekście „Własny URL”. Fragment ścieżki, np. /promocje/ lub /black-friday. Reguła działa tylko gdy bieżący URL zawiera ten ciąg.

Tryb dopasowania

• Każdy match — serduszko na każdym elemencie pasującym do selektora (typowe dla pętli produktów).
• Pierwszy match — tylko pierwszy znaleziony element (przydatne w unikalnych sekcjach).

Selektor kontenera

CSS selector miejsca docelowego, np. .product-card__image, .swiper-slide .product. Tu wstawiane jest serduszko.

Placement

Tak samo jak w headerze: prepend, append, before, after.

Preset pozycji

• Inline — serduszko w normalnym flow dokumentu.
• Overlay — prawy/lewy górny/dolny róg — serduszko unosi się nad zdjęciem produktu.
• Custom (advanced) — ręczne współrzędne CSS.

Product ID

• Auto (domyślnie) — plugin sam wykrywa ID produktu w DOM.
• Selektor — wskazujesz element z ID.
• Atrybut — odczyt z konkretnego atrybutu HTML.

Position / Top / Right / Bottom / Left

Pola widoczne przy presecie Custom. Pozwalają ustawić position: absolute|relative oraz offsety, np. top: 8px, right: 8px.

Selektor ID produktu / Atrybut ID

Pola rozszerzone przy trybie Product ID ≠ Auto. Np. selektor .add_to_cart_button, atrybut data-product_id.

Reguły nie duplikują serduszek z hooków — jeśli hook już wyrenderował przycisk w danym kontekście, reguła go respektuje.

 

5.4. Zakładka: Wygląd

Dwa niezależne zestawy stylów — Header i Listy i karta produktu. Rozdzielenie to świadoma decyzja: link w nagłówku ma inne proporcje niż toggle na karcie produktu.

Dla każdego kontekstu konfigurujesz:

Tło

Kolor tła przycisku / linku. Może być transparentne — wtedy widać tylko ikonę.

Kolor ikony

Kolor obrysu serduszka w stanie domyślnym.

Rozmiar

Wielkość ikony w pikselach (suwak + pole liczbowe w komponencie DC Dimension).

Hover — tło / Hover — kolor

Style po najechaniu kursorem.

Aktywne — kolor / Aktywne — tło

Tylko dla kontekstu produktowego. Stan „wypełnione serduszko” gdy produkt jest już na liście życzeń.

Style trafiają na front jako CSS variables (--dc-wl-color, --dc-wl-size itd.) — bez inline hacków w motywie.

 

5.5. Zakładka: Zaawansowane

Tryb debug placement

Włącza podświetlanie anchorów reguł na froncie — tylko dla zalogowanego administratora. Zielona ramka: selektor OK, ID produktu wykryte. Czerwona: selektor OK, brak ID. To oszczędza godziny przy konfiguracji niestandardowych motywów.

5.6. Zakładka: Dokumentacja

Tworząc ten moduł chciałem by był uniwersalny, cel ten wymusił większe skomplikowanie. Gdy go skończyłem i zacząłem testować, stwierdziłem ze dla osoby nietechnicznej może być dość złożony.

Stwierdziłem wiec że najlepszym rozwiązaniem będzie dołączenie do niego na stałe uproszczonej dokumentacji — szybki start, opis shortcode’ów, sekcja o gościach i debugu. Pełniejszą wersję masz w tym artykule.

 

6. Gdzie pobrać plugin?

Design Cart Wishlist for WooCommerce udostępniam na dwóch kanałach:

Strona Design Cart

1

Repozytorium GitHub

Plugin jest wydawany na licencji GPL v2 (or later), zgodnie z wymaganiami katalogu WordPress.org. Wersja w repozytorium WP: Design Cart Wishlist for WooCommerce, slug: design-cart-wishlist.

 

7. Instalacja — krótka instrukcja

1. Pobierz paczkę ZIP pluginu (design-cart-wishlist).
2. W panelu WordPress przejdź do Wtyczki → Dodaj nową → Wgraj wtyczkę i wybierz plik ZIP.
3. Aktywuj wtyczkę. Upewnij się, że WooCommerce jest zainstalowany i aktywny.
4. Po aktywacji plugin automatycznie tworzy stronę „Lista życzeń” ze shortcode’em [dc_wishlist].
5. Otwórz menu Lista życzeń → Ustawienia i skonfiguruj header (selektor kontenera) oraz ewentualne reguły placement.
6. Zapisz ustawienia i sprawdź front sklepu jako gość i jako zalogowany użytkownik.

Instalacja manualna (FTP): rozpakuj folder design-cart-wishlist do /wp-content/plugins/ i aktywuj w panelu.

 

6. Jak używać pluginu?

6.1. Warstwa 1 — zero konfiguracji (hooki WooCommerce)

Po aktywacji i włączeniu pluginu w zakładce Ogólne, z włączonymi hookami w zakładce Produkty, serduszka pojawiają się automatycznie na:

• listach produktów (kategorie, sklep, tagi),
• karcie produktu,
• blokach WooCommerce.

To domyślny scenariusz — większość sklepów na standardowym motywie WooCommerce nie wymaga nic więcej.

 

6.2. Warstwa 2 — header obok koszyka

W zakładce Header podaj selektor kontenera akcji w nagłówku. Przykładowa konfiguracja:

• Kontener: .site-header__actions
• Odniesienie: .cart-contents
• Placement: before

Po zapisaniu JavaScript wstawia link z serduszkiem przy pierwszym załadowaniu strony i obserwuje DOM (MutationObserver) — ważne przy AJAX-owych mini-koszykach i dynamicznym headerze.

 

6.3. Warstwa 3 — reguły placement bez hooków

Gdy masz moduł z niestandardowym HTML — np. slider produktów w Elementorze — dodaj regułę:

• Kontekst: Wszędzie lub Własny URL
• Selektor: .elementor-widget-container .product-image (przykład — dopasuj do swojego motywu)
• Preset: Overlay — prawy górny
• Product ID: Auto

Plugin wstawi serduszko na każdym dopasowanym elemencie i sam odczyta ID produktu z otaczającego markupu WooCommerce.

 

6.4. Warstwa 4 — shortcode’y

Dwa shortcode’y dają pełną kontrolę ręczną:

Strona listy życzeń

[dc_wishlist]

Renderuje pełną listę zapisanych produktów w układzie listowym: miniatura, tytuł, cena, przycisk „Dodaj do koszyka”, serduszko do usunięcia. Umieść na dowolnej stronie WordPress.

Pojedyncze serduszko

[dc_wishlist_button]

Na stronie produktu — automatycznie bierze ID bieżącego produktu.

[dc_wishlist_button product_id="123"]

Serduszko dla konkretnego produktu — np. w landing page, porównywarce, tabeli specyfikacji.

[dc_wishlist_button product_id="123" position="overlay-top-right"]

Z predefiniowanym presetem pozycji: inline, overlay-top-right, overlay-top-left, overlay-bottom-right, overlay-bottom-left.

 

6.5. Wszczepienie w szablon motywu (PHP)

Jeśli wolisz twardy kod w pliku motywu (child theme), możesz wywołać renderer bezpośrednio:

<?php
if ( class_exists( 'DC_Wishlist_Button' ) ) {
    echo DC_Wishlist_Button::render_product_button(
        get_the_ID(),
        array(
            'source'   => 'theme',
            'position' => 'overlay-top-right',
        )
    );
}
?>

Link do listy życzeń w headerze możesz też dodać ręcznie w header.php motywu potomnego — ale w większości przypadków wystarczy konfiguracja selektora w panelu, bez edycji plików motywu.

6.6. Dodanie do menu WordPress

Aby dodać link „Lista żeczeń” do menu nawigacyjnego:

1. Skopiuj URL strony listy życzeń (ustawionej w zakładce Ogólne).
2. Przejdź do Wygląd → Menu.
3. Dodaj pozycję „Własny link” z tym URL i etykietą np. „Ulubione”.

Równolegle możesz mieć serduszko w headerze (automatyczne) i pozycję w menu (ręczna) — to kwestia UX, nie ograniczenie techniczne pluginu.

 

6.7. Scenariusze, które testuję po wdrożeniu

1. Gość dodaje 3 produkty → odświeża stronę → lista zachowana w cookie.
2. Gość loguje się → produkty scalone z kontem (przy włączonej opcji merge).
3. Zalogowany użytkownik dodaje/usuwa produkt → serduszko zmienia stan bez przeładowania (AJAX).
4. Filtr AJAX na liście produktów → serduszka pojawiają się na nowo załadowanych kartach (MutationObserver).
5. Tryb debug → weryfikacja selektorów na niestandardowym motywie.

 

7. Kompatybilność i wymagania techniczne

Plugin wymaga WordPress 6.0+, PHP 7.4+ oraz aktywnego WooCommerce. Testowany do WordPress 7.0. Nie ładuje zewnętrznych skryptów z CDN — Font Awesome w panelu admina jest bundlowany lokalnie, a style frontu idą przez standardowe wp_enqueue_style i wp_add_inline_style. To świadomy wybór pod katalog WordPress.org i pod wydajność sklepu produkcyjnego.

Współpracuje z motywami opartymi o WooCommerce, page builderami (Elementor, Gutenberg) i niestandardowymi modułami produktowymi — o ile da się wskazać selektor CSS lub użyć shortcode’a. Przy motywach całkowicie niestandardowych (bez klas .product, bez data-product_id) pomaga tryb debug placement i ręczna konfiguracja Product ID w regule.

 

8. Podsumowanie

Lista życzeń to nie ozdoba — to infrastruktura pod decyzje zakupowe odroczone w czasie. W e-commerce, gdzie koszt pozyskania ruchu rośnie, każdy mechanizm utrzymujący kontakt użytkownika z produktem bez presji ma wartość mierzalną.

Design Cart Wishlist for WooCommerce powstał właśnie po to, żebym mógł wdrażać wishlist szybko, uniwersalnie i bez uzależnienia od jednego motywu. Hooki WooCommerce dają natychmiastowy efekt. Reguły placement i shortcode’y dają precyzję tam, gdzie standardowy markup się kończy. A panel w DC Interface pozwala przekazać konfigurację klientowi bez czytania kodu.

Jeśli prowadzisz sklep na WooCommerce i jeszcze nie masz wishlist — albo masz, ale wiąże Cię z sztywnym motywem — ten plugin jest odpowiedzią, którą sam chciałem mieć w toolboxie. Pobierz, skonfiguruj header, włącz hooki i dopiero gdy trafisz na niestandardowy moduł — dodaj regułę selektora. Reszta dzieje się po stronie użytkownika jednym kliknięciem w serduszko.