Jak tworzyć próbki radia, etykiet, kolorów i wariacji obrazu dla zmiennych atrybutów produktów WooCommerce

Próbka odmiany produktu WooCommerce to niesamowita technologia wprowadzona w celu zwiększenia sprzedaży i konwersji witryny.

Zastanawiasz się, dlaczego próbki są niesamowite, prawda?

Próbki odmian produktu zastępują domyślną odmianę produktu WooCommerce, wybierz pole rozwijane i włącz próbki kolorów, obrazów, etykiet i radia. Dzięki temu klienci mogą łatwo wybrać żądaną wersję produktu i natychmiast dodać je do koszyka.

W tym samouczku pokażę, jak włączyć próbki radiowe, etykiet, kolorów i wariacji zdjęć w produkcie zmiennym WooCommerce za pomocą motywu OceanWP .

Zakładam, że masz zainstalowany motyw OceanWP. Aby włączyć próbki w produktach zmiennych, zainstaluj najpierw wtyczkę WooCommerce Variation Swatches .

Demo na żywo | Pobierz wtyczkę WooCommerce Variation Swatches

Instalacja próbek odmian WooCommerce

Możesz również pobrać wtyczkę WooCommerce Variation Swatches z zaplecza swojej witryny. Wybierz Rozpocznij instalowanie wtyczek z powiadomienia głównego administratora.

Zainstaluj i aktywuj próbki odmian WooCommerce i wtyczkę Ocean Extra .

Jeśli nie otrzymasz powiadomienia o konieczności zainstalowania wtyczki swatches, przejdź do Wtyczki >> Dodaj nowy . Wyszukaj próbki odmian WooCommerce w polu wyszukiwania. Zainstaluj i aktywuj wtyczkę WooCommerce Variation Swatches autorstwa Emrana Ahmeda .

Po pomyślnej instalacji i aktywacji wtyczki nadszedł czas, aby utworzyć próbki wariacji radia, etykiety, koloru i obrazu w motywie OceanWP. Zacznijmy proces.

Konfiguracja próbek odmian WooCommerce

Po zainstalowaniu wtyczki Woocommerce Variation Swatches and Photos w motywie OceanWP. Czas skonfigurować tę wtyczkę dla Twoich produktów zmiennych. Wtyczkę można zainstalować na dwa sposoby.

1. Włącz próbki odmian dla istniejących produktów zmiennych
2. Próbki wariacji konfiguracji Dla nowych produktów zmiennych

W tym samouczku opiszę oba sposoby.

Włącz próbki odmian dla istniejących produktów o zmiennych

Wielu z Was ma już w swoim sklepie stworzone produkty zmienne. Jeśli chcesz zmienić listę rozwijaną odmiany produktu na próbki radiowe, etykiety, kolory i obrazy, skorzystałeś z tego samouczka. Sprawdź poniższy zrzut ekranu. Domyślna lista rozwijana wyboru odmiany wygląda obecnie w Twojej witrynie tak, jak na poniższym zrzucie ekranu. W kolejnych krokach pokażę, jak zmienić pole wyboru odmiany w piękne próbki.

Zanim

Po

Krok 01: Edycja atrybutu

Przejdź do produktów >> Atrybuty . Wszystkie istniejące atrybuty globalne są wymienione w sekcji atrybutów. Po zainstalowaniu wtyczki WooCommerce Variation Swatches dodaje pole Type . Domyślnie wyświetlałoby się zaznaczenie w tytule Typ .

Ponieważ WooCommerce Swatches Plugin zawiera trzy typy atrybutów: kolor, obraz, przycisk . Możesz ustawić dowolny typ atrybutu dla żądanego atrybutu.

W celach demonstracyjnych utworzono atrybuty Fabrics, Pattern i Label . Dodaj typ atrybutu Kolor dla atrybutu wzoru , typ atrybutu obrazu dla atrybutu Tkaniny i typ atrybutu przycisku dla atrybutu etykiety .

Aby ustawić typ atrybutu koloru na atrybut Wzór , kliknij Edytuj .

Wybierz Typ koloru z listy rozwijanej typu.

Wróć Produkty >> Atrybuty . Edytuj atrybut Fabrics , taki jak atrybut Pattern .

Wróć Produkty >> Atrybuty ponownie. Edytuj atrybut etykiety, taki jak tkaniny i atrybuty wzoru .

Po zakończeniu wyboru typu atrybutu wróć do strony z listą atrybutów. Lista atrybutów wyglądałaby jak na poniższym obrazku.

Frontend produktu wyglądałby jak na poniższym zrzucie ekranu po wybraniu typów atrybutów dla atrybutów produktu.

Wariacje atrybutu Etykieta wyglądają dobrze, ale wariacje atrybutu Wzór muszą definiować kolory, a wariacje atrybutu Tkaniny muszą dodawać obrazy.

Krok 02: Edycja wariacji

