Przycisk listy życzeń Elementor: Jak go dodać za pomocą SaveTo Wishlist

Budujesz swoje strony produktów w Elementor i wszystko wygląda dobrze. Następnie zauważasz, że przycisk listy życzeń Elementor zniknął. Nie jest źle umieszczony. Po prostu go nie ma.

Ustawienia Twojej wtyczki obiecują przycisk. Twoja strona produktu nic nie pokazuje. Nie ma nawet błędu do śledzenia.

Ta cisza kosztuje. Przycisk listy życzeń, którego nikt nie widzi, to zapis, który nigdy nie następuje. A zapis, który nigdy nie następuje, to kupujący, do którego nie możesz wrócić.

SaveTo Wishlist wysyła dwie integracje Elementora, które wypełniają lukę. Przejdziemy przez konfigurację obu, wybór właściwej i co zrobić z zapisanymi elementami później.

Przejdź do:

---

Dlaczego przycisk listy życzeń znika na stronach produktów Elementor

Przycisk wymaga ręcznego kroku, ponieważ Elementor opiera się na niestandardowych widżetach wizualnych, a nie na tradycyjnych szablonach WooCommerce PHP.

SaveTo Wishlist umieszcza swój przycisk za pomocą haków akcji WooCommerce. Standardowy szablon produktu wyzwala te haki w określonych punktach. Dzięki temu wtyczka zawsze wie, gdzie wstawić przycisk.

Jednak szablon Elementor jest montowany z widżetów Elementora. Jeśli używasz niestandardowego przycisku dodawania do koszyka, te haki nigdy się nie uruchamiają. W rezultacie wtyczka nie ma się do czego podłączyć.

Strony archiwum napotykają te same ograniczenia haków, tylko na szerszą skalę. Elementor Pro Loop Grid w ogóle nie renderuje klasycznej pętli sklepu. Zamiast tego renderuje szablon elementu pętli, który zaprojektowałeś. Ponieważ używa niestandardowego układu zamiast domyślnych haków pętli sklepu, przycisk wymaga ręcznego umieszczenia.

Tym, co utrudnia diagnozę, jest to, że dzieje się to po cichu. Nie pojawia się żaden błąd. Żadne ostrzeżenie nie pokazuje się w Twoim panelu administracyjnym. I żadne ustawienie we wtyczce tego nie naprawia.

To nie jest też niszowy stos. Według W3Techs, Elementor działa na 12,8% wszystkich stron internetowych.

🔍️ Co widzieliśmy: Właściciele sklepów często zgłaszają się do wsparcia z obawą, że wtyczka nie działa. Rzeczywistość to po prostu różnica w architekturze. Renderowanie przycisku działa dobrze, ale musi być jawnie umieszczone w szablonie Elementora.

---

Co faktycznie robią dwie integracje Elementor

SaveTo Wishlist obsługuje Elementor w dwóch oddzielnych częściach. Której potrzebujesz, zależy od Twojej licencji Elementora.

Możliwość	Co robi	Wymagany Elementor	Dodano w
Widżet Zapisz do listy życzeń	Natywny widżet Elementora, który przeciągasz do dowolnego szablonu, aby ręcznie umieścić przycisk	Darmowy Elementor lub Pro	1.1.3
Umieszczanie pętli w siatce i karuzeli	Automatyczne umieszczanie przycisku na każdej karcie produktu, sterowane przez istniejące ustawienie strony sklepu	Elementor Pro	1.1.2

Oba są dostępne w SaveTo Wishlist Lite, darmowej wtyczce, więc posiadacze licencji Pro również je dziedziczą. Zaktualizuj do wersji 1.1.3 lub nowszej, a będziesz mieć oba.

Twoja trasa zależy od licencji. Twórz strony produktów w darmowym Elementorze, a widżet będzie Twoją opcją. Loop Grid, Loop Carousel i Theme Builder to funkcje Elementor Pro.

W praktyce większość sklepów Pro używa obu. Automatyczne umieszczanie obsługuje archiwa. Widżet obsługuje szablon pojedynczego produktu.

