Czy chcesz włączyć WooCommerce Product Attributes Images Próbki dla różnych produktów w motywie Flatsome?

Świetny! Jesteś we właściwym miejscu.

Jeśli postępowałeś zgodnie z naszym ostatnim samouczkiem dotyczącym tworzenia próbek kolorów WooCommerce, ten samouczek będzie dla Ciebie łatwy.

Tak więc, jeśli jesteś tutaj po raz pierwszy, powinieneś zapoznać się z poprzednim samouczkiem, aby włączyć próbki atrybutów kolorów produktu. Zakładamy, że pobrałeś darmową i premium wersję wtyczki. Nie martw się, jeśli jakoś to przegapiłeś. Możesz go pobrać natychmiast!

Jak włączyć obrazy atrybutów WooCommerce w motywie Flatsome?

Instalowanie próbek odmian WooCommerce Attribute i wtyczki do zdjęć jest takie samo, jak instalowanie innych wtyczek WordPress w motywie Flatsome. Po prostu prześlij go i aktywuj z Wtyczki >> Dodaj nowy . I wykonaj kolejne kroki, aby go skonfigurować.

Krok 01: Utwórz atrybut obrazu

Aby utworzyć atrybut obrazu globalnie, przejdź do Produkty >> Atrybuty . Wstaw tytuł atrybutu w polu Nazwa . W tym samouczku nazwałem nazwę atrybutu: Image .

Pozostaw pole Ślimak puste. System automatycznie generuje informacje o atrybutach. Wybierz obraz z listy rozwijanej Typ atrybutu. Naciśnij przycisk Dodaj atrybut , aby zapisać zmiany.

Po utworzeniu atrybutu Image zauważysz, że po prawej stronie tworzona jest lista. pokazuje dodany atrybut obrazu.

Krok 02: Utwórz odmiany atrybutów

Nowo utworzony atrybut Image jest pusty. W atrybucie nie ma żadnej zmiany. Aby dodać odmianę pod atrybutem obrazu, kliknij łącze Konfiguruj termin .

W celach demonstracyjnych dodamy trzy odmiany. Ramie , Skóra i Wełna .

Aby utworzyć odmianę, wstaw tytuł odmiany w polu Nazwa . Pozostaw pole informacji o ślimaku puste, aby system mógł je automatycznie wygenerować. Prześlij obrazy odmiany ze swojego komputera lub Media Libra, klikając przycisk Prześlij/Dodaj obraz .

Po zakończeniu wyboru obrazu naciśnij przycisk Dodaj nowy obraz , aby zakończyć proces

Podobnie jak lista atrybutów. zostanie utworzona lista odmian obrazu, jak poniżej.

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

Czas włączyć próbki obrazów w zmiennym produkcie. Aby włączyć próbki obrazów w żądanym produkcie. Wejdź w żądany tryb edycji produktu. Upewnij się, że masz wybrane produkty zmienne z danych produktów .

Wybierając produkt zmienny z menu rozwijanego Dane produktu , przejdź do zakładki Atrybuty . Kliknij menu rozwijane Niestandardowy atrybut produktu . W tym menu możesz zobaczyć wszystkie swoje globalnie utworzone atrybuty. Ponieważ utworzyliśmy tylko atrybut Obrazek , teraz pokazuje atrybut Obrazek .

Wybierz atrybut Obraz i kliknij Dodaj . Możesz zobaczyć następujące ekrany pojawiające się później.

Jeśli chcesz wybrać wszystkie dostępne warianty atrybutu koloru, kliknij przycisk Wybierz wszystko . Jeśli chcesz odznaczyć wszystkie wybrane odmiany na raz. Kliknij przycisk Wybierz żaden . Dodaj wszystkie odmiany, wybierając przycisk Wybierz wszystko , zaznaczając ustawienia Używane dla odmian i klikając przycisk Zapisz atrybuty . Sprawdź poniższy zrzut ekranu, aby uzyskać wskazówki.