Aby zdefiniować kolory jako wariacje w atrybucie Pattern . Przejdź do Produkty >> Atrybuty . Wybierz opcję Konfiguruj terminy z atrybutu Wzorce .

Po wybraniu opcji Konfiguruj warunki pojawia się lista odmian atrybutów. W przypadku wzoru znajdują się tutaj trzy odmiany: niebieska , zielona i czerwona . Edytuj każdą odmianę jeden po drugim, aby dodać kolor odmiany.

W celu demonstracji wybierz link Edytuj dla odmiany zielonej .

Z panelu edycji odmiany. Wybierz żądany kolor z Colorpicker i zaktualizuj zmiany, naciskając przycisk Aktualizuj .

Po pomyślnym zaktualizowaniu kolorów wszystkich odmian interfejs wygląda następująco.

Po zaktualizowaniu odmian atrybutów wzorca, edytuj atrybut Fabrics , wybierając opcję Konfiguruj terminy , takie jak atrybut wzorca .

Po naciśnięciu Konfiguruj terminy pojawia się lista terminów Fabrics w postaci wzorca. Edytuj każdą odmianę, aby wstawić obraz odmian. W celach demonstracyjnych Edytuj link do atrybutu Chambray .

Z panelu edycji odmiany. załaduj żądany obraz odmiany z obrazu i zaktualizuj zmiany, naciskając przycisk Aktualizuj .

Po zaktualizowaniu obrazów dla wszystkich odmian, frontend chciałby zobaczyć poniższy zrzut ekranu.

Skonfiguruj próbki zmian dla nowych produktów zmiennych

To krok dla tych, którzy nie mają stworzonego dla swojego sklepu żadnego zmiennego produktu. Najpierw utworzymy produkty zmienne i włączymy dla nich próbki.

Krok 01: Utwórz globalne atrybuty i odmiany

Po pomyślnej instalacji i aktywacji wtyczki utwórz żądany atrybut globalnie, korzystając z opcji Produkty >> Atrybuty . Utwórz Wariant Wzór , Tkaniny, Długość i Rozmiar wprowadź tytuł atrybutu i odpowiedni typ atrybutu z listy rozwijanej Typ.

Po pomyślnym utworzeniu atrybutu koloru, obrazu i etykiety Wzór , Tkaniny , Etykieta i Rozmiar , po lewej stronie zostanie utworzona lista atrybutów.

Po utworzeniu atrybutów globalnych dodaj odmiany atrybutów, wybierając opcję Konfiguruj terminy. Aby utworzyć odmiany atrybutów wzorca , wybierz opcję Konfiguruj łącza terminów . Wypełnij pole Nazwa i wybierz kody kolorów. Utwórz wariacje zielone , niebieskie i czerwone dla atrybutów kolorów.

Lista odmian atrybutów pojawia się na lewym ekranie po dodaniu odmian atrybutów wzorca .

Przejdź ponownie do produktów >> Atrybuty . Utwórz odmiany atrybutów Fabrics , wybierz opcję Konfiguruj łącza terminów z Fabrics . Wypełnij pole Nazwa i dodaj obraz odmiany z biblioteki multimediów lub prześlij z komputera.

Utwórz odmiany Chambray, Corduroy i Embossed dla atrybutów obrazu, a pojawią się one po lewej stronie.

Twórz odmiany dla atrybutów Radio i Label, takich jak odmiany Obraz i Kolor.

Krok 02: Wyświetl próbki na stronie zmiennej produktu

Aby włączyć próbki na zmiennej stronie produktu. Wejdź w żądany tryb edycji produktu, wybierz zmienny produkt z danych produktu .

Przejdź do zakładki Atrybuty . Kliknij menu Niestandardowy atrybut produktu . Tutaj pojawiają się wszystkie globalnie tworzone atrybuty. Dodaj wszystkie atrybuty jeden po drugim.

Po dodaniu wszystkich atrybutów, naciśnij przycisk Wybierz wszystko z każdego ustawienia atrybutu, aby dodać wszystkie jego dostępne odmiany naraz. Po dodaniu wariantów atrybutów produktu zapisz ustawienia wybierając Przyciski Zapisz atrybuty .

Teraz przejdź do zakładki Wariacje . Kliknij menu rozwijane Dodaj odmianę. Tutaj pojawiają się dwie opcje. Pierwsza z nich to Dodaj wariację, a druga to Utwórz wariacje ze wszystkich atrybutów.

Wybierz Utwórz odmiany ze wszystkich atrybutów i naciśnij Go . Doda wszystkie dostępne kombinacje odmian utworzone dla atrybutów. Dodaj cenę i obraz odmiany dla indywidualnej odmiany i zapisz ustawienia.

Wniosek

Próbowałem omówić każdy krok, aby zainstalować wtyczkę WooCommerce Variation Swatches w motywie OceanWP. Daj mi znać w polu komentarza, jeśli potrzebujesz dodatkowej pomocy.