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

Budujesz swoje strony produktowe w Elementor i wszystko wygląda dobrze. Następnie zauważasz, że przycisk listy życzeń Elementora zniknął. Nie jest przesunięty. Zniknął.

Ustawienia Twojej wtyczki obiecują przycisk. Twoja strona produktowa 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, którego nie możesz przyciągnąć z powrotem.

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 Elementora

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 uruchamia te haki w określonych punktach. Dzięki temu wtyczka zawsze wie, gdzie wstrzyknąć przycisk.

Jednak szablon Elementora jest składany z widżetów Elementora. Jeśli Twój używa 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.

To, co czyni to trudnym do zdiagnozowania, to fakt, ż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 zaobserwowaliśmy: Właściciele sklepów często zgłaszają się do wsparcia, martwiąc się, ż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 Elementora

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 na liście ż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 w Loop Grid i Loop Carousel	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 Elementora

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 przycisku

Sekcja Kolory w zakładce Styl daje Ci osiem kontrolek. Każda z nich ma stan normalny i stan najazdu: Kolor tekstu, Kolor tła, Kolor obramowania i Kolor ikony.

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

Zmień jeden i 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 nadpisuje widżet. Rozmiar, dopełnienie, szerokość obramowania i kształt ikony znajdują się gdzie indziej.

Znajdziesz je w sekcji SaveTo Wishlist > Ustawienia > Umiejscowienie i style przycisku. Dzięki temu stylizujesz je raz i wszystkie przyciski się dostosowują.

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

Dzieje się tak, ponieważ przycisk listy życzeń przechowuje zwykłe wartości szesnastkowe. Kolor globalny wyświetlałby się poprawnie, ale nie zostałby przeniesiony na stronę na żywo, więc opcja jest wyłączona, aby zapewnić dokładność Twoich ustawień.

Aby przejść przez ten sam proces ze wszystkimi zrzutami ekranu, zobacz nasz przewodnik po widżecie Elementor w bazie wiedzy.

---

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

Z Elementor Pro masz dwie drogi 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 Twoim szablonie elementu pętli:

• Obraz produktu: przenosi umiejscowienia zakotwiczone na obrazie produktu.
• Tytuł produktu: przenosi umiejscowienia zakotwiczone na tytule.
• Dodaj do koszyka: 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 całkowicie 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? Omawiamy ten sam przycisk 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ą z tych opcji. Jeśli umieszczasz widżet ręcznie, ustaw umiejscowienie na stronie 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, co zaskakuje ludzi. Umieść widżet w szablonie produktu Elementora, a wtyczka wyłączy własne umiejscowienie strony produktu. Elementy pętli są wyjątkiem, więc wymagają ręcznego kroku, o którym mowa powyżej.

---

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 bardziej wymowne, 42% amerykańskich kupujących online twierdzi, że porzuciło zakupy, ponieważ tylko przeglądali. Ci ludzie nie odrzucają Twojego produktu. Mają złe wyczucie czasu.

Advanced Coupons ma przewodnik na temat zmniejszania liczby porzuconych koszyków, jeśli chcesz również zająć się stroną płatności.

Lista życzeń jest jedyną rzeczą na stronie stworzoną, aby ich zatrzymać. To zmienia cel przycisku. Jest to drugie wezwanie do działania dla każdego, kto nie kupuje dzisiaj.

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

• Umieść go w polu 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ż przyciskowi Dodaj do koszyka: istnieją typy Minimalny i Tylko ikona. Przycisk listy życzeń stylizowany na głośny konkuruje ze sprzedażą, na której Ci zależy dzisiaj.
• Na kartach preferuj róg obrazu lub pod tytułem: przestrzeń na karcie jest ograniczona. Przycisk o pełnej szerokości poniżej przycisku Dodaj do koszyka zakłóca wyrównanie siatki na mniejszych ekranach.

Dogłębnie omawiamy obie powierzchnie w naszych przewodnikach po najlepszych praktykach na stronie produktu i najlepszych praktykach na stronie sklepu.

Umieszczenie przycisku na kartach siatki pętli ma większe znaczenie, niż początkowo się wydaje. Większość porzuceń podczas 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, łapiesz tych nielicznych, którzy klikają. Wszyscy inni wymykają się.

---

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

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

1. Wyzwalaj alerty o obniżce cen: gdy cena zapisanego produktu spadnie, kupujący dowie się o przedmiocie, którego już pragnął. Zobacz, jak działają alerty o obniżce 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 tego kupującego o powrocie towaru jest lepsze niż nadzieja, że sprawdzi ponownie.
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ń Elementora i jak je rozwiązać

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.

Na stronie produktu pojawiają się dwa przyciski listy życzeń

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 życzeń 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ń Elementora

---

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.