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 koliduje z własnymi kontrolkami motywu. W niektórych układach jest przycinany wewnątrz karty 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 list produktów Baymard wykazał, że 80% witryn e-commerce ma poważne problemy z listami produktów. Czysty, przemyślany układ to łatwy sposób na wyróżnienie się.
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 to jeden arkusz stylów kompatybilności, który ładuje się samodzielnie. Nie ma żadnego kroku konfiguracji ani ekranu ustawień, którego trzeba by szukać.
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 sprawdza, czy WooCommerce jest aktywny, zanim się uruchomi. Jeśli WooCommerce nie jest aktywny, wtyczka wyświetla komunikat o błędzie w panelu administracyjnym i nie ładuje swojego głównego kontrolera.
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.
Drugą stroną medalu jest to, że żadna wersja Woostify nie została zadeklarowana ani przetestowana dla tej integracji. Wykrywanie opiera się wyłącznie na identyfikatorze motywu. Dlatego poświęć chwilę na przejrzenie swoich stron w dowolnej wersji Woostify, którą uruchamiasz, i ponownie po jej zaktualizowaniu.
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 przycisku. Będziesz potrzebować dostępu administratora (manage_options), aby go otworzyć.
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.
- Górny lewy róg obrazu produktu: Takie samo traktowanie jak w prawym rogu. Wybierz dowolny wolny róg w projekcie karty.
- 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: Umieszcza akcję zapisywania bezpośrednio nad akcją zakupu.
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. Dokumentacja nie zaleca jej dla Woostify i nie wyklucza jej również. Przetestuj ją na własnym układzie produktu, zanim się na nią zdecydujesz.
Oba menu rozwijane zawierają również opcję Nie pokazuj. Wybranie jej powoduje, że hak renderowania przycisku nie jest rejestrowany w tym kontekście. Przycisk nigdy nie jest tworzony, zamiast być tworzonym, a następnie ukrywanym.
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 dostroiłeś już typografię i kolory Woostify? W takim razie Minimalne lub Brak stylizacji zazwyczaj daje bardziej naturalny 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 stylów, więc Twój wybór zmienia również to, co przeglądarka pobiera. Jeśli ważna jest dla Ciebie waga frontendu, nasz test prędkości wtyczki WooCommerce do listy życzeń 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ł ominąć dla Woostify.
- Na stronach sklepu i archiwum unikaj opcji Poniżej przycisku Dodaj do koszyka. Woostify renderuje ten wiersz w animowanym obszarze o stałej wysokości na karcie produktu na pulpicie. Przycisk listy życzeń może zostać tam przycięty, ukrywając jego część lub całość.
- Na stronach pojedynczych 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.
Zauważ, że porady odwracają się między dwoma kontekstami. Narożniki obrazu są zalecane na stronach sklepu i archiwum, ale odradzane na stronach pojedynczych produktów. Opcja Poniżej przycisku Dodaj do koszyka działa odwrotnie. To właśnie dlatego dwa menu rozwijane są oddzielne, więc ustaw każde z nich osobno.
⚙️ Ważny krok konfiguracji: SaveTo Wishlist Lite 1.1.1 nie zapisuje opcji umiejscowienia w sklepie i na produktach po ich aktywacji. Pozostawia to dwie różne odpowiedzi na pytanie „jaki jest domyślny?” Ekran ustawień pokazuje Poniżej przycisku Dodaj do koszyka dla obu kontekstów. Ale dopóki opcja nie zostanie zapisana, frontend wraca do Górny prawy róg obrazka produktu dla obu. W Woostify jedna z tych dwóch wartości jest umiejscowieniem, którego należy unikać w każdym kontekście, więc nie zakładaj, że ekran ustawień pokazuje Ci, co faktycznie widzą kupujący.
Naprawa zajmuje sekundy: otwórz oba menu rozwijane umiejscowienia, wybierz żądane umiejscowienie i naciśnij Zapisz, nawet jeśli wartość na ekranie wygląda już poprawnie. Zapisanie zapisuje opcję w bazie danych, a od tego momentu ekran i frontend zgadzają się.
Jak potwierdzić ładowanie stylów Woostify
Ponieważ nie ma ustawienia do sprawdzenia, weryfikacja odbywa się w przeglądarce. Zajmuje to około minuty.
- Sprawdź, czy 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
savetowishlist-woostify.css. Ten plik jest integracją. - Sprawdź kolejność. Musi być ładowany po głównym arkuszu stylów frontendu SaveTo Wishlist, ponieważ od niego zależy.
- Na stronie sklepu lub archiwum używającej umiejscowienia w rogu, sprawdź przycisk. Jego 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 odłączony od tego identyfikatora, nie wywoła arkusza stylów.
Nieudane dopasowanie jest całkowicie ciche. Bez błędów, ostrzeżeń ani powiadomień administratora. Narzędzia deweloperskie to jedyne miejsce, w którym się pojawia, dlatego ta kontrola jest warta minuty Twojego czasu.
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.
Pozostawilibyśmy ją wyłączoną. Analiza stron produktów przeprowadzona przez Baymard wykazała, że 89% badanych stron nie ułatwia dostępu do funkcji zapisywania i korzystania z nich. W osobnym badaniu 1193 kupujących stwierdziło, ż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ć.
- Kreator stron i siatki produktów blokowych: Zasady dotyczą standardowego znacznika kart Woostify. Siatki zbudowane w kreatorze stron lub złożone z bloków produktów wykraczają poza ten zakres, więc sprawdź je wizualnie.
- Interfejsy szybkiego podglądu: Nie ma obsługi specyficznej dla Woostify dla modalnych okien szybkiego podglądu, więc sprawdź swoje wizualnie.
- 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: Strona koszyka znajduje się poza tą integracją. Żaden kod koszyka specyficzny dla Woostify nie jest jej częścią.
Dokumentacja obejmuje SaveTo Wishlist Lite. Nie ustala ona kompatybilności Woostify dla SaveTo Wishlist Pro ani Dodatku Rejestr Prezentów, więc sprawdź je wizualnie, jeśli ich używasz.
Jeszcze jedna rzecz warta uwagi: żaden zautomatyzowany test w pakiecie wtyczki nie włącza Woostify ani nie sprawdza tych zasad zgodności. Ogólne testy przycisków działają na standardowym motywie. Układ Woostify jest potwierdzany przez jego oglądanie.
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?
Wtyczka w ogóle nie sprawdza wersji Woostify. Sprawdza tylko, czy identyfikator motywu to woostify, więc dla tej integracji nie jest zadeklarowana żadna minimalna, maksymalna ani testowana wersja. Dzięki temu działa ona z aktualizacjami motywu, i dlatego warto wykonać szybkie sprawdzenie wizualne po aktualizacji.
Daj przyciskowi zapisu miejsce do życia
Integracja Woostify jest celowo niewielka. Jeden arkusz stylów, brak JavaScript, brak punktów końcowych REST, brak rekordów w bazie danych, brak strony ustawień. Obsługuje układ, dzięki czemu Twój przycisk zapisywania wygląda jak część Twojego motywu, a nie coś dołączonego później.
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.