Jedno rozróżnienie oszczędza wiele późniejszych nieporozumień. Widżet Elementora umieszcza przycisk listy życzeń na produkcie. Nie wyświetla samej listy życzeń. Do tego użyj bloku listy życzeń lub skróconego kodu [saveto_wishlist].

---

Czego potrzebujesz przed rozpoczęciem

Cztery rzeczy muszą być na miejscu, zanim widżet cokolwiek wyrenderuje.

• Elementor, darmowy lub Pro: widżet działa w obu. Loop Grid i Loop Carousel wymagają Elementor Pro.
• SaveTo Wishlist Lite 1.1.3 lub nowszy: wcześniejsze wersje nie zawierają widżetu. Sprawdź swoją wersję w Plugins.
• WooCommerce z opublikowanym produktem: widżet renderuje się tylko tam, gdzie jest produkt, z którym można pracować.
• Szablon powiązany z produktem: szablon pojedynczego produktu, szablon elementu pętli lub strona świadoma produktu.

Poza tym nie ma oddzielnego kroku konfiguracji. Widżet odczytuje Twoje istniejące ustawienia listy życzeń. Więc umieszczony bez zmian renderuje ten sam przycisk, który już pokazuje Twój sklep.

---

Jak dodać przycisk listy życzeń za pomocą widżetu Elementor

Dodanie widżetu wymaga czterech kroków. Jego stylizacja wymaga trzech kolejnych.

Upuść widżet na swój szablon

1. Otwórz szablon produktu lub stronę, którą chcesz edytować w Elementorze.
2. Wyszukaj w panelu widżetów Save to Wishlist.
3. Przeciągnij widżet na swój układ, tam gdzie chcesz umieścić przycisk.
4. Kliknij Aktualizuj, aby zapisać.

Widżet znajduje się zarówno w kategoriach WooCommerce, jak i Ogólne. Przeglądanie działa równie dobrze jak wyszukiwanie. Wpisanie wishlist, save, favorite lub favourite również go wyświetli.

Renderuje się od razu, używając Twoich bieżących ustawień listy życzeń. Oznacza to, że widzisz prawdziwy przycisk na płótnie, a nie szary symbol zastępczy.

Wybierz typ przycisku

Typ przycisku znajduje się w sekcji Przycisk listy życzeń w zakładce Treść. To jedyne ustawienie tam.

Dziesięć stylów jest dostarczanych z widżetem:

• Tylko tekst, Tylko ikona i Ikona i tekst
• Pigułka z ikoną i tekstem, Ikona solidna i Ikona solidna i tekst
• Pigułka z ikoną i tekstem solidna, Ikona minimalistyczna i Ikona minimalistyczna i tekst
• Minimalna pigułka z ikoną i tekstem

Warianty pigułki używają w pełni zaokrąglonych rogów. Solidny wypełnia kształt ikony, podczas gdy Minimalistyczny używa lżejszego obrysu.

Kontrolka domyślnie przyjmuje styl przycisku produktu z ustawień listy życzeń. Zmiana tutaj wpływa na ten jeden widżet, a nie na cały Twój sklep.

Ustaw wyrównanie

Wyrównanie znajduje się w zakładce Styl w sekcji Układ. Tam Elementor przechowuje wyrównanie dla swoich własnych widżetów.

Otwórz Układ, a następnie ustaw Wyrównanie na Lewo, Środek lub Prawo. Domyślnie jest to Lewo.

Zmień kolory przycisków

Sekcja Kolory na karcie Styl daje Ci osiem kontrolek. Każda z nich ma stan normalny i najechany: Kolor tekstu, Kolor tła, Kolor obramowania i Kolor ikony.

Każdy selektor zaczyna od koloru już zapisanego w ustawieniach listy życzeń. Więc nietknięty widżet pasuje do reszty Twojego sklepu.

Zmiana jednego z nich nadpisuje ten kolor tylko dla tego widżetu. Pomaga to, gdy pojedynczy szablon znajduje się na ciemnej sekcji lub tle zdjęcia.

Kolory to jedyne, co widżet nadpisuje. Rozmiar, dopełnienie, szerokość obramowania i kształt ikony znajdują się gdzie indziej.

