Jak stylizować stronę listy życzeń

Strona listy życzeń jest często ostatnim przystankiem dla klienta, zanim zdecyduje się na zakup. Jeśli ta strona wygląda jak generyczny plugin, który gryzie się z Twoimi starannie dobranymi kolorami marki i czcionkami, może to stworzyć „rozłączenie”, które podważa zaufanie.

Domyślnie strona listy życzeń używa niebieskiej kolorystyki, która nie zawsze pasuje do każdego motywu WordPress. Ustawienia Dostosowywanie stylu strony listy życzeń z SaveTo Wishlist pozwalają na zmianę typografii i kolorów strony listy życzeń, aby pasowały do brandingu Twojego sklepu, bez pisania żadnego kodu CSS.

Ten przewodnik omawia dostępne ustawienia stylu i sposoby ich zastosowania.

💡 Uwaga:
Te ustawienia wpływają konkretnie na główną Stronę Listy Życzeń (gdzie klienci widzą swoje zapisane produkty), a nie na przyciski „Dodaj do listy życzeń” znajdujące się na stronach produktów.

🔗 Zasób zewnętrzny:
Jeśli nie masz pewności, jakich kolorów użyć, zalecamy sprawdzenie Adobe Color w celu uzyskania inspiracji dotyczących dostępnych palet kolorów.

Wymagania wstępne

Zanim zaczniesz, upewnij się, że masz:

• SaveTo Wishlist Lite zainstalowany i aktywowany w Twoim sklepie
• Stronę listy życzeń już skonfigurowaną (plugin tworzy ją automatycznie po aktywacji)

Krok po kroku: Projektowanie niestandardowej strony listy życzeń

1. Znajdź ustawienia stylu

Wszystkie narzędzia projektowe są zgrupowane razem dla łatwego dostępu.

1. Przejdź do SaveTo Wishlist → Ustawienia.
2. Kliknij zakładkę Strona listy życzeń i przewiń w dół do sekcji Style.

2. Dostosuj nagłówki i tytuły

Nagłówek jest pierwszą rzeczą, którą widzą Twoi klienci. Spraw, aby się wyróżniał:

• Rozmiar i kolor tytułu nagłówka: Dostosuj Rozmiar tytułu nagłówka i Kolor tytułu nagłówka, aby pasowały do głównych tagów H1 lub H2 Twojej witryny.
• Rozmiar i kolor tekstu nagłówka: Kontroluj podtekst lub obszar opisu, aby zapewnić jego czytelność i dopasowanie do koloru tekstu głównego Twojej marki.

3. Stylizuj tabelę listy życzeń

Tutaj znajdują się dane produktu. Możesz teraz dopracować „techniczny” wygląd listy:

• Rozmiar tekstu kolumn tabeli: Zmień rozmiar tekstu dla nagłówków, takich jak „Nazwa produktu” lub „Cena”.
• Rozmiar tekstu wierszy tabeli: Dostosuj rozmiar czcionki szczegółów pozycji na liście, aby poprawić czytelność na komputerach i urządzeniach mobilnych.

4. Zaprojektuj modalne okno podręczne

Jeśli używasz akcji Popup, upewnij się, że okno pasuje do estetyki Twojej witryny:

• Rozmiar i kolor tytułu okna podręcznego: Ustaw rozmiar czcionki i kolor tytułu okna podręcznego.
• Rozmiar i kolor tekstu okna podręcznego: Użyj tych kontrolek, aby upewnić się, że instrukcje są jasne.
• Przyciski Zapisz i Anuluj w oknie podręcznym: Użyj selektorów kolorów dla przycisków Zapisz i Anuluj.

💡 Uwaga:
Użyj swojego podstawowego koloru marki dla przycisku Zapisz, ponieważ przyciąga on uwagę do tej akcji.

5. Stylizuj przyciski

Dostosuj rozmiar i kolory przycisków na stronie listy życzeń:

• Rozmiar tekstu przycisku: Zwiększ lub zmniejsz przycisk „Dodaj do koszyka”, aby dopasować go do swojego języka projektowania.
• Kolor tekstu przycisku: Zapewnij wysoki kontrast (np. biały tekst na ciemnym tle), wybierając niestandardowy kolor.
• Kolor tła przycisku: Zmień domyślny niebieski na swój podstawowy kolor marki.

6. Podgląd i zapis

1. Kliknij Zapisz zmiany na dole strony.
2. Otwórz swoją stronę listy życzeń w nowym oknie incognito, aby zobaczyć zmiany dokładnie tak, jak zobaczą je Twoi klienci.

✨ Dodatkowa wskazówka: Dopasowanie linków do listy życzeń

Domyślnie linki na stronie listy życzeń (takie jak tytuły produktów) zazwyczaj dziedziczą globalne ustawienia linków Twojego motywu. Jeśli chcesz zmienić te kolory, aby lepiej pasowały do nowych stylów przycisków, zazwyczaj możesz znaleźć te ustawienia w swoim panelu WordPress pod Wygląd → Dostosuj → Typografia → Kolor linku / akcentu.

