Jak włączyć próbki kolorów WooCommerce dla zmiennych odmian produktu w motywie Flatsome (globalnie)

Zróżnicowanie produktów jest powszechnym faktem w eCommerce. Jeśli masz eCommerce, na pewno musisz skonfigurować swój sklep dla odmiany swoich produktów. Próbki kolorów WooCommerce mogą Ci w tym pomóc.

W WooCommerce domyślnie otrzymujesz listę rozwijaną do obsługi zmienności produktu.

Wiem, o czym teraz myślisz! Myślisz: „I co z tego! Dlaczego ci faceci robią zamieszanie?

Wyjaśnijmy nasz punkt widzenia. Wierzymy, że celem każdego właściciela eCommerce jest zwiększenie sprzedaży i utrzymanie odwiedzających na swojej stronie. Aby utrzymać je dłużej, musisz zapewnić im bezproblemową obsługę, aby czuli się komfortowo przebywając w Twojej witrynie przez długi czas.

Menu, w którym można zobaczyć odmiany produktów, jest procesem oldschoolowym, wymaga również większej liczby kliknięć, aby wyświetlić odmianę. Nie jest to przyjemne doświadczenie dla odwiedzających, dlatego powinieneś użyć czegoś, co może wygładzić wrażenia podczas oglądania różnych wariacji. Oto próbki wariacji , aby wszystko było łatwe i bezproblemowe. Chociaż próbki wariacji oferują próbki kolorów, obrazów i przycisków, w tym artykule skupimy się tylko na próbkach kolorów.

Istnieje kilka bezpośrednich i pośrednich korzyści płynących z używania próbek kolorów WooCommerce dla odmian produktów. Dowiedzmy się trochę!

1. Zapewnia odwiedzającym płynne wrażenia
2. Odkrywanie wariacji kolorystycznych może zwiększyć sprzedaż
3. Odwiedzający potrzebują mniej kliknięć, aby zobaczyć odmianę produktu
4. Lepsze wrażenia użytkownika wysyłają wyszukiwarkom pozytywny sygnał, dzięki czemu mogą promować te treści

Podekscytowany możliwością włączenia próbek kolorów WooCommerce w Twoim sklepie, prawda? Zacznijmy cały proces!

Jak włączyć wtyczkę próbek kolorów WooCommerce w sklepie internetowym?

Zanim zaczniemy, chcemy poinformować Cię o niektórych warunkach wstępnych. Pierwszy z nich to motyw WooCommerce. Aby rozpocząć korzystanie z próbek odmian, potrzebujesz motywu WooCommerce. Możesz wybrać dowolny darmowy lub premium motyw dla swojego sklepu. Sugerujemy użycie wysokiej jakości motywu, takiego jak Flatsome, storefront itp. Następnie musisz zainstalować wtyczkę Variation Swatches .

Krok 1: Przejdź do pulpitu nawigacyjnego.

Krok 2: Najedź kursorem na wtyczki, a następnie kliknij Dodaj nowy.

Krok 3: Pojawi się strona wyszukiwania. W prawym górnym rogu znajdziesz pole wyszukiwania. Wpisz WooCommerce Variation Swatches, a następnie zainstaluj i aktywuj wtyczkę.

Tak więc warunki wstępne są przygotowane. Teraz możemy przejść do korzystania z próbek odmian, aby włączyć próbki kolorów dla różnych odmian produktów.

Po pomyślnej instalacji i aktywacji wtyczki WooCommerce Variation Swatches, nadszedł czas, aby utworzyć próbki kolorów.

Zacznijmy proces!

Krok 01: Utwórz zmienny atrybut produktu

Najpierw musimy globalnie stworzyć atrybut koloru i wariacje. Aby go utworzyć, przejdź do Dashboard , kliknij Produkty , a następnie przejdź do Atrybutów . Znajdziesz pole Atrybuty . Wypełnij wymagane pola jako swoje wymagania. W celach demonstracyjnych nazywamy atrybut Color . Zostawiamy slug pusty, ponieważ automatycznie generuje slug dla atrybutu. Wybieramy Typ jako Kolor .

Możesz wybrać opcje i nazwę jako swoje preferencje. Jeśli ich nie masz, śledź nasze. Po wypełnieniu wymaganych pól kliknij przycisk Dodaj atrybut .

Następnie po prawej stronie zostanie utworzona lista, jak na poniższym zrzucie ekranu.

Krok 02: Utwórz odmiany atrybutów

W ten sam sposób możesz dodać więcej atrybutów do listy. Po utworzeniu atrybutu musisz utworzyć odmianę atrybutu. Aby utworzyć odmiany produktu dla atrybutów, przejdź przez listę i kliknij opcję Konfiguruj warunki atrybutu.

Stworzyliśmy na przykład atrybut Kolor . Wewnątrz atrybutu koloru możesz dodawać kolory jako wariacje wewnątrz atrybutu. Możesz również wybrać dowolny kolor, ale w celach demonstracyjnych dodamy czerwony , zielony i niebieski . Krótko mówiąc, aby utworzyć odmianę, wypełnij pole nazwy, pozostaw ślimak pusty i wybierz kolor.