Znajdziesz je w SaveTo Wishlist > Ustawienia > Umieszczanie przycisków i style. Dzięki temu stylizujesz je raz, a wszystkie przyciski podążają za tym.

Jedno ograniczenie warto znać od razu. Selektory akceptują tylko jednolite kolory, bez suwaka przezroczystości i zakładki kolory globalne.

Dzieje się tak, ponieważ przycisk listy życzeń przechowuje zwykłe wartości szesnastkowe. Kolor globalny byłby poprawnie wyświetlany w podglądzie, ale nie przeniósłby się na stronę na żywo, więc opcja jest wyłączona, aby zapewnić dokładność ustawień.

Ten sam samouczek z przechwyconym każdym ekranem znajdziesz w naszym przewodniku po widżecie Elementor w bazie wiedzy.

---

Jak wyświetlić przycisk listy życzeń w Loop Grid i Loop Carousel

Z Elementor Pro masz dwie ścieżki do kart produktów. Pasują do różnych poziomów kontroli.

Pozwól wtyczce umieścić go za Ciebie

Twoje istniejące umiejscowienie na stronie sklepu już dotyczy kart Loop Grid i Loop Carousel.

Przejdź do SaveTo Wishlist > Ustawienia > Strona sklepu, wybierz umiejscowienie, a następnie zapisz. Przycisk pojawi się na każdej karcie bez dotykania szablonu.

W tle integracja kotwiczy się do czterech widżetów Elementor w szablonie elementu pętli:

• Obraz produktu: przenosi umiejscowienia zakotwiczone na obrazie produktu.
• Tytuł produktu: przenosi umiejscowienia zakotwiczone na tytule.
• Dodaj do koszyka produkt: przenosi umiejscowienia nad lub pod przyciskiem.
• Dodaj do koszyka: druga wariant przycisku dodawania do koszyka Elementora, traktowany w ten sam sposób.

Twój szablon elementu pętli potrzebuje co najmniej jednego z tych czterech. Gdy karta jest zbudowana w całości z niestandardowych widżetów, wtyczka po prostu wymaga ręcznego umieszczenia przycisku.

Jeśli szablon zawiera oba warianty dodawania do koszyka, kotwica nadal uruchamia się raz na kartę. Dzięki temu przycisk nigdy nie jest podwajany.

Nie używasz siatki? Ten sam przycisk omawiamy w tabelach produktów WooCommerce.

Umieść widżet samodzielnie

Edytuj szablon elementu pętli i upuść widżet Save to Wishlist w układzie karty. Uzyskujesz dokładną kontrolę nad tym, gdzie przycisk znajduje się na każdej karcie.

Jest jedno zachowanie, które należy wziąć pod uwagę. Wewnątrz elementu pętli wtyczka traktuje Twój widżet jako przycisk na kartę, a nie jako duplikat. Umieszczenie w sklepie pozostaje renderowane obok niego.

Wybierz więc jedną lub drugą ścieżkę. Jeśli umieszczasz widżet ręcznie, ustaw umiejscowienie strony sklepu na Nie pokazuj. W przeciwnym razie każda karta będzie miała dwa przyciski.

🔍️ Co zaobserwowaliśmy: strona pojedynczego produktu działa inaczej i to wprawia ludzi w błąd. Umieść widżet w szablonie produktu Elementor, a wtyczka wyłączy własne umiejscowienie strony produktu. Wyjątkiem są elementy pętli, więc wymagają one powyższego ręcznego kroku.

---

Gdzie umieścić przycisk, aby kupujący faktycznie go użyli

Gdy możesz umieścić przycisk w dowolnym miejscu, trudniejsze pytanie brzmi, gdzie przynosi najwięcej zapisów.

Zacznij od tego, dlaczego kupujący odchodzą. Według Baymard Institute średni udokumentowany wskaźnik porzuceń koszyka w 50 badaniach wynosi 70,22%.

Co jeszcze bardziej wymowne, 42% amerykańskich kupujących online twierdzi, że porzuciło koszyk, ponieważ tylko przeglądali. Ci ludzie nie odrzucają Twojego produktu. Mają złe wyczucie czasu.

Advanced Coupons ma przewodnik po zmniejszaniu liczby porzuconych koszyków, jeśli chcesz również zająć się stroną realizacji zakupu.

