Przejrzane przez Instalujesz wtyczkę listy życzeń w swoim sklepie Woostify i ładujesz stronę sklepu. Przycisk znajduje się w dziwnym miejscu. Zagęszcza przycisk Dodaj do koszyka lub ukrywa się za obrazkiem produktu. Czasami znika po najechaniu kursorem na kartę produktu.
To nie jest mały problem kosmetyczny. Przycisk listy życzeń Woostify, którego nikt nie może znaleźć, to zapis, który nigdy nie następuje. A zapis, który nigdy nie następuje, to klient, którego nie można przyciągnąć z powrotem.
Oto dobra wiadomość: SaveTo Wishlist Lite zajmuje się stylizacją za Ciebie, gdy tylko wykryje Woostify. Nie może jednak zdecydować za Ciebie, gdzie powinien znajdować się przycisk.
Ten przewodnik obejmuje obie części. Najpierw, co integracja robi sama z siebie. Następnie, wybory dotyczące umiejscowienia, których dokonasz, aby uzyskać płynny układ, w tym dwie konkretne pozycje, których będziesz chciał unikać.
Spis treści
- Dlaczego umiejscowienie przycisku listy życzeń decyduje o tym, czy klienci zapisują
- Co tak naprawdę robi integracja SaveTo Wishlist i Woostify
- Czego potrzebujesz przed rozpoczęciem
- Jak skonfigurować przyciski listy życzeń Woostify
- Dwa umiejscowienia, których należy unikać w Woostify
- Jak potwierdzić ładowanie stylów Woostify
- Listy życzeń dla gości są ważniejsze niż stylizacja
- Wytyczne dotyczące zakresu i kompatybilności
- Często zadawane pytania: SaveTo Wishlist i Woostify
- Daj przyciskowi zapisu miejsce do życia
Dlaczego umiejscowienie przycisku listy życzeń decyduje o tym, czy klienci zapisują
Lista życzeń jest opłacalna tylko wtedy, gdy kupujący faktycznie z niej korzystają, a jej umiejscowienie odgrywa główną rolę. Dowody branżowe podkreślają, jak wiele jest miejsca na wyróżnienie się dzięki świetnemu projektowi.
Produktowa strona UX benchmark Baymard Institute została zaktualizowana w marcu 2026 r. Wykazała, że 52% wiodących witryn e-commerce na komputery stacjonarne ma przeciętną lub gorszą wydajność strony produktowej. Na urządzeniach mobilnych liczba ta wzrasta do 62%. Benchmark obejmuje 155 lub więcej witryn i ponad 30 000 ręcznie ocenionych wyników.
Listy produktów oferują jeszcze większą szansę. Benchmark Baymard wykazał, że 80% witryn e-commerce pozostawia znaczną przestrzeń do poprawy użyteczności na listach produktów. Oznacza to, że czysty, przemyślany układ natychmiast wyróżni Twój sklep.
Następnie podział na urządzenia. Adobe Analytics poinformował, że urządzenia mobilne odpowiadały za 56,4% transakcji online w sezonie świątecznym 2025, w porównaniu do 54,5% rok wcześniej. Testowanie umiejscowienia na ekranach komputerów stacjonarnych i mobilnych zapewnia płynne doświadczenie dla wszystkich kupujących.
🔍️ Jedna rzecz, którą widzimy wielokrotnie: właściciel sklepu wybiera umiejscowienie, sprawdza je raz na laptopie i przechodzi dalej. Problemy prawie zawsze pojawiają się gdzie indziej. Zazwyczaj na archiwum kategorii, na produkcie zmiennym lub na telefonie. Sprawdź wszystkie trzy, zanim uznasz, że skończyłeś.
Chcesz szerszego obrazu kupujących, którzy patrzą i odchodzą? Nasz przewodnik po porzucaniu przeglądania w WooCommerce szczegółowo omawia ten wzorzec.
Co tak naprawdę robi integracja SaveTo Wishlist i Woostify
Integracja działa automatycznie jako lekki arkusz stylów kompatybilności, utrzymując szybkość Twojego sklepu i oszczędzając Ci konieczności grzebania w skomplikowanych ekranach ustawień.
SaveTo Wishlist Lite 1.1.1 sprawdza aktywny identyfikator szablonu WordPress. Kiedy odczyta dokładnie woostify, wtyczka ładuje dodatkowy arkusz stylów. Ten arkusz stylów znajduje się na wierzchu dowolnego bazowego arkusza stylów front-end, który wybrałeś. Następnie dostosowuje ułożenie, wyrównanie i odstępy, aby przycisk pasował do znaczników Woostify.
Oto, co zmienia, a czego celowo nie rusza.
| Kontekst | Co dostosowuje arkusz stylów Woostify |
|---|---|
| Sklep i archiwum, umiejscowienia na obrazku | Podnosi kontener przycisku do z-index: 3, aby znajdował się nad obrazkiem produktu |
| Sklep i archiwum, umiejscowienia w linii | Ustawia pionowy układ flex z górnym marginesem 10 pikseli. Dopasowuje również wyrównanie do lewej, środka i prawej strony Woostify. |
| Podsumowanie pojedynczego produktu | Dodaje 12 pikseli górnego marginesu, aby zapewnić czyste, zrównoważone odstępy od elementu powyżej. |
| Kolory, typografia, obramowania, rozmiary | Zachowane bez zmian. Pozostają w pełni konfigurowalne za pomocą ustawień wtyczki i motywu. |
Nasz przewodnik po personalizacji przycisku listy życzeń obejmuje ustawienia, które kontrolują wygląd.
Czego nie robi integracja
Lista rzeczy, których integracja SaveTo Wishlist i Woostify nie robi, jest równie przydatna. Nie dodaje JavaScriptu, punktów końcowych REST ani rekordów bazy danych. Nie przetwarza żadnych danych użytkownika. Nie rejestruje również żadnych dedykowanych haków renderowania Woostify ani nie dodaje strony ustawień Woostify.
Ponieważ integracja działa automatycznie w tle, nie będziesz musiał szukać dedykowanej karty ustawień ani przełącznika Woostify. Wykrywanie jest automatyczne i żadne ustawienie samo w sobie nie włącza ani nie wyłącza arkusza stylów Woostify.
Motywy potomne są również objęte. Użyj motywu potomnego, którego identyfikator nadrzędny to nadal woostify, a arkusz stylów będzie ładowany w ten sam sposób. Własny identyfikator motywu potomnego nie jest używany do wykrywania.
Nawet jeśli niestandardowa konfiguracja uniemożliwia automatyczne wykrywanie, Twoja witryna pozostaje w pełni funkcjonalna. SaveTo Wishlist Lite płynnie wraca do swojego standardowego arkusza stylów, aby zapewnić płynne działanie przycisków.
Czego potrzebujesz przed rozpoczęciem
Wymagania są krótkie, a każde z nich jest niezbędne do działania integracji.
| Komponent | Wymaganie |
|---|---|
| SaveTo Wishlist Lite | 1.1.1 lub nowszy |
| WordPress | 5.8 lub nowszy, testowany do 7.0 |
| PHP | 7.4 lub nowszy |
| WooCommerce | 4.0 lub nowszy, testowany do 10.2 |
| Aktywny motyw | Woostify lub motyw potomny zbudowany na Woostify |
SaveTo Wishlist Lite automatycznie sprawdza, czy WooCommerce jest aktywny przed inicjalizacją, zapewniając płynne i bezpieczne działanie pulpitu.
Dwie rzeczy, których nie potrzebujesz: płatnego planu i konkretnej wersji Woostify. Arkusz stylów kompatybilności jest zawarty w SaveTo Wishlist Lite, darmowej wersji. Ponadto kod nie sprawdza wersji Woostify, licencji ani wtyczki towarzyszącej. Nie ma również rozróżnienia między wersją darmową a Pro po stronie Woostify.
Zapewnia to szeroką kompatybilność z różnymi wersjami Woostify. Zawsze zalecamy szybkie wizualne sprawdzenie stron w aktywnej wersji motywu, aby upewnić się, że wszystko jest zgodne z oczekiwaniami.
Jak skonfigurować przyciski listy życzeń Woostify
Integracja Woostify działa od razu po wyjęciu z pudełka, dzięki czemu możesz w pełni skupić się na wyborze umiejscowienia, które nada Twojemu sklepowi najbardziej dopracowany wygląd.
Umiejscowienie jest jedną z dźwigni, które omawiamy w naszym przewodniku po optymalizacji konwersji listy życzeń.
Wszystko znajduje się na jednym ekranie: SaveTo Wishlist → Ustawienia → Umiejscowienie i style przycisków. Będziesz potrzebować uprawnień administratora (manage_options), aby uzyskać dostęp do tego ekranu, co zapewni bezpieczeństwo ustawień stylizacji Twojej witryny.
Ustaw umiejscowienie na stronie sklepu i archiwum
W sekcji Strona sklepu otwórz menu rozwijane Umiejscowienie przycisku. Ta jedna kontrolka obejmuje główną stronę sklepu, strony kategorii produktów i inne archiwa produktów. Pięć opcji dobrze współpracuje z kartami produktów Woostify.
Advanced Coupons ma w swoim przewodniku po optymalizacji witryny e-commerce świetną zasadę: czy przycisk jest widoczny z drugiego końca pokoju?
- Prawy górny róg obrazu produktu: Arkusz stylów umieszcza przycisk nad obrazem.
- Lewy górny róg obrazu produktu: Takie samo traktowanie jak w prawym rogu. Wybierz róg, którego nie używają już Twoje odznaki wyprzedaży.
- Nad tytułem produktu: Znajduje się w obszarze zawartości karty Woostify i dziedziczy wyrównanie karty.
- Pod tytułem produktu: Znajduje się pod tytułem, więc długie tytuły przesuwają go w dół, zamiast go zagęszczać.
- Nad przyciskiem Dodaj do koszyka: Utrzymuje akcję zapisywania obok akcji zakupu, nie konkurując z nią.
Trzy umiejscowienia w obszarze zawartości automatycznie dziedziczą wyrównanie Woostify. Ustaw karty produktów na wyśrodkowany tekst, a przycisk zostanie wyśrodkowany. Karty wyrównane do lewej i prawej zachowują się tak samo.
Ustaw umiejscowienie na stronie pojedynczego produktu
Pod sekcją Strona produktu znajdziesz drugą rozwijaną listę Umiejscowienie przycisku. Oba ustawienia działają niezależnie, więc zmiana jednego nie wpływa na drugie.
Cztery umiejscowienia są udokumentowane jako dobrze działające na stronach produktów Woostify.
- Nad przyciskiem Dodaj do koszyka: Umieszcza opcję zapisania przed kupującymi, zanim podejmą decyzję.
- Pod przyciskiem Dodaj do koszyka: Domyślne ustawienie ekranu, które pobiera górny margines 12 pikseli.
- Nad tytułem produktu: Przydatne, gdy podsumowanie produktu jest długie i chcesz, aby akcja zapisania była widoczna wcześnie.
- Pod tytułem produktu: Znajduje się w bloku tytułowym, a nie w kontrolkach zakupu.
Istnieje piąta opcja: W linii z przyciskiem Dodaj do koszyka. Zachęcamy do przetestowania tej pozycji w kontekście własnego układu produktu, aby sprawdzić, czy pasuje do projektu motywu.
Obie listy rozwijane zawierają również opcję Nie pokazuj. Wybranie jej powoduje, że hak renderowania przycisku nie jest rejestrowany w tym kontekście. Jest to czystsze niż ukrywanie przycisku za pomocą CSS.
Wybierz, ile stylów ma się ładować
Nadal na tym samym ekranie znajdź Stylizacja frontendu i ustawienie oznaczone jako Ładowanie CSS frontendu. Określa ono, który arkusz stylów bazowych jest ładowany. Następnie arkusz stylów Woostify jest ładowany na wierzchu wybranego przez Ciebie.
- Pełna stylizacja: Używa własnych kolorów i czcionek wtyczki. Jest to domyślne ustawienie fabryczne.
- Minimalna stylizacja: Pozwala motywowi nadpisać kolory i czcionki.
- Brak stylizacji: Ładuje tylko pozycjonowanie i dziedziczy wszystko wizualne z Woostify.
Czy dostosowałeś już typografię i kolory Woostify? W takim razie opcje Minimalne lub Brak stylizacji zazwyczaj dają bardziej natywny rezultat. Co ważne, zasady układu Woostify pozostają aktywne we wszystkich trzech trybach. Nie rezygnujesz z integracji, aby uzyskać kolory motywu.
Każdy tryb ładuje inny plik arkusza stylów, więc Twój wybór zmienia również to, co pobiera przeglądarka. Jeśli ważna jest dla Ciebie waga frontendu, nasz test prędkości wtyczki WooCommerce wishlist mierzy, co SaveTo Wishlist faktycznie dodaje do strony.
Dwa umiejscowienia, których należy unikać w Woostify
Aby zapewnić najczystszy układ od razu po wyjęciu z pudełka, oto dwie opcje umiejscowienia, których będziesz chciał uniknąć w przypadku Woostify.
- Na stronach sklepu i archiwum unikaj opcji Poniżej przycisku Dodaj do koszyka. Woostify renderuje ten wiersz w obszarze o stałej wysokości z animacją na kartach produktów na pulpicie. Przycisk listy życzeń może zostać tam przycięty, ukrywając jego część lub całość.
- Na pojedynczych stronach produktów unikaj dwóch opcji umiejscowienia na obrazku. Woostify używa niestandardowej galerii produktów, a przyciski w rogu nie wyświetlają się w niej niezawodnie.
Te zalecenia są specyficzne dla kontekstu. Narożniki obrazków świetnie wyglądają na kartach sklepowych, ale nie są idealne dla galerii produktów, podczas gdy opcja Poniżej przycisku Dodaj do koszyka działa najlepiej na pojedynczych stronach produktów. Niezależne ustawienie każdego kontekstu sprawia, że przyciski wyglądają schludnie na wszystkich szablonach.
⚙️ Ważny krok konfiguracji: SaveTo Wishlist Lite 1.1.1 nie stosuje automatycznie opcji umiejscowienia po aktywacji. Jeśli pozostawisz je bez zmian, oba konteksty używają wartości domyślnych — Górny prawy róg obrazka produktu na stronach produktów i Poniżej przycisku Dodaj do koszyka na stronach sklepu. W przypadku Woostify aktualizacja tych domyślnych ustawień zapewnia idealne dopasowanie przycisków do układu motywu.
Poprawka zajmuje sekundy: Otwórz oba menu rozwijane umiejscowienia, wybierz zalecane opcje i naciśnij Zapisz, nawet jeśli wartości na ekranie wyglądają już poprawnie. Zapisanie zapisuje opcje w bazie danych i kończy zgadywanie.
Jak potwierdzić ładowanie stylów Woostify
Ponieważ nie ma ustawienia do sprawdzenia, weryfikacja odbywa się w przeglądarce. Zajmuje to około minuty.
- Potwierdź, że Woostify lub motyw potomny Woostify jest aktywny w sekcji Wygląd → Motywy.
- Załaduj dowolną stronę frontendu i otwórz narzędzia deweloperskie swojej przeglądarki.
- Wyszukaj w kodzie źródłowym strony plik
savetowishlist-woostify.css. Ten plik to integracja. - Sprawdź kolejność. Musi zostać załadowany po głównym arkuszu stylów frontendu SaveTo Wishlist, ponieważ od niego zależy.
- Sprawdź przycisk. W przypadku umiejscowienia w rogu kontener powinien mieć wartość
z-index: 3. - W podsumowaniu pojedynczego produktu ten kontener powinien mieć górny margines o wielkości 12 pikseli.
Jeśli plik się nie pojawia, sprawdź ponownie identyfikator swojego szablonu. Wykrywanie dopasowuje woostify dokładnie, więc motyw, który został zmieniony lub rozwidlony od tego identyfikatora, nie wywoła arkusza stylów.
Ponieważ wykrywanie działa cicho w tle bez wyskakujących okienek dla administratorów, szybkie sprawdzenie w narzędziach deweloperskich potwierdzi, że Twoje zasoby ładują się doskonale.
Pracujesz głębiej w kodzie? Nasz przewodnik po interfejsie API REST listy życzeń obejmuje programowy dostęp.
Listy życzeń dla gości są ważniejsze niż stylizacja
Jedno ustawienie robi więcej dla Twojego wskaźnika zapisów niż jakakolwiek decyzja dotycząca stylizacji. Chodzi o to, czy niezalogowani kupujący w ogóle mogą używać przycisku.
Kontrolka to Wyłącz listę życzeń dla gości i domyślnie jest wyłączona. Oznacza to, że goście mogą zapisywać. Włącz ją, a SaveTo Wishlist Lite przestanie rejestrować swoje haki przycisków sklepu i produktu dla niezalogowanych gości. Przycisk w ogóle się nie pojawi.
Zdecydowanie zalecamy pozostawienie tej domyślnej opcji włączonej. Analiza stron produktów przeprowadzona przez Baymard wykazała, że 89% witryn nie udostępnia łatwo funkcji zapisywania dla gości, co oznacza, że masz świetną okazję, aby się wyróżnić. Tymczasem 21% ankietowanych kupujących twierdzi, że polega na funkcjach zapisywania. Ta luka to Twoja szansa.
Ta sama logika napędza kasę gościnną WooCommerce: usprawnienie kluczowych działań dla gości zwiększa zaangażowanie i konwersje.
Integracja Woostify nie rozgałęzia się w zależności od statusu logowania. Goście i zalogowani klienci otrzymują te same umiejscowienia i te same zasady układu. Nie ma oddzielnej stylizacji dla gości do skonfigurowania.
Wytyczne dotyczące zakresu i kompatybilności
Arkusz stylów celuje w standardowe znaczniki WooCommerce i Woostify. Tam, gdzie Twój sklep odchodzi od tych znaczników, reguły przestają pasować.
- Kreatory stron i siatki produktów blokowych: Zaprojektowane dla standardowych znaczników kart Woostify; niestandardowe siatki blokowe należy sprawdzić wizualnie.
- Interfejsy szybkiego podglądu: Używa standardowego umiejscowienia przycisków; przejrzyj układ modalny, aby zapewnić prawidłowe wyrównanie.
- Niestandardowe pętle produktów: Pętla zbudowana w niestandardowym szablonie znajduje się poza zakresem testów.
- Moduły premium Woostify i wtyczki towarzyszące: Nie ustalono dla nich kompatybilności.
- Zachowanie strony koszyka: Układy koszyka są obsługiwane oddzielnie i nie są objęte tą konkretną integracją Woostify.
Ten arkusz stylów koncentruje się konkretnie na podstawowych układach listy życzeń w SaveTo Wishlist Lite. Jeśli używasz zaawansowanych rozszerzeń (takich jak funkcje SaveTo Wishlist Pro lub Dodatek do rejestru prezentów), szybki przegląd wizualny zapewni, że wszystko renderuje się zgodnie z oczekiwaniami.
Podczas gdy podstawowe funkcje przechodzą ciągłe testy automatyczne, niestandardowe style motywów najlepiej zweryfikować szybkim sprawdzeniem wizualnym w Twoim sklepie na żywo.
Niestandardowe układy i specjalne typy produktów (takie jak niedostępne lub niemożliwe do zakupu) po prostu warto szybko sprawdzić wizualnie w Twoim sklepie na żywo, aby upewnić się, że przycisk renderuje się dokładnie tam, gdzie chcesz.
Czy Twój sklep opiera się na którymś z nieobjętych kontekstów? Nasz przewodnik po integracji tabeli produktów pokazuje, jak obsługiwany jest inny kontekst układu.
Często zadawane pytania: SaveTo Wishlist i Woostify
Czy muszę włączyć integrację Woostify?
Nie. Nie ma strony ustawień Woostify, przełącznika ani opcji kontrolującej samodzielnie arkusz stylów. SaveTo Wishlist Lite sprawdza identyfikator aktywnego szablonu podczas ładowania zasobów front-endowych. Jeśli odczyta woostify, arkusz stylów zostanie automatycznie dodany.
Czy działa z motywem potomnym Woostify?
Tak. Detekcja sprawdza identyfikator szablonu nadrzędnego, a nie identyfikator własnego motywu potomnego. Dopóki szablon nadrzędny to nadal woostify, arkusz stylów kompatybilności ładuje się normalnie.
Czy potrzebuję do tego SaveTo Wishlist Pro?
Nie. Arkusz stylów kompatybilności Woostify jest dostępny w SaveTo Wishlist Lite, darmowej wersji, od wydania 1.1.1. Płatne plany dodają analizy list życzeń, powiadomienia o obniżce cen i powiadomienia o dostępności. Żadne z nich nie są wymagane do obsługi układu Woostify.
Która wersja Woostify jest obsługiwana?
SaveTo Wishlist Lite automatycznie obsługuje aktualne wersje Woostify poprzez identyfikację szablonu, zapewniając pełną elastyczność podczas aktualizacji motywu. Zawsze zalecamy szybkie wizualne sprawdzenie aktywnej wersji motywu podczas dostosowywania układów.
Daj przyciskowi zapisu miejsce do życia
Integracja Woostify została zaprojektowana tak, aby była lekka, szybka i bezproblemowa. Eliminuje problemy z układem, dzięki czemu Twoje przyciski zapisywania wyglądają jak naturalna, wbudowana część Twojego motywu, działając cicho w tle bez dodawania niepotrzebnego obciążenia.
Pozostaje tylko wybrać umiejscowienia, które najlepiej podkreślą Twoje produkty i pasują do stylu Twojego sklepu.
- Potwierdź wymagania i że Woostify jest aktywnym szablonem (czego potrzebujesz).
- Otwórz oba rozwijane menu umiejscowienia i zapisz je jawnie, nawet jeśli wyglądają poprawnie (jak skonfigurować).
- Wybierz zalecane pozycje układu dla archiwów sklepu i stron pojedynczych produktów (umiejscowienia, których należy unikać).
- Sprawdź, czy arkusz stylów kompatybilności jest ładowany, aby zweryfikować konfigurację motywu (jak potwierdzić).
- Pozostaw włączone listy życzeń dla gości, aby zmaksymalizować liczbę zapisów przez kupujących (listy życzeń dla gości).
- Przejrzyj siatki kreatora stron, szybkie podglądy i niestandardowe pętle na swojej stronie na żywo (ograniczenia).
Twoje przyciski listy życzeń Woostify powinny wyglądać tak, jakby zostały zaprojektowane razem z Twoim motywem, a nie dodane później. Nasz przewodnik konfiguracji Woostify przeprowadzi Cię przez ekran ustawień. Lub porównaj, co zawiera każdy plan na stronie cenowej SaveTo Wishlist.
