Twój sklep ma swój własny wygląd, swoje kolory, czcionki i układ. Ten przewodnik pokazuje, jak dopasować przycisk SaveTo Wishlist do niego, na stronach produktów, sklepu i koszyka, bez dotykania żadnego kodu.
Wymagania wstępne
- Zainstalowany i skonfigurowany WooCommerce.
- Zainstalowany i aktywny SaveTo Wishlist Lite.
- Dostęp administratora do Twojego panelu WordPress.
Akcja listy życzeń
Ustawienie Przycisk dodaj do listy życzeń kontroluje, co się dzieje, gdy klient kliknie przycisk listy życzeń. Znajdziesz je w sekcji SaveTo Wishlist → Ustawienia → Ogólne → Akcja listy życzeń.
Istnieją trzy opcje:
- Przekierowanie: wysyła klienta bezpośrednio na stronę listy życzeń po kliknięciu. Dobre dla sklepów, w których chcesz, aby klienci od razu przejrzeli swoją listę życzeń.
- Popup: wyświetla okno potwierdzenia bez nawigacji. Przydatne, gdy chcesz, aby kupujący pozostali na stronie i kontynuowali przeglądanie.
- Zanikanie: krótka wiadomość potwierdzająca pojawia się obok przycisku, aby potwierdzić zapisanie produktu, bez nawigacji ani okna popup. Jest to najbardziej subtelna opcja, idealna, gdy chcesz zminimalizować zakłócenia w przepływie zakupów.
Gdzie znaleźć ustawienia
Przejdź do swojego pulpitu WordPress → SaveTo Wishlist → Ustawienia → Umiejscowienie i style przycisku.
Zobaczysz pięć głównych sekcji:
- Ustawienia przycisku: etykieta przycisku listy życzeń, etykieta wyświetlana po dodaniu produktu oraz przełączniki włączania/wyłączania dla obsługiwanych wtyczek, takich jak Quick View for WooCommerce (te pojawiają się tylko wtedy, gdy wtyczka jest aktywna)
- Stylizacja frontendu: ustawienie Ładowanie CSS frontendu, które kontroluje, ile kodu CSS wtyczki jest ładowane w Twoim sklepie (omówione w sekcji Ładowanie CSS frontendu poniżej)
- Strona produktu: umiejscowienie i styl przycisku na stronach pojedynczych produktów
- Strona sklepu: umiejscowienie i styl przycisku na listach produktów
- Strona koszyka: styl i etykieta przycisku „Zapisz koszyk na liście życzeń”
Po zmianie dowolnego ustawienia na tej karcie kliknij Zapisz zmiany.
Ustawienia przycisku
Etykieta przycisku listy życzeń ustawia domyślny tekst dla wszystkich przycisków listy życzeń w Twoim sklepie. Domyślnie jest to Save to Wishlist, ale możesz zmienić go na cokolwiek pasującego, na przykład Dodaj do ulubionych lub Zachowaj na później. Utrzymuj go krótki i jasny.
Etykieta wybranego przycisku listy życzeń pozwala wyświetlić inną etykietę po dodaniu produktu do listy życzeń. Domyślnie jest to Usuń z listy życzeń, co pozwala kupującym usunąć przedmiot jednym kliknięciem. Możesz zmienić ją na cokolwiek pasującego do Twojego sklepu.
Akcja przycisku wybranej listy życzeń określa, co się dzieje, gdy kupujący kliknie przycisk na produkcie, który znajduje się już na jego liście życzeń. Domyślnie jest to Usuń z listy życzeń, co jednym kliknięciem usuwa produkt z listy. Zmień na Wyświetl listę życzeń, aby zamiast tego wysłać kupującego na stronę jego listy życzeń.
Jeśli aktywna jest obsługiwana wtyczka, taka jak Quick View for WooCommerce, ta sekcja pokazuje również przełącznik włączania/wyłączania dla niej. Zobacz Używanie przycisku z Quick View for WooCommerce poniżej.
Wskazówka Pro: Utrzymuj etykiety przycisków krótkie i zorientowane na akcję, aby ułatwić kupującym podjęcie działania.
Strona produktu
Sekcja Strona produktu kontroluje, jak przycisk listy życzeń pojawia się na poszczególnych stronach produktów, gdzie kupujący przeglądają pojedynczy produkt przed zakupem.
Pozycja przycisku decyduje o tym, gdzie przycisk pojawi się na stronie produktu. Domyślnie jest to Prawy górny róg obrazu produktu, ale można również wybrać Lewy górny róg obrazu produktu, Nad przyciskiem Dodaj do koszyka, Pod przyciskiem Dodaj do koszyka, W linii z przyciskiem Dodaj do koszyka, Nad tytułem produktu lub Pod tytułem produktu. Aby całkowicie ukryć przycisk listy życzeń na pojedynczych stronach produktów, wybierz Nie pokazuj.
Wybranie opcji W linii z przyciskiem Dodaj do koszyka powoduje wyświetlenie pola Odstęp przycisku, określającego odstęp w pikselach między przyciskiem Dodaj do koszyka a przyciskiem listy życzeń. Domyślnie wynosi on 16px i można go ustawić od 0 do 60px. Twoja wartość ma zastosowanie na każdym urządzeniu. Na ekranach dotykowych odstęp mniejszy niż 8px jest podnoszony do 8px, aby klienci nie kliknęli niewłaściwego przycisku.
⚠️ Produkty bez ceny lub niedostępne: Od wersji 1.0.7, opcje umiejscowienia Nad przyciskiem Dodaj do koszyka, Pod przyciskiem Dodaj do koszyka i W linii z przyciskiem Dodaj do koszyka wyświetlają również przycisk listy życzeń na produktach, które nie mają ceny, są niedostępne lub są w trybie katalogowym. Te produkty zazwyczaj ukrywają formularz Dodaj do koszyka WooCommerce, więc przycisk jest umieszczany w pobliskim miejscu w podsumowaniu produktu zamiast znikać.
Następne ustawienie to Tryb konfiguracji. Wybierz Użyj gotowych ustawień, aby wybrać z gotowych kombinacji stylów, Ustawienia niestandardowe, aby samodzielnie ustawić kolory, obramowania i tekst, lub Domyślne ustawienia motywu, aby odziedziczyć wygląd przycisków z aktywnego motywu.
Ustaw kolory i obramowania przycisków
Pola koloru i obramowania pojawiają się pod Dostosuj przycisk listy życzeń na stronie produktu i tylko wtedy, gdy Tryb konfiguracji jest ustawiony na Ustawienia niestandardowe. Każde pole koloru otwiera selektor kolorów.
| Pole | Co zmienia | Domyślnie |
|---|---|---|
| Kolor tekstu przycisku | Kolor tekstu przycisku. Dotyczy typów przycisków, które wyświetlają tekst. | #1F2937 |
| Kolor tekstu przycisku po najechaniu myszką | Kolor tekstu, gdy kupujący najeżdża myszką na przycisk. | #DC2626 |
| Kolor tła przycisku | Kolor wypełnienia przycisku. | #FFFFFF |
| Kolor tła przycisku po najechaniu myszką | Kolor wypełnienia, gdy kupujący najeżdża myszką na przycisk. | #F9FAFB |
| Kolor obramowania przycisku | Kolor obramowania przycisku. | #E5E7EB |
| Kolor obramowania przycisku po najechaniu myszką | Kolor obramowania, gdy kupujący najeżdża myszką na przycisk. | #DC2626 |
| Szerokość obramowania przycisku | Grubość obramowania w pikselach, od 0 do 5. | 1 |
| Promień zaokrąglenia obramowania przycisku | Jak bardzo zaokrąglone są rogi przycisku, w pikselach, od 0 do 50. Użyj 0 dla kwadratowych rogów. | 4 |
| Wypełnienie pionowe przycisku | Przestrzeń nad i pod zawartością przycisku, w pikselach, od 0 do 30. | 3 |
| Wypełnienie poziome przycisku | Przestrzeń po lewej i prawej stronie zawartości przycisku, w pikselach, od 0 do 40. | 8 |
Nie każde pole dotyczy każdego typu przycisku. Kolor i szerokość obramowania są wyświetlane tylko dla Tylko tekst i trzech typów przycisków Pigułka. Kolory tła, promień zaokrąglenia obramowania i wypełnienie nie dotyczą Tylko ikona, Pełna ikona ani Minimalna ikona.
Wybierz typ przycisku i styl tekstu
Trzy dodatkowe pola znajdują się na dole niestandardowych ustawień. Rozmiar tekstu przycisku ustawia rozmiar tekstu przycisku w pikselach, od 10 do 24 (domyślnie 14). Styl tekstu przycisku przełącza tekst między Normalny (domyślnie) a Kursywa.
Typ przycisku decyduje o tym, co pokazuje przycisk i jak wygląda. Domyślnie jest to Minimalna ikona i tekst. Dostępne opcje to:
- Tylko tekst
- Tylko ikona
- Ikona i tekst
- Pigułka z ikoną i tekstem
- Solidna ikona
- Solidna ikona i tekst
- Solidna pigułka z ikoną i tekstem
- Minimalna ikona
- Minimalna ikona i tekst
- Minimalna pigułka z ikoną i tekstem
Tylko ikona, Pełna ikona i Minimalna ikona pokazują tylko ikonę, więc tekst, tło, obramowanie i pola wypełnienia nie mają nic do zmiany. Aby wybrać sam kształt ikony, zobacz Wybieranie ikony przycisku poniżej.
Wskazówka Pro: Po wybraniu Niestandardowe ustawienia użyj podglądu na żywo, aby zobaczyć, jak Twój przycisk wygląda w stanie normalnym i po najechaniu myszką, zanim zapiszesz zmiany.
Strona sklepu
Sekcja Strona sklepu kontroluje, jak przyciski listy życzeń pojawiają się w siatkach produktów, stronach kategorii i stronach archiwum, wszędzie tam, gdzie klienci przeglądają wiele produktów jednocześnie.
Umiejscowienie przycisku domyślnie znajduje się w prawym górnym rogu obrazu produktu, ale można go również umieścić w lewym górnym rogu, nad lub pod przyciskiem Dodaj do koszyka, albo nad lub pod tytułem produktu. Pozycje w rogu najlepiej sprawdzają się na stronach siatki. Aby ukryć przycisk listy życzeń na stronach sklepu, kategorii i archiwum, wybierz Nie pokazuj.
Podobnie jak sekcja Strona produktu, zawiera opcję Tryb konfiguracji. Wybierz Użyj gotowych ustawień dla szybkiej konfiguracji z gotowymi kombinacjami, Niestandardowe ustawienia, aby dostosować każdy kolor, rozmiar czcionki, szerokość obramowania i styl tekstu, aby pasowały do brandingu Twojego sklepu, lub Domyślne ustawienia motywu, aby odziedziczyć wygląd przycisku z aktywnego motywu. Niestandardowe pola pasują do tych ze Strony produktu, z tym wyjątkiem, że Typ przycisku jest tutaj nazywany Stylem przycisku.
Wskazówka Pro: Aby uzyskać elegancką, nowoczesną stronę sklepu, wybierz Niestandardowe ustawienia, ustaw Styl przycisku na Tylko ikona i użyj umiejscowienia w rogu. Oszczędza to miejsce, jednocześnie zachowując widoczność opcji listy życzeń.
Używanie przycisku z kreatorami stron
Jeśli tworzysz układ swojego sklepu lub kategorii za pomocą widżetów Elementor Pro Loop Grid lub Loop Carousel, przycisk listy życzeń jest automatycznie renderowany w każdej karcie produktu, używając pozycji ustawionej powyżej w sekcji Strona sklepu. Nie jest potrzebne żadne dodatkowe ustawienie, ale Elementor Pro musi być aktywny.
Siatki i karuzele produktów z Premium Addons for Elementor również automatycznie otrzymują przycisk, zgodnie z Twoją pozycją na stronie sklepu. Prawy górny róg obrazu produktu i Lewy górny róg obrazu produktu wyświetlają przycisk na górze obszaru szczegółów karty zamiast na obrazie. Zobacz Jak dodać przycisk listy życzeń za pomocą widżetu Elementor, aby uzyskać szczegółowe informacje.
Jeśli umieszczasz przycisk samodzielnie za pomocą widżetów lub modułów swojego konstruktora, zamiast tych ustawień, zapoznaj się z dedykowanym przewodnikiem dla swojego konstruktora: Jak dodać przycisk listy życzeń za pomocą widżetu Elementor, Jak dodać listę życzeń do układów Divi Builder lub Jak dodać listę życzeń do strony za pomocą UX Builder firmy Flatsome.
Używanie przycisku z Blocksy
Jeśli Twój sklep korzysta z motywu Blocksy lub motywu potomnego Blocksy, nie potrzebujesz żadnego niestandardowego CSS. SaveTo Wishlist automatycznie ładuje własne style Blocksy, dzięki czemu przycisk pasuje do stron sklepu, archiwum i pojedynczego produktu Blocksy.
Na stronie Sklepu każda lokalizacja działa w Blocksy w następujący sposób:
- Prawy górny róg obrazu produktu, domyślny, najlepiej pasuje, ponieważ Blocksy używa lewego górnego rogu karty dla swojej odznaki wyprzedaży.
- Lewy górny róg obrazu produktu przesuwa przycisk w dół pod odznakę wyprzedaży, niedostępności lub niestandardową odznakę Blocksy, aby jej nie zakrywał. Jeśli odznaka jest bardzo duża lub wyświetlasz więcej niż jedną odznakę w tym rogu, użyj Prawego górnego rogu obrazu produktu.
- Nad tytułem produktu i Pod tytułem produktu oba wyświetlają przycisk między obrazem produktu a tytułem, ponieważ Blocksy renderuje własny tytuł. Nad przyciskiem Dodaj do koszyka wyświetla go bezpośrednio pod tytułem. Pod przyciskiem Dodaj do koszyka wyświetla go po przycisku Dodaj do koszyka. Wszystkie cztery podążają za wyrównaniem karty Blocksy: do lewej, do środka lub do prawej.
Na stronie produktu wszystkie siedem lokalizacji działa. W linii z przyciskiem Dodaj do koszyka znajduje się obok przycisku Dodaj do koszyka na komputerach i przesuwa się pod nim na wąskich ekranach. Lewy górny róg obrazu produktu również przesuwa się w dół pod odznakę w tym rogu, tak samo jak na stronie sklepu.
Używanie przycisku z Quick View for WooCommerce
Jeśli Twój sklep korzysta z Reno Quick View firmy ShapedPlugin (dawniej Quick View for WooCommerce), przycisk Zapisz na liście życzeń pojawia się również w wyskakującym okienku szybkiego podglądu. Klienci mogą zapisać produkt bez otwierania jego strony. Wymaga to SaveTo Wishlist Lite w wersji 1.1.7 lub nowszej.
Popup wykorzystuje układ i styl Twojej strony produktu, więc nie ma potrzeby dodatkowej konfiguracji. Kilka rzeczy działa nieco inaczej w popupie:
- Prawy górny róg obrazu produktu i Lewy górny róg obrazu produktu wyświetlają przycisk nad tytułem produktu, a nie na obrazie.
- W przypadku produktu zmiennego przycisk podąża za wariantem, który klient wybierze w popupie.
- Jeśli układ strony produktu jest ustawiony na Nie pokazuj, popup również nie wyświetli przycisku.
Aby zachować przycisk poza popupem, ale pozostawić go na stronach produktów:
- Przejdź do SaveTo Wishlist → Ustawienia → Umiejscowienie i style przycisków → Ustawienia przycisków.
- Wyłącz Pokaż w szybkim podglądzie dla WooCommerce.
- Kliknij Zapisz zmiany.
Przełącznik jest domyślnie włączony. Pojawia się tylko wtedy, gdy aktywny jest Szybki podgląd dla WooCommerce.
Strona koszyka
Sekcja Strona koszyka dotyczy przycisku „Zapisz koszyk na liście życzeń”, który pozwala klientom zapisać cały koszyk naraz. Jest świetny dla klientów, którzy chcą wrócić później lub udostępnić swoje wybory.
Etykieta przycisku koszyka domyślnie ma wartość „Zapisz koszyk do ulubionych”. Możesz zmienić ją na coś bardziej przyjaznego, na przykład Zapisz koszyk na później lub ♥ Zapisz mój koszyk. Te same opcje stylu przycisku, koloru, obramowania i tekstu dostępne na stronach produktów i sklepów mają zastosowanie tutaj, dzięki czemu możesz zachować spójność w całym sklepie.
Ta sekcja również zawiera opcję Tryb konfiguracji: wybierz Użyj gotowych ustawień dla szybkiej konfiguracji, Niestandardowe ustawienia, aby samodzielnie kontrolować kolory, obramowania i tekst, lub Domyślne ustawienia motywu, aby odziedziczyć wygląd przycisku z aktywnego motywu. Podobnie jak na stronie Sklepu, Typ przycisku jest tutaj nazywany Stylem przycisku.
Wybieranie ikony przycisku
Przełączenie Trybu konfiguracji na Ustawienia niestandardowe na stronie produktu, sklepu lub koszyka ujawnia ustawienie Ikona przycisku dla tej strony. Wybierz spośród Serce (domyślnie), Gwiazdka, Zakładka lub Plus, lub wybierz Niestandardowy obraz, aby ujawnić narzędzie do przesyłania Niestandardowej ikony przycisku. Przycisk nadal pokazuje serce, dopóki obraz nie zostanie przesłany.
Te same niestandardowe ustawienia obejmują również Kolor ikony przycisku i Kolor ikony przy najechaniu (oba domyślnie #DC2626) oraz Rozmiar ikony przycisku, od 12 do 40 pikseli (domyślnie 20). Pola koloru ikony są ukryte po wybraniu Niestandardowy obraz, ponieważ nie można zmienić przesłanego obrazu.
Ładowanie CSS frontendu
Ustawienie Ładowanie CSS frontendu kontroluje, ile arkuszy stylów wtyczki jest ładowanych w Twoim sklepie. Znajdziesz je w sekcji SaveTo Wishlist → Ustawienia → Umiejscowienie przycisku i style → Style frontendu.
Istnieją trzy opcje:
- Pełne stylizacje: użyj kolorów i czcionek wtyczki (domyślnie). Ładuje pełny arkusz stylów wtyczki. Działa od razu dla większości sklepów.
- Minimalne stylizacje: pozwól swojemu motywowi nadpisać kolory i czcionki. Ładuje kolory i tła bez nadpisań
!important, dzięki czemu CSS Twojego motywu może wygrać tam, gdzie występuje konflikt. Spróbuj najpierw tego, jeśli przycisk listy życzeń koliduje z Twoim motywem. - Brak stylizacji: dziedzicz kolory i czcionki z aktywnego motywu. Pomija kolory i czcionki wtyczki, dzięki czemu przycisk pobiera je z Twojego motywu. Najlepsze dla programistów tworzących w pełni niestandardowe rozwiązania. Rozmiary przycisków, pozycje i CSS układu wtyczki są zachowane w każdym trybie.
Podsumowanie
Użyj Akcji listy życzeń (Ustawienia → Ogólne), aby kontrolować, co się dzieje po kliknięciu. Użyj Lokalizacja i style przycisku, aby ustawić etykiety, lokalizację, kolory i ładowanie CSS dla każdej strony, na której pojawia się przycisk.
Najlepsze praktyki
- Dopasuj kolory i styl przycisku do motywu sklepu
- Utrzymuj krótkie i zorientowane na akcję etykiety
- Testuj przyciski na urządzeniach mobilnych pod kątem czytelności i rozmiaru dotyku
- Użyj podglądu na żywo, aby potwierdzić ustawienia przed zapisaniem
Rozwiązywanie problemów
Styl przycisku nie aktualizuje się po zapisaniu
Jeśli zmienisz ustawienia, a przycisk wygląda tak samo na stronie frontowej, spróbuj przełączyć Tryb konfiguracji z Użyj gotowych ustawień na Niestandardowe ustawienia (lub odwrotnie) i zapisz ponownie. Wyczyść również wtyczki buforujące lub pamięć podręczną CDN. Buforowany CSS może uniemożliwić wyświetlanie zmian stylów.
Przycisk listy życzeń koliduje z CSS motywu
Jeśli przycisk wygląda na uszkodzony lub koliduje ze stylami Twojego motywu, przejdź do SaveTo Wishlist → Ustawienia → Umiejscowienie przycisku i style → Style frontendu i przełącz Ładowanie CSS frontendu z Pełne style na Minimalne style. Pozwoli to CSS Twojego motywu nadpisać kolory i czcionki tam, gdzie występują konflikty. W przypadku w pełni niestandardowego rozwiązania, Brak stylów daje Ci czystą kartę.
Przycisk listy życzeń zniknął z popupu szybkiego podglądu
Przejdź do SaveTo Wishlist → Ustawienia → Umiejscowienie i style przycisków → Ustawienia przycisków i sprawdź, czy Pokaż w szybkim podglądzie dla WooCommerce jest włączone. Następnie sprawdź, czy układ Strony produktu nie jest ustawiony na Nie pokazuj. Jeśli przycisk nie jest widoczny tylko dla niezalogowanych kupujących, prawdopodobnie włączone jest Wyłącz listę życzeń dla gości w sekcji Ustawienia → Opcje dla gości, co ukrywa przycisk dla gości wszędzie.
Często zadawane pytania
Jaka jest różnica między Użyj gotowych ustawień a Niestandardowe ustawienia?
Gotowe ustawienia oferują zestaw gotowych kombinacji stylów, dzięki czemu jedno kliknięcie stosuje skoordynowany wygląd. Niestandardowe ustawienia odblokowują indywidualne kontrolki dla koloru, rozmiaru czcionki, grubości obramowania, ikony i efektów najechania, dzięki czemu możesz ręcznie dostroić wszystko.
Co wizualnie robi efekt zanikania?
Na stronach produktów i sklepu kliknięcie przycisku listy życzeń wyświetla małą wiadomość potwierdzającą (ikonę zaznaczenia i „Dodano do [nazwa listy życzeń]”), która pojawia się obok przycisku, znika po około dwóch sekundach, a następnie zanika. Sam przycisk pozostaje widoczny przez cały czas. Na stronie koszyka przycisk Zapisz koszyk na liście życzeń krótko zanika, aby potwierdzić zapis. Nie ma wyskakującego okienka ani przekierowania strony.
Czy moje dostosowania zostaną zachowane po zmianie motywu?
Tak. Style przycisków są zapisywane w ustawieniach wtyczki, a nie w motywie. Zmiana motywu nie zresetuje tekstu etykiety, kolorów ani wyboru umiejscowienia. Niemniej jednak niektóre motywy nadpisują style przycisków własnym kodem CSS, dlatego warto sprawdzić wygląd po zmianie motywu.
Potrzebujesz pomocy?
- Użytkownicy premium: Otwórz zgłoszenie wsparcia
- Użytkownicy darmowi: Odwiedź nasze forum społeczności