Lista życzeń to jedyna rzecz na stronie stworzona, aby je przechwycić. To zmienia przeznaczenie przycisku. Jest to druga akcja dla każdego, kto dziś nie kupuje.

Trzy zasady umieszczania sprawdzają się w większości sklepów:

• Umieść go w obszarze zakupu: umieść przycisk obok ceny i przycisku Dodaj do koszyka. Kupujący, który zastanawia się, czy odejść, patrzy właśnie tam.
• Nadaj mu mniejszą wagę wizualną niż Dodaj do koszyka: istnieją typy Minimalny i Tylko ikona. Przycisk listy życzeń stylizowany zbyt krzykliwie konkuruje ze sprzedażą, na której Ci zależy dzisiaj.
• Na kartach preferuj róg obrazu lub miejsce pod tytułem: przestrzeń na karcie jest ograniczona. Przycisk o pełnej szerokości poniżej Dodaj do koszyka narusza wyrównanie siatki na mniejszych ekranach.

Zagłębiamy się w obie powierzchnie w naszych poradnikach dotyczących najlepszych praktyk na stronie produktu i najlepszych praktyk na stronie sklepu.

Umieszczenie przycisku na kartach Loop Grid ma większe znaczenie, niż mogłoby się wydawać. Większość porzuceń przeglądania ma miejsce w archiwum, zanim kupujący otworzy stronę produktu.

Więc jeśli Twój jedyny przycisk znajduje się w szablonie produktu, przechwytujesz nielicznych, którzy klikną. Wszyscy inni prześlizgują się obok.

---

Pięć sposobów na wykorzystanie zapisów z listy życzeń Elementor

Zapis jest wart dokładnie tyle, ile zrobisz z nim później. Pięć działań zamienia rosnącą listę życzeń w przychody.

1. Wyzwalaj powiadomienia o spadku cen: gdy cena zapisanego produktu spadnie, kupujący dowie się o przedmiocie, którego już pragnął. Zobacz, jak działają powiadomienia o spadku cen na liście życzeń.
2. Wysyłaj powiadomienia o ponownym dostępności: wyprzedany produkt znajdujący się na liście życzeń to zamówienie w kolejce. Poinformowanie kupującego o ponownej dostępności jest lepsze niż nadzieja, że wróci.
3. Odczytuj zapisy jako dane o popycie: produkty często zapisywane i rzadko kupowane mówią coś o cenie, wysyłce lub opisie strony. Analityka list życzeń uwidacznia ten wzorzec.
4. Segmentuj według intencji: kupujący z pięcioma zapisami i zerem zamówień potrzebuje innego e-maila niż powracający klient. Aktywność na liście życzeń daje Ci segment, którego historia zamówień nigdy by nie zapewniła.
5. Planuj kampanie sezonowe wokół zapisanych przedmiotów: sezony prezentowe nagradzają sklepy, które wiedzą, czego chce każdy klient. Lista życzeń to właśnie ta lista, podana dobrowolnie, a nie zgadywana.

Warto jasno określić, które części są darmowe. Wszystko powyższe dotyczące umieszczania przycisku listy życzeń Elementora jest dostarczane w darmowym wtyczce Lite.

Analityka, alerty o obniżce cen, e-maile o dostępności i webhooki to funkcje Pro. Zaczynają się one w planie Growth.

Niezależnie od tego, jakie zagrania zastosujesz, wskaźnik konwersji listy życzeń jest liczbą, na którą należy zwrócić uwagę. Mówi Ci, czy zapisy zamieniają się w zamówienia.

Visser Labs obejmuje analizę raportów Twojego sklepu, jeśli chcesz uzyskać szerszy obraz.

---

Problemy z listą życzeń Elementor i jak je naprawić

Cztery problemy odpowiadają za większość tego, co idzie nie tak. Każdy z nich ma określoną przyczynę.

Przycisk w ogóle się nie pojawia

Przejdź przez nie w tej kolejności.

