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ń i etykieta wyświetlana po dodaniu produktu
- Stylizacja frontendu – ustawienie Ładowanie CSS frontendu, które kontroluje, ile CSS wtyczki jest ładowane w Twoim sklepie (omówione w sekcji Ładowanie CSS frontendu poniżej)
- Strona produktu – umiejscowienie i styl przycisku na pojedynczych stronach produktów
- Strona sklepu – umiejscowienie i styl przycisku na listach produktów
- Strona koszyka – styl i etykieta przycisku „Zapisz koszyk na liście życzeń”
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.
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 Poniżej przycisku Dodaj do koszyka, ale można również wybrać Powyżej przycisku Dodaj do koszyka, Powyżej tytułu produktu, Poniżej tytułu produktu, Prawy górny róg obrazu produktu lub Lewy górny róg obrazu produktu.
⚠️ Produkty bez ceny lub niedostępne: Od wersji 1.0.7, pozycje Powyżej przycisku Dodaj do koszyka i Poniżej przycisku 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 teraz pojawia się w pobliskim miejscu w podsumowaniu produktu zamiast znikać.
Następnym ustawieniem jest opcja Tryb konfiguracji. Wybierz Użyj gotowych ustawień, aby wybrać spośród gotowych kombinacji stylów, lub wybierz Ustawienia niestandardowe, aby ręcznie uzyskać dostęp do pełnego selektora kolorów, czcionek i kontrolek rozmiaru.
Wskazówka Pro: Użyj podglądu na żywo, aby zobaczyć, jak Twój przycisk wygląda w stanie normalnym i po najechaniu kursorem, 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.
Pozycja przycisku domyślnie znajduje się poniżej przycisku Dodaj do koszyka, ale można również umieścić przycisk w górnych rogach obrazów produktów lub powyżej/poniżej tytułów produktów. Dla czystego, nowoczesnego wyglądu na stronach siatki, pozycja w górnym rogu zazwyczaj działa bardzo dobrze.
Podobnie jak sekcja Strona produktu, zawiera opcję Tryb konfiguracji. Wybierz Użyj gotowych ustawień dla szybkiej konfiguracji z gotowymi kombinacjami lub Ustawienia niestandardowe, aby dostosować każdy kolor, rozmiar czcionki, szerokość obramowania i styl tekstu, aby dopasować je do brandingu Twojego sklepu.
Wskazówka Pro: Dla eleganckiej, nowoczesnej strony sklepu, wypróbuj przyciski tylko z ikonami w górnych rogach. Oszczędza to miejsce, jednocześnie utrzymując widoczną opcję listy życzeń.
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 brzmi „Zapisz koszyk na liście życzeń”. 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, koloru, czcionki i rozmiaru 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 lub Ustawienia niestandardowe, aby samodzielnie kontrolować kolory, czcionki i rozmiary.
Ł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 style — użyj kolorów i czcionek wtyczki (domyślnie). Ładuje kompletny arkusz stylów wtyczki. Działa od razu w większości sklepów.
- Minimalne style — pozwól 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 stylów — dziedzicz kolory i czcionki z aktywnego motywu. Pomija kolory i czcionki wtyczki, aby przycisk pobrał je z Twojego motywu. Najlepsze dla deweloperó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 Akcja listy życzeń (Ustawienia → Ogólne), aby kontrolować, co dzieje się po kliknięciu. Użyj Umiejscowienie przycisku i style, aby ustawić etykiety, umiejscowienie, kolory i ładowanie CSS dla każdej strony, na której pojawia się przycisk, z opcjami Przekierowanie, Popup lub Zanikanie kontrolującymi, co dzieje się po kliknięciu.
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ę.
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 do listy życzeń krótko zanika, aby potwierdzić zapis. Nie ma żadnych wyskakujących okienek ani przekierowań 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