💡 Uwaga:
Każdy motyw jest zbudowany inaczej! W zależności od zainstalowanego motywu, to ustawienie może znajdować się również w sekcji „Kolory globalne” lub „Style przycisków i linków”.

Pozwól swojemu motywowi kontrolować stylizację

Ustawienia stylu powyżej dają Ci kontrolę za pomocą własnych opcji kolorów i czcionek wtyczki. Ale jeśli wolisz, aby Twój motyw dyktował wszystko, lub jeśli CSS Twojego motywu już wykonuje ciężką pracę, możesz poinformować SaveTo Wishlist, aby się odsunął.

Przejdź do SaveTo Wishlist → Ustawienia → Umiejscowienie i style przycisków → Stylizacja frontendu. Tam znajdziesz ustawienie Ładowanie CSS frontendu z trzema opcjami:

• Pełna stylizacja — używaj kolorów i czcionek wtyczki (domyślnie). Wtyczka ładuje swój pełny arkusz stylów kolorów i czcionek. Jest to standardowe działanie.
• Minimalna stylizacja — pozwól motywowi nadpisać kolory i czcionki. Arkusz stylów nadal się ładuje, ale !important nie jest używany w przypadku właściwości dekoracyjnych, takich jak kolor, tło i obramowanie, dzięki czemu CSS Twojego motywu może wygrać w kaskadzie.
• Brak stylizacji — dziedzicz kolory i czcionki z aktywnego motywu. Rozmiary, pozycje i układ przycisków są zachowane w każdym trybie. Zmienia się tylko stylizacja wizualna.

💡 Uwaga:
Style administratora nie są objęte tym ustawieniem. Kontroluje ono tylko sposób ładowania arkusza stylów frontendu dla Twoich klientów.

Przed i po: Dopasowanie strony listy życzeń do Twojej marki

Poniżej znajduje się porównanie przed i po, pokazujące, jak strona listy życzeń może zostać dostosowana, aby lepiej pasowała do motywu Twojego sklepu.

Przełączanie między widokiem tabeli a siatki

Twoi klienci nie są ograniczeni do jednego układu. Na stronie listy życzeń zobaczą przełącznik widoku obok paska wyszukiwania. Jedno kliknięcie przełącza między standardowym układem tabeli a układem siatki (kafelków).

Widok siatki wyświetla produkty z listy życzeń jako responsywne kafelki produktów. Układ dostosowuje się do szerokości ekranu, pokazując jedną kolumnę na małych ekranach mobilnych, a następnie dwie, trzy i wreszcie cztery kolumny na najszerszych ekranach. Każdy kafelek zawiera obraz produktu, nazwę, cenę, stan magazynowy, ilość i przycisk „Dodaj do koszyka”. Wszystkie standardowe akcje dotyczące pozycji (menu z trzema kropkami) są nadal dostępne.

Niezależnie od wybranego widoku, jest on zapisywany w przeglądarce klienta, więc będzie tam nadal przy następnej wizycie z tego samego urządzenia.

Rozwiązywanie problemów z projektem

Moje zmiany nie pojawiają się na stronie

Jest to prawie zawsze spowodowane buforowaniem. Jeśli używasz wtyczki takiej jak WP Rocket, LiteSpeed Cache lub CDN, takiej jak Cloudflare, upewnij się, że po zapisaniu stylów wybrałeś opcję Wyczyść/Usuń z pamięci podręcznej. Możesz również zapoznać się z oficjalnym przewodnikiem WooCommerce dotyczącym buforowania.

Styl czcionki nie pasuje dokładnie do mojego motywu

Wtyczka domyślnie używa dziedziczonej rodziny czcionek Twojego motywu. Te ustawienia pozwalają zmienić rozmiar i kolor. Jeśli sama rodzina czcionek wygląda nieprawidłowo, upewnij się, że globalne CSS Twojego motywu jest ładowane poprawnie.

Kolory wyglądają inaczej na urządzeniach mobilnych

Sprawdź, czy na telefonie włączony jest „Tryb ciemny”, ponieważ niektóre przeglądarki próbują automatycznie odwracać kolory. Kolory ustawione w ustawieniach stylu mają na celu nadpisanie większości tych automatycznych dostosowań przeglądarki.

Często zadawane pytania

➤ Czy muszę znać CSS, aby zmienić te kolory?
Absolutnie nie! Zbudowaliśmy przyjazny interfejs użytkownika z selektorami kolorów i suwakami, dzięki czemu nigdy nie będziesz musiał dotykać linii kodu.

➤ Czy te ustawienia spowolnią moją stronę?
Nie. Te style są lekkie i nie wpłyną zauważalnie na czas ładowania strony.

Potrzebujesz pomocy?

• Użytkownicy premium: prześlij zgłoszenie pomocy technicznej, a nasz zespół Ci pomoże.
• Użytkownicy darmowi: publikuj na forum pomocy technicznej WordPress.org.