1. Brak produktu w kontekście. Widżet renderuje się tylko tam, gdzie WooCommerce ma produkt do pracy. Pusta strona nic mu nie daje, więc pozostaje pusty. Przenieś go do szablonu pojedynczego produktu, elementu pętli lub strony, która ustawia produkt.
2. Listy życzeń gości są wyłączone. Jeśli opcja Wyłącz listy życzeń gości jest włączona, a Ty jesteś wylogowany, przycisk jest celowo ukryty. Zaloguj się lub zastanów się, czy zezwalanie na listy życzeń gości pasuje do Twojego sklepu.
3. Wtyczka jest starsza niż 1.1.3. Widżet nie istnieje we wcześniejszych wersjach. Zaktualizuj SaveTo Wishlist, a pojawi się w panelu.

Dwa przyciski listy życzeń wyświetlane na stronie produktu

Ten problem zazwyczaj rozwiązuje się sam. Kiedy Twój szablon produktu Elementora zawiera widżet, wtyczka dezaktywuje własne umiejscowienie pojedynczego produktu.

Produkty powiązane, upsell i cross-sell są celowo pozostawione w spokoju. Te karty są renderowane przez umiejscowienie w sklepie.

Więc drugi przycisk tam to ustawienie sklepu wykonujące swoją pracę. Zmieniasz je w SaveTo Wishlist > Ustawienia > Umiejscowienie i style przycisku.

Selektory kolorów nic nie robią

Dwa ustawienia wyłączają kontrolki kolorów. Każde z nich wyświetla komunikat w panelu Elementora wyjaśniający dlaczego.

Jeśli tryb przycisku produktu jest ustawiony na Domyślny motyw, przycisk dziedziczy stylizację Twojego motywu. Wtyczka nie stosuje własnych kolorów. Przełącz tryb na Predefiniowany, aby przejąć kontrolę.

Jeśli ikona Twojej listy życzeń to niestandardowy przesłany obraz, dwie kontrolki koloru ikony nic nie robią. Przesłany obraz nie może być barwiony. Zamień go na wbudowany kształt ikony, jeśli kontrola koloru jest ważniejsza.

Zamiast listy ulubionych pojawia się układ bloga

Jeśli link do listy życzeń otwiera Twój projekt archiwum postów, warunek wyświetlania Elementor Theme Builder prawdopodobnie stosuje się zbyt szeroko. Dzieje się tak, gdy warunek wyświetlania tego szablonu dotyczy archiwum postów.

Ten warunek pasuje również do poszczególnych widoków list życzeń. Oto poprawka:

1. Otwórz Szablony > Kreator motywów i wybierz szablon archiwum.
2. Otwórz jego Warunki wyświetlania.
3. Usuń warunek, który dotyczy archiwum wpisów.
4. Zamiast tego zbuduj archiwum wpisów jako samodzielną stronę.

---

Najczęściej zadawane pytania: Przycisk listy życzeń Elementor

---

Podsumowanie

Wyświetlanie przycisku listy życzeń Elementor nigdy nie polegało na stylizacji. Chodziło o wypełnienie luki między tradycyjnymi hakami WordPress a niestandardowymi kreatorami wizualnymi.

Obie części tej luki są teraz zamknięte, zarówno w darmowym Elementorze, jak i w Elementorze Pro.

Konfiguracja jest łatwa i zajmuje minuty. Prawdziwa praca polega na zdecydowaniu, gdzie przycisk się znajduje. Następnie trzeba zdecydować, co się stanie, gdy kupujący go użyje.

Oto, co należy zrobić dalej:

• Zaktualizuj do wersji 1.1.3 lub nowszej, a następnie sprawdź która ścieżka Elementora pasuje do Twojej licencji.
• Przeciągnij widżet Save to Wishlist na swój szablon produktu i wybierz typ przycisku.
• Włącz karty Loop Grid i Loop Carousel za pomocą umiejscowienia na stronie sklepu.
• Umieść przycisk wewnątrz pola zakupu i na kartach produktów, nie tylko w jednym miejscu.
• Wykorzystaj zapisy do pracy z powiadomieniami, segmentami i danymi o popycie.

Gotowy, aby umieścić przycisk listy życzeń Elementora na każdym produkcie w Twoim sklepie? Zacznij od SaveTo Wishlist Lite za darmo lub zobacz, co dodają plany Growth, Plus i Business.