Krok 03: Włącz zmienność atrybutów w produkcie zmiennym

Teraz musimy połączyć globalnie utworzoną próbkę koloru ze zmiennym produktem. Aby włączyć produkty odmiany atrybutów, przejdź do produktów i edytuj je. Bądź świadomy wyboru zmiennego produktu z Product Data .

Następnie kliknij Atrybuty po lewej stronie. Otworzy się nowa strona. Istnieje menu rozwijane o nazwie Niestandardowy atrybut produktu , w którym można znaleźć wszystkie globalnie utworzone atrybuty. Tutaj zobaczysz jedyny atrybut Kolor , ponieważ właśnie utworzyłeś tylko atrybut Kolor.

Wybierz atrybut, który chcesz wybrać, w celach demonstracyjnych wybierz Kolor . Po wybraniu pojawi się ta strona.

Aby wybrać wszystkie dostępne warianty, kliknij przycisk Wybierz wszystko . Możesz również odznaczyć przycisk wszystkie, klikając opcję Wybierz brak . Następnie zaznacz pole Używane dla odmian i kliknij Zapisz atrybuty .

Kliknij zakładkę Wariacje , pojawi się nowa strona. Zauważysz tam dwie opcje, jedną jest Dodaj odmianę , a drugą Utwórz odmianę ze wszystkich atrybutów .

Wybierz dowolną opcję z tych dwóch opcji. W celach demonstracyjnych wybierzemy opcję Utwórz odmianę ze wszystkich atrybutów .

Teraz różnice kolorystyczne są widoczne przy produktach. W tym miejscu dodajesz również więcej szczegółów dotyczących odmian, takich jak obrazy odmian, ceny odmian i inne specyficzne dla odmiany. Po wykonaniu tych wszystkich czynności kliknij przycisk Zapisz zmiany .

PS: Dodaj ceny w każdej odmianie, w przeciwnym razie odmiany nie będą widoczne na interfejsie produktu.

Po pomyślnym dodaniu próbek odmian, strona pojedynczego produktu będzie wyglądać tak.

Proste ustawienia

Variation Swatches to niezbędna wtyczka dla witryn WooCommerce. Ponad 300 000 stron WooCommerce korzysta z tej wtyczki. Pomaga aktywować podpowiedź, wyłączyć domyślny arkusz stylów wtyczki i przełączać się między okrągłymi i kwadratowymi kształtami.

Zmień styl kształtu z okrągłego na kwadratowy i włącz podpowiedź. Po tym interfejs strony produktu będzie wyglądał tak.

Zaawansowane ustawienia

Variation Swatches ma również kilka zaawansowanych funkcji, które mogą dać Ci więcej. Możesz kontrolować szerokość, wysokość i rozmiar czcionki Variation Swatch. Oferuje również inteligentne wyświetlanie braków w magazynie.

Aby wyświetlić niedostępny, musisz wybrać opcję Rozmycie w Zachowaniu atrybutu. Po wybraniu tego produkt zareaguje w następujący sposób.

Włącz próbki kolorów na stronach sklepu z motywem Flatsome

Oprócz dodawania próbek kolorów do stron produktów możesz również dodać próbki kolorów WooCommerce na stronach archiwum produktów. Aby korzystać z tej funkcji, musisz uaktualnić swoją wersję do wersji pro. Jeśli nie masz jeszcze wersji pro, zdobądź ją, aby w pełni wykorzystać możliwości Variation Swatches.

Aby włączyć próbki kolorów na stronie archiwum/sklepu, sprawdź ustawienia Pokaż w archiwum, aby wyświetlić próbki kolorów na stronie sklepu/archiwum. Jeśli używasz motywu Flatsome, możesz włączyć próbki przed i po dodaniu do przycisku koszyka w sklepie w ustawieniach Archive Swatches Position. Za pomocą tych ustawień można również kontrolować rozmiar próbek wariacji kolorów.

Gdy włączysz próbki na stronie sklepu, będzie to wyglądać tak.

Dostosuj podpowiedź i próbkę na stronach sklepu/archiwum

Jeśli chcesz dostosować kolor podpowiedzi i włączyć próbki odmian w sklepie, musisz użyć wersji premium próbek odmian.

Włącz podpowiedź

Korzystając z ustawień zaawansowanych, możesz dostosować tło podpowiedzi i kolor tekstu. Aby dostosować etykietkę, sprawdź poniżej.

Ostateczny podgląd interfejsu podpowiedzi.

Wniosek

Ta technologia zwiększy użyteczność i konwersję Twojej witryny. Zapewnia również bezproblemowe wrażenia klientów podczas odwiedzania Twojej witryny. Co więcej, pośrednio może poprawić sprzedaż i pomóc w rozwoju sklepu WooCommerece.

Jeśli napotkasz jakiekolwiek problemy podczas instalacji tej wtyczki w motywie Flatsome, daj nam znać w sekcji komentarzy. Postaramy się odpowiedzieć JAK NAJSZYBCIEJ!