Przejrzane przez Przełączasz swój sklep na Blocksy, otwierasz stronę sklepu, a karty produktów wyglądają świetnie. Następnie próbujesz innego umiejscowienia przycisku listy życzeń. Przy opcji lewego górnego rogu przycisk może znajdować się nad etykietą PROMOCJA. Na stronach produktów opcja w linii zajmuje cały wiersz pod przyciskiem Dodaj do koszyka.
Nic z tego nie jest zepsute. To dwa dobrze zbudowane narzędzia dokonujące różnych wyborów układu, a luki ujawniają się w szczegółach. Te szczegóły zauważa kupujący, gdy decyduje, czy zapisać coś na później.
Dlatego darmowa wtyczka SaveTo Wishlist Lite jest teraz wyposażona w dedykowaną integrację listy życzeń Blocksy. Poniżej pokażę Ci, co ona zmienia i które umiejscowienia najlepiej pasują do Blocksy. Pokażę Ci również, jak ją sprawdzić.
Przejdź do:
- Dlaczego przyciski listy życzeń mogą wyglądać nie na miejscu w Blocksy
- Co robi integracja SaveTo Wishlist z Blocksy
- Czego potrzebujesz przed rozpoczęciem
- Jak wybrać umiejscowienie przycisków listy życzeń w Blocksy
- Kiedy wybrać prawy górny róg zamiast lewego górnego
- Jak potwierdzić, że integracja Blocksy działa
- Ograniczenia, o których warto wiedzieć
- Często zadawane pytania
- Gotowy do skonfigurowania listy życzeń Blocksy?
Dlaczego przyciski listy życzeń mogą wyglądać nie na miejscu w Blocksy
Blocksy zachowuje własną strukturę produktów WooCommerce, ale układa ją za pomocą własnych ustawień. W ten sposób Blocksy daje Ci dużą kontrolę nad układem sklepu. Jednak przycisk wtyczki umieszczony w tym układzie nie zna automatycznie zasad Blocksy.
Nasi deweloperzy zmierzyli cztery konkretne miejsca, w których się to ujawniło:
- Wyrównanie karty: Blocksy wyrównuje zawartość karty na podstawie własnego ustawienia Wyrównanie zawartości. Przycisk listy życzeń był wyśrodkowany niezależnie, więc na kartach wyrównanych do lewej był jedynym elementem niepasującym do układu.
- Narożnik odznaki: Blocksy umieszcza odznaki "Wyprzedaż" i "brak towaru" w lewym górnym rogu karty. Przycisk listy życzeń umieszczony tam znajdował się nad odznaką i ją zasłaniał.
- Galeria produktów: Na stronach produktów umieszczenie obrazu w lewym górnym rogu mogło znaleźć się w rogu strony, z dala od zdjęcia.
- Wiersz "Dodaj do koszyka": Blocksy rozciąga dodatkowe elementy w tym wierszu na pełną szerokość. Dlatego przycisk listy życzeń "w linii" znalazł się we własnym wierszu.
Blocksy jest popularnym wyborem, więc te szczegóły docierają do wielu sklepów. Według jego listy w WordPress.org, Blocksy ma ponad 300 000 aktywnych instalacji i średnią 5 gwiazdek na podstawie 873 recenzji. Jest tworzony przez CreativeThemes i pojawia się w zestawieniach, takich jak przewodnik Store Owner Tips po motywach WooCommerce.
Umieszczenie przycisku ma znaczenie, ponieważ zapisywanie jest prawdziwym nawykiem. Według badań Baymard Institute nad stronami produktów, 21% z 1193 respondentów badania polega na funkcjach "Zapisz". Jednak 89% witryn, które Baymard ocenił, nie ułatwia dostępu do funkcji Zapisz i ich używania. Przycisk, który wygląda nie na miejscu, nie pomaga i podważa wartość konwersji listy życzeń.
Co robi integracja SaveTo Wishlist z Blocksy
Integracja to jeden dodatkowy arkusz stylów. SaveTo Wishlist Lite 1.1.6 ładuje go automatycznie, gdy Blocksy lub motyw potomny Blocksy jest Twoim aktywnym motywem. Nie ma nic do włączenia.
| Umiejscowienie | Bez integracji | Z integracją |
|---|---|---|
| Umiejscowienie w sklepie, tytułu i przycisku Dodaj do koszyka | Przycisk wyśrodkowany, nawet na kartach wyrównanych do lewej | Dopasowuje się do wyrównania karty Blocksy: do lewej, do środka lub do prawej |
| Sklep, w lewym górnym rogu obrazu produktu | Zakrywa odznakę "Wyprzedaż" lub "brak towaru" | Przesuwa się w dół, aby znaleźć się pod odznaką |
| Produkt, w lewym górnym rogu obrazu produktu | Może znaleźć się poza galerią produktów | Znajduje się nad galerią, pod dowolną odznaką |
| Produkt, w linii z przyciskiem Dodaj do koszyka | Zajmuje cały własny wiersz | Dzieli wiersz z przyciskiem Dodaj do koszyka |
Arkusz stylów dostosowuje tylko pozycję, odstępy i wyrównanie. Kolory, rozmiar i styl przycisku pozostają dokładnie takie, jakie ustawiono w SaveTo Wishlist. Działa również z każdym trybem ładowania CSS Frontend. Sklepy, które ładują minimalne lub żadne style wtyczki, otrzymują te same poprawki.
Nasza integracja z Woostify działa w ten sam sposób: jeden arkusz stylów specyficzny dla motywu, ładowany automatycznie.
Czego nie robi integracja
Zakres jest celowo mały, co również utrzymuje niskie ryzyko.
- Brak ustawień: W SaveTo Wishlist nie ma strony, przełącznika ani opcji Blocksy.
- Brak dodatkowego JavaScript: Jest to tylko CSS, więc nie dodaje żadnych skryptów. Nasz test szybkości pokazuje, co sama wtyczka dodaje do strony produktu.
- Brak nowego projektu: Nie zmienia stylu przycisku, aby wyglądał jak przyciski Blocksy. Dopasowuje istniejący przycisk do układu Blocksy.
- Żadne inne motywy nie są dotknięte: Arkusz stylów ładuje się tylko wtedy, gdy Blocksy jest aktywnym motywem. Nasze zautomatyzowane testy sprawdzają obie strony tego.
Czego potrzebujesz przed rozpoczęciem
Potrzebujesz dwóch rzeczy, a obie są darmowe.
- Motyw Blocksy: Lub motyw potomny zbudowany na jego podstawie. Nasi programiści zmierzyli poprawki w Blocksy 2.1.57, a poniższe zrzuty ekranu wykonaliśmy w wersji 2.1.58.
- SaveTo Wishlist Lite 1.1.6 lub nowszy: Wcześniejsze wersje nie zawierają arkusza stylów Blocksy. Zaktualizuj najpierw, jeśli używasz starszej wersji.
Integracja znajduje się w darmowej wtyczce, więc nie potrzebujesz SaveTo Wishlist Pro do jej działania. Sklepy Pro również ją otrzymują, ponieważ Pro działa na darmowej wtyczce.
Blocksy to klasyczny motyw, więc Twoje strony sklepu i produktów używają standardowych szablonów WooCommerce. Jeśli zamiast tego tworzysz stronę za pomocą bloku WooCommerce Product Collection, przycisk nadal się wyświetla. Tam obsługuje go własny blok wtyczki. Tworzysz strony produktów za pomocą Elementora? Nasz przewodnik po widżetach Elementora omawia tę ścieżkę.
Jak wybrać umiejscowienie przycisków listy życzeń w Blocksy
Każde umiejscowienie wyświetla przycisk w Blocksy, więc wybierasz wygląd, a nie unikasz błędów. Oba znajdziesz w sekcji SaveTo Wishlist > Ustawienia > Umiejscowienie i style przycisku. Spójrz w sekcjach Strona sklepu i Strona produktu.
Umiejscowienia na stronie sklepu
Oto, gdzie każde z sześciu umiejscowień w sklepie ląduje na karcie produktu Blocksy:
- Prawy górny róg obrazu produktu: Domyślne ustawienie wtyczki i najlepsze dopasowanie do Blocksy. Narożnik etykiety jest po lewej stronie, więc nic nie konkuruje o to miejsce.
- Lewy górny róg obrazu produktu: Na karcie z etykietą przycisk przesuwa się w dół, aby znaleźć się pod nią. Na karcie bez etykiety zajmuje swoje normalne miejsce w rogu.
- Nad tytułem produktu i pod tytułem produktu: Oba wyświetlają przycisk między obrazem a tytułem. Dzieje się tak, ponieważ Blocksy renderuje własny tytuł.
- Nad przyciskiem Dodaj do koszyka: Wyświetla przycisk bezpośrednio pod tytułem.
- Pod przyciskiem Dodaj do koszyka: Wyświetla przycisk po przycisku Dodaj do koszyka.
Ostatnie cztery pozycje podlegają ustawieniu Wyrównanie treści Blocksy dla kart produktów. Zmień swoje karty na wyśrodkowane lub wyrównane do prawej, a przycisk przesunie się wraz z nimi. Wolisz nie mieć przycisku na jednym typie strony? Wybierz opcję Nie pokazuj dla niego, zgodnie z naszym przewodnikiem po ukrywaniu przycisku listy życzeń.
🔍️ Co zaobserwowaliśmy: Nad tytułem produktu i pod tytułem produktu wyglądają tak samo w Blocksy. Jeśli przełączasz się między nimi, oczekując, że przycisk się przesunie, nie przesunie się, i jest to oczekiwane. Wybierz jedną z nich lub wybierz Nad przyciskiem Dodaj do koszyka, jeśli chcesz, aby przycisk znajdował się pod tytułem.
Umiejscowienia na stronie produktu
Wszystkie siedem umiejscowień strony produktu działa w Blocksy. Dwa z nich otrzymują specjalną pomoc od arkusza stylów.
W linii z przyciskiem Dodaj do koszyka znajduje się obok przycisku Dodaj do koszyka na komputerach. Na wąskich ekranach przesuwa się pod niego, ponieważ własny przycisk Blocksy już wypełnia tam wiersz.
Góra po lewej stronie obrazu produktu nachodzi na galerię produktów. W przypadku produktu z etykietą, znajduje się pod etykietą zamiast ją zakrywać.
Pozostałe pięć umiejscowień nie wymaga specjalnej obsługi ze strony arkusza stylów.
Kiedy wybrać prawy górny róg zamiast lewego górnego
Wybierz Górę po prawej stronie obrazu produktu, jeśli Twoje produkty mają duże lub ułożone etykiety. Korekta Góra po lewej stronie czyści jedną etykietę w domyślnym rozmiarze etykiety Blocksy i nic więcej.
Arkusz stylów rozpoznaje etykiety wyprzedaży, etykiety braku towaru i niestandardowe etykiety Blocksy. Przesuwa przycisk tylko na kartach, które faktycznie pokazują jedną z nich. Dlatego mieszana siatka może mieć przyciski na dwóch różnych wysokościach w lewym górnym rogu.
Więc jeśli Twoje wyprzedaże mają kilka etykiet w tym samym rogu, Góra po prawej stronie utrzymuje spójność każdej karty. Jest to również domyślne ustawienie wtyczki, więc świeża instalacja w Blocksy już z niej korzysta.
Niektórzy kupujący zapisują produkt, aby poczekać na lepszą cenę. Dla nich SaveTo Wishlist Pro może wysyłać powiadomienia o obniżce cen, gdy zapisany produkt stanie się tańszy.
Jak potwierdzić, że integracja Blocksy działa
Te kontrole zajmują kilka minut i obejmują miejsca, które arkusz stylów zmienia. Uruchom je raz po aktualizacji i ponownie po dużej aktualizacji Blocksy.
- Sprawdź ładowanie arkusza stylów: Wyświetl kod źródłowy strony sklepu i wyszukaj
savetowishlist-blocksy.css. Powinien tam być, gdy Blocksy jest aktywny. Jeśli wtyczka minifikująca łączy Twoje pliki CSS, nazwa może się nie wyświetlać. - Sprawdź produkt na wyprzedaży: Przy umiejscowieniu obrazu Góra po lewej stronie, przycisk powinien znajdować się pod etykietą Wyprzedaż.
- Sprawdź wyrównanie karty: Na kartach Blocksy wyrównanych do lewej, tytuł lub umiejscowienie Dodaj do koszyka również powinno być wyrównane do lewej.
- Sprawdź wiersz Dodaj do koszyka: Przy umiejscowieniu Inline, przycisk powinien dzielić wiersz na komputerze. Na telefonie spada poniżej.
- Sprawdź jako gość: Otwórz sklep w prywatnym oknie. Goście widzą ten sam przycisk, o ile listy życzeń gości są włączone.
Jeśli coś nadal wygląda nie tak, wtyczka buforująca lub minifikująca może serwować stary CSS. Wyczyść ją, a następnie przeładuj. Aby uzyskać więcej sposobów dopasowania przycisku do Twojego motywu, zobacz nasz post o opcjach ikony przycisku listy życzeń.
Ograniczenia, o których warto wiedzieć
Integracja obejmuje szablony sklepu, archiwum i pojedynczego produktu. Kilka rzeczy pozostaje poza nią.
- Strona koszyka: Przyciski koszyka, takie jak opcja zapisywania poszczególnych elementów koszyka, używają normalnego stylu wtyczki.
- Duże etykiety: Przesunięcie Góra po lewej stronie jest dostosowane do jednej domyślnej etykiety. Większe projekty powinny używać Góra po prawej stronie.
- Wersje Blocksy: Poprawki zostały zmierzone na Blocksy 2.1.57. Przyszłe wydanie Blocksy może zmienić jego układ, więc ponownie sprawdź po głównych aktualizacjach.
- Wygląd przycisku: Integracja dopasowuje Twój przycisk do układu Blocksy. Nie kopiuje projektu przycisku Blocksy.
Nasze zautomatyzowane testy działają na rzeczywistej instalacji Blocksy. Potwierdzają, że arkusz stylów ładuje się w Blocksy i nie ładuje się w innym motywie. Sprawdzają również, czy przycisk wbudowany zachowuje swój wiersz.
Często zadawane pytania
Czy muszę włączyć integrację Blocksy?
Nie. SaveTo Wishlist Lite 1.1.6 i nowsze wersje automatycznie ładują arkusz stylów Blocksy, gdy Blocksy jest Twoim aktywnym motywem. Nie ma dla tego żadnego ustawienia, przełącznika ani strony.
Czy działa z motywem potomnym Blocksy?
Tak. Wtyczka sprawdza motyw nadrzędny, więc motyw potomny zbudowany na Blocksy otrzymuje ten sam arkusz stylów co sam Blocksy.
Czy potrzebuję SaveTo Wishlist Pro do integracji z Blocksy?
Nie. Jest dostępna w darmowej wtyczce SaveTo Wishlist Lite, wersja 1.1.6 i nowsze. Sklepy Pro otrzymują ją automatycznie, ponieważ Pro działa na bazie darmowej wtyczki.
Gotowy do skonfigurowania listy życzeń Blocksy?
Blocksy nadaje Twojemu sklepowi przejrzysty układ, a przycisk listy życzeń teraz do niego pasuje bez niestandardowego CSS. Jedyna rzeczywista decyzja, która pozostała, to gdzie chcesz umieścić przycisk.
- Zobacz, co integracja zmienia na kartach Blocksy i stronach produktów.
- Wybierz swoje umiejscowienia, zaczynając od prawego górnego rogu na stronie sklepu.
- Użyj prawego górnego rogu dla dużych odznak, aby zachować spójność każdej karty.
- Przeprowadź pięć kontroli po aktualizacji i po dużych aktualizacjach Blocksy.
Twoja konfiguracja listy życzeń Blocksy jest o jedną aktualizację wtyczki od Ciebie. Zainstaluj lub zaktualizuj SaveTo Wishlist Lite do wersji 1.1.6, a arkusz stylów zrobi resztę.