Teraz przejdź do zakładki Wariacje . Kliknij menu rozwijane Dodaj odmianę. Tutaj zauważysz dwie opcje. Pierwszym z nich jest dodawanie wariacji , a drugim tworzenie wariacji ze wszystkich atrybutów .

W tym samouczku wybierzemy Utwórz odmianę ze wszystkich atrybutów i klikniemy przycisk Przejdź . Doda wszystkie dostępne odmiany, takie jak poniższe.

Na powyższym obrazku widać, że istnieją odmiany obrazu Skóra , Ramie i Wełna . Na tym ekranie można dodawać obrazy odmian, ceny odmian i inne szczegóły dotyczące odmian. Po zakończeniu dodawania wszystkich wymaganych szczegółów w każdej odmianie kliknij przycisk Zapisz zmiany .

Pamiętaj ! Nie zapomnij dodać ceny w każdej odmianie, w przeciwnym razie odmiany nie będą widoczne na interfejsie produktu.

Jeśli możesz z powodzeniem dodać odmianę. W interfejsie produktu możesz zobaczyć następujące próbki.

Proste ustawienia

Próbki i zdjęcia odmian WooCommerce to potężna wtyczka. Umożliwia włączenie podpowiedzi, wyłączenie domyślnego arkusza stylów wtyczki i przełączanie między kształtami okrągłymi i kwadratowymi.

Jeśli chcesz wybrać styl kształtu od okrągłego do kwadratowego i włączyć podpowiedź, strona produktu frontendu wygląda następująco.

Zaawansowane ustawienia

Aby zapewnić najwyższą elastyczność, wtyczka WooCommerce Attribute Image Swatches oferuje kilka zaawansowanych ustawień, które dają więcej. Ustawienia pozwalają kontrolować szerokość , wysokość i rozmiar czcionki . Niesamowitą częścią, którą opublikujemy, jest opcja Zachowanie atrybutów , aby inteligentnie zaprezentować brakującą odmianę. Zachowanie atrybutu może spowodować rozmycie, ukrycie i skrzyżowanie odmian z magazynu.

Jeśli wybierzesz opcję Rozmycia z Zachowania atrybutu, odmiana niedostępna w magazynie będzie wyglądać jak na poniższym zrzucie ekranu.

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

Dostosowywanie obrazu podpowiedzi i włączanie próbek to funkcja premium tej wtyczki. Aby to umożliwić, musisz najpierw pobrać wersję Premium wtyczki WooCommerce Variation Swatches.

Włącz podpowiedź

Możesz dostosować tło i kolor tekstu podpowiedzi w ustawieniach zaawansowanych . Sprawdź poniższy zrzut ekranu, aby dostosować styl podpowiedzi.

Podgląd podglądu podpowiedzi wygląda jak na poniższym zrzucie ekranu.

Włącz próbki na stronach sklepu

Aby włączyć próbki obrazów na stronach sklepu. Przejdź do strony Archiwum / Sklep . Sprawdź ustawienia Pokaż w archiwum , aby wyświetlić próbki obrazów na stronie sklepu/archiwum. Nawet w motywie Flatsome możesz włączyć próbki przed i po dodaniu do koszyka w sklepie w ustawieniach Archive Swatches Position . Co więcej, możesz sterować wyłącznie rozmiarem próbki odmiany obrazu z tych ustawień.

Po włączeniu próbek na stronie sklepu wygląda to jak na poniższym zrzucie ekranu.

Wniosek:

Ta technologia zwiększy użyteczność i konwersję Twojej witryny. Jeśli napotkasz jakiekolwiek problemy podczas instalacji wtyczki próbek odmian produktu WooCommerce w Flatsome Theme, daj mi znać w poniższym komentarzu. postaramy się Ci pomóc. Jeśli potrzebujesz dowolnego tematu w żądanym wymaganiu. Daj znać w komentarzu. postaramy się omówić to w następnym samouczku.