Na przykład, jeśli masz na sprzedaż kapelusz zarówno w kolorze zielonym, jak i żółtym, nie chciałbyś sprzedawać tych kolorów jako dwóch oddzielnych produktów. Ponieważ jest to ten sam wzór kapelusza, ale w różnych kolorach, zamiast tego użyjesz atrybutu. Możesz dodać nowy atrybut „kolor", a następnie dodać do czapki zarówno „zielone”, jak i „żółte” odmiany kolorów.

Zapoznajmy się z kilkoma zrzutami ekranu i prawdziwymi przykładami.

Jak dodać nowe atrybuty produktu

Atrybuty można dodawać z menu Atrybuty znajdującego się w menu Produkty.

Jeśli uruchomiłeś kreatora konfiguracji WooCommerce, zobaczysz już utworzone atrybuty Kolor i Rozmiar.

Możesz już zobaczyć „warunki” dodane do atrybutów koloru i rozmiaru

Aby dodać nowy atrybut, wystarczy wpisać nazwę i ślimak, a następnie kliknąć Dodaj atrybut.

slug to nazwa składająca się z małych liter używana w adresach URL. Zastąp wszystkie spacje myślnikami w ślimaku.

Po utworzeniu nowego atrybutu kliknij link Konfiguruj warunki, aby dodać opcje do atrybutu.

„Warunki” to niejasne słowo, ale jest to słowo, którego WooCommerce używa dla opcji w atrybucie. Na przykład „Kolor” to atrybut, a „niebieski”, „szary” i „zielony” to niektóre z jego terminów.

W moim przykładzie utworzyłem atrybut o nazwie „Materiał”, więc dodam kilka nowych materiałów, takich jak „szkło” i „plastik”.

Możesz dodać dowolną liczbę atrybutów z dowolną liczbą terminów.

Chociaż możesz tworzyć atrybuty, które są specyficzne dla poszczególnych produktów, najlepiej dodać je w ten sposób za pomocą menu Atrybuty. Dzięki temu są one dostępne dla wszystkich produktów i znacznie ułatwia zarządzanie. Dodawanie atrybutów do poszczególnych produktów szybko stanie się bałaganiarskie i nieporęczne.

Teraz, gdy masz już utworzony własny atrybut niestandardowy, oto jak możesz go dodać do produktu.

Jak dodać atrybuty do produktu

Po utworzeniu atrybutów możesz przypisać je do swoich produktów.

Zacznij od odwiedzenia jednego ze swoich produktów w panelu administratora. Następnie znajdź sekcję Dane produktu i kliknij strzałkę po prawej stronie, aby ją rozwinąć.

Po rozwinięciu kliknij sekcję Atrybuty na lewym pasku bocznym.

W moim przykładzie produkt ma już jeden atrybut, Kolor, wymieniony tutaj:

Kliknięcie atrybutu powoduje jego rozwinięcie, dzięki czemu można dodawać i usuwać różne wartości/terminy.

Przycisk Dodaj nowy służy do dodawania zupełnie nowych terminów, które następnie stają się dostępne dla wszystkich produktów.

Możesz kliknąć w sekcji Wartości, aby wybrać istniejące warunki, które chcesz dodać do produktu.

Terminy te są od Produktu> Atrybuty menu

Możesz dodać więcej atrybutów do produktu, korzystając z tej opcji rozwijanej:

Jeśli zastanawiasz się, jak to działa, przykładem może być koszulka, która wymaga zarówno opcji koloru, jak i rozmiaru. Możesz dodać zarówno atrybut Kolor, jak i atrybut Rozmiar.

Jak już wspomniałem, nie polecam tworzenia niestandardowych atrybutów produktów, ale możesz wybrać istniejące wcześniej atrybuty za pomocą selektora rozwijanego opisanego powyżej.

Jedną z rzeczy, których możesz się nie spodziewać, jest to, że po dodaniu atrybutów nie pojawiają się one automatycznie na stronie produktu.

Jak sprawić, by Twoje atrybuty wyświetlały się na stronie produktu

Wyświetlanie atrybutów na stronach produktów jest mylącą częścią WooCommerce.

Gdy dodasz atrybuty do produktu, nawet jeśli zaznaczysz pole „widoczne na stronie produktu”, odmiany nadal nie będą wyświetlane w Twojej witrynie.

Zaznaczenie tego pola to tylko jeden krok w procesie

Domyślnie jedyną różnicą na stronie produktu będą atrybuty i ich wartości wymienione w sekcji Informacje dodatkowe.

Aby dodać listę rozwijaną dla swoich atrybutów, musisz najpierw zmienić produkt z „Produktu prostego” na „Produkt zmienny”, korzystając z tego menu:

Następnie musisz otworzyć sekcję Atrybuty i zaznaczyć pole „Używane dla odmian” dla każdego atrybutu.

Pamiętaj, aby zaznaczyć pole wszystkich atrybutów, których chcesz użyć

Gdy skończysz, kliknij przycisk Zapisz atrybuty.

Następnie kliknij sekcję Wariacje. Możesz użyć menu rozwijanego, aby dodać jedną odmianę naraz, ale szybciej jest skorzystać z opcji „Utwórz odmiany na podstawie wszystkich atrybutów”.

Po kliknięciu przycisku Przejdź, WooCommerce utworzy wszystkie możliwe odmiany produktów.

Mój produkt ma dwie odmiany ze względu na dodane terminy w kolorze szarym i czerwonym

Ostatnim krokiem, zanim Twoje odmiany pojawią się na stronie produktu, jest podanie ceny każdej z nich.

Będziesz chciał wypełnić wszystkie pola, ale dodam tylko ceny w moim przykładzie.

Po zakończeniu dodawania cen do wszystkich odmian kliknij przycisk Zapisz zmiany.

Zobaczysz teraz rozwijane menu, w którym kupujący mogą wybrać Twoje odmiany.

Mój przykład używa tylko jednego atrybutu, ale możesz dodać tyle, ile chcesz. Każdy atrybut otrzyma własne menu z listą dostępnych terminów.

Chociaż działa to doskonale, selektory rozwijane nie zapewniają najlepszych wrażeń z zakupów.

Jak wyświetlić próbki kolorów

Domyślne menu rozwijane z odmianami produktów nie zapewnia użytkownikom dobrego doświadczenia.

Wyobraź sobie, że masz koszulkę dostępną w pięciu kolorach. W menu rozwijanym kupujący nie mogą zobaczyć, ile kolorów jest dostępnych, dopóki go nie klikną, i nie widzą rzeczywistych odcieni kolorów. Widzą tylko słowo „niebieski”, na przykład, zamiast odcienia niebieskiego, którego używa twój produkt.

Dawanie odwiedzającym próbek kolorów do wyboru zapewnia znacznie lepsze wrażenia z zakupów.

Chociaż ta opcja nie jest dostępna w WooCommerce, istnieje wiele świetnych wtyczek, które mogą dodać tę funkcję do Twojej witryny:

Te 6 wtyczek do wariacji produktów dla WooCommerce ułatwia korzystanie z witryny

Wtyczki wymienione w tej kolekcji mogą zastąpić menu rozwijane opcji koloru, rozmiaru i stylu, dodawać nowe obrazy galerii według odmiany i wiele więcej.

Mistrzostwo atrybutów WooCommerce

Teraz wiesz, jakie są atrybuty produktów WooCommerce i jak je dodać do swojej witryny.

Korzystanie z atrybutów będzie kluczowym elementem prowadzenia sklepu i sprzedaży odmian produktów.

Jeśli chcesz mieć doskonały nowy projekt swojego sklepu, użyłem motywu Modern Store w tym samouczku. Jest w pełni responsywny, konfigurowalny i szybko się ładuje.

Sprawdź motyw Modern Store

A co najważniejsze, to nic nie kosztuje! Daj mu szansę na swojej stronie i zobacz, co myślisz.

Jeśli masz jakieś pytania, opublikuj je w sekcji komentarzy poniżej. A jeśli nauczyłeś się czegoś nowego, rozważ udostępnienie tego komuś innemu.

Dziękuje za przeczytanie!

Źródło nagrywania: www.competethemes.com