Poprzednie części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Warianty w sklepie opartym o WooCommerce różnią się nieco od tych w innych sklepach. Podstawowa różnica widoczna jest od razu po wejściu do sklepu. Produkty z wariantami w miejscu pojedynczej ceny posiadają zakres cenowy. Jest to bardzo widoczne na załączonym poniżej obrazku.

Warianty w sklepie

Jak widać mamy 2 produkty. Pierwszy „koszulka” jest zwykłym pojedynczym produktem. Drugi „Przykładowy produkt” – to produkt z wariantami. Istotne przy tym jest, że warianty posiadają rożne ceny.

Zmianie uległ również wygląd karty produktu. Ponownie posiadamy tutaj w miejscu pojedynczej ceny, charakterystyczny przedział cenowy. Przedziału całkowicie usunąć się nie da. Można jedynie zmodyfikować sposób jego wyświetlania. Ewentualnie go ukryć.

Produkty z wariantami

Funkcja ta będzie jak najbardziej będzie potrzebna w budowanym przez zemnie sklepie. Wśród oferowanych w nim towarów znajdują się bowiem ubrania. Będą one dostępne nie tylko w kilku rozmiarach (a każdy rozmiar powinien być innym wariantem) jak i wersjach kolorystycznych. Produkt dodaje tak jak pozostałe z tym, że ustawiam:

Dane produktu -> Produkt z wariantami.

Po wybraniu tej opcji pojaw się w lewej kolumnie nowa opcja/ zakładka „Warianty„. Na początku zawartość będzie praktycznie pusta. Jedyne co tam znajdziemy to informacja o tym, że musimy dodać atrybuty. To właśnie na ich podstawie będziemy tworzyć późniejsze warianty.

W przykładowym produkcie jaki dodawałam wcześniej mam już wybrany atrybut kolor. Jeżeli chcemy by atrybut ten brał udział w tworzeniu wariantu musimy wejść w edycję wariantu i zaznaczyć opcję „Dla wariantów„. Na poniższym obrazku opcja ta jest jeszcze nie zaznaczona.

Dodawanie nowego atrybutu z poziomu tworzenia nowego produktu

We wcześniejszym wpisie pokazałam w jaki sposób można dodać atrybuty do sklepu. Wspomniałam tam, też że można je dodać podczas dodawania nowego produktu. I tak dokładnie w tym samym miejscu gdzie wybieramy atrybuty mamy opcję „Nowy atrybut„.

Ogólnie proces dodawania nowego atrybutu jest bardzo prosty. Po wybraniu opcji nowy atrybut klikamy dodaj.

Teraz pokażą nam się pola umożliwiające dodanie nowego atrybutu. Na początek musimy go jakoś nazwać. Następnie w polu Wartości wpisujemy interesujące nas wartości oddzielone znakiem „|” pionowej kreski. 

Tutaj również musimy zaznaczyć opcję DLA WARIANTÓW. Na koniec zapisujemy.

Tworzenie prostego wariantu produktu

Teraz udajemy się do zakładki Warianty. By móc w niej dodać różne wersje produktu wystarczy nam tak naprawdę tylko jeden atrybut. W poniższym przykładzie takim atrybutem będzie kolor. Tak wiec dodajemy teraz nowy wariant.

Do wyboru mamy 2 opcje.

• Dodaj nowy wariant
• Utwórz warianty ze wszystkich atrybutów.

Pierwsza opcja daje nam możliwość dodania tylko 1 wariantu z kolei w przypadku 2 ilość zależy od posiadanych atrybutów. Jeśli mamy ich 3 – to tyle zostanie utworzonych. W prawdziwym sklepie gdzie atrybutów o różnych wartościach będzie kilka ilość wariantów może być nawet kilkunastokrotnie większa.

W sytuacji gdy zdecydujemy się na opcję Utwórz warianty ze wszystkich atrybutów WordPress zapyta się nas czy na pewno chcemy to zrobić. Poprzez poniższy komunikat:

Kiedy zakończy tworzenie wariantów pokaże z kolei komunikat o liczbie utworzonych. W tym przypadku 4 wariantach.

Na poniższym braku możecie zobaczyć listę moich wariantów. Jak widać zdecydowałam się na utworzenie wariantów z jednym atrybutem – kolorem.

W tej chwili nasze produkty praktycznie nie mają cen. Tym samym są nie aktywne. W celu ich włączenia trzeba wejść w edycję wariantu. W tym celu wystarczy kliknąć w konkretny wariant. W tedy nastąpi rozwinięcie opcji produktu. Będzie to wyglądać podobnie jak na obrazku poniżej.

Teraz możemy edytować wersję każdego produktu z osobna.

Dodawanie zdjęcia / obrazu do produktu

Główny obrazek dla produktu dodajemy tak samo jak w przypadku innych produktów.

Analogicznie jest z galerią zdjęć.

Nieco inaczej wygląda jednak sprawa z dodawaniem zdjęć do wariantów. W celu dodania zdjęcia musimy wejść w konkretny wariant i bezpośrednio w nim zmienić grafikę.

W ten sposób kiedy przejdziemy w konkretny wariant podmieniony zostanie tylko główny obrazek.

Jak podmienić zdjęcia w galerii?

W czystej wersji sklepu jest to nie możliwe. Dlatego musimy zainstalować nową wtyczkę np.

WooCommerce Variation images gallery

Artykuł Dodawanie nowego produktu w WooCommerce cz. 4 pochodzi z serwisu Kurs WordPress od podstaw.

W moim sklepie były to zwykłe pola wyboru z tekstem podczas gdy w innych pole koloru „rzeczywiście” odzwierciedlało tę barwę. W samym WooCommerce niestety nie ma takich ciekawych opcji. Dlatego jesteśmy zmuszeni zainstalować dodatkową wtyczkę, która da nam taką możliwość.

WooCommerce Variation Swatches – dodatkowe warianty dla atrybutów

Jedną z wtyczek, która oferuje dodatkowe opcje jest WooCommerce Variation Swatches. To praktycznie był mój pierwszy wybór jeśli chodzi o wtyczki zmieniające sposób wyświetlania atrybutów w wariantach w sklepie. Dodaje ona do atrybutów dodatkowe pole wyboru z jego pomocą możemy wybrać jedną z 3 opcji:

• kolor
• obrazek
• przycisk

Instalacja WooCommerce Variation Swatches

Wtyczkę instalujemy jak każdą inną. Myślę, że bez większych problemów znajdziecie ją w repozytorium.

Po aktywacji w panelu pojawi się nowa zakładka Swatches Settings. Po wejściu w nią pokażą nam się opcje konfiguracyjne wtyczki.

Opcje wtyczki wyglądają następująco:

W moim przypadku wykorzystałam jedynie domyślne ustawienia wtyczki. Czyli nic w niej nie zmieniałam.

Na ostatniej stronie w ustawieniach znajduje się coś w rodzaju tutoriala jak skonfigurować wtyczkę. Widać tam też kilka przykładowych wykorzystań pul.

Tworzenie atrybutu z nowymi opcjami na przykładzie koloru

Teraz pokażę wam jak w praktyce wykorzystać tę wtyczkę. W tej chwili dobrze by było gdybyśmy na chwilę cofnęli się do innego mojego wpisu.
Link do wpisu

Po instalacji pluginu dodawanie i modyfikowanie atrybutów przebiega bowiem tak samo, z tym że tak jak wspomniałam powyżej mamy 1 nowe pole „TYP”.

Tak jak zdążyłam wam już napisać pole dodaje 3 nowe opcje. Każda z nich spowoduje dodanie nowego pola dla wartości atrybutu. W przypadku Image (czyli obrazek) będzie to pole wyboru obrazka. W efekcie każda cecha atrybutu może mieć inny obrazek. Tak jak na obrazku z zegarkami.

Ja jednak zdecydowałam się na kolor! I tak po wybraniu typu dla atrybutu i jego zapisaniu moje cechy/ wartości otrzymały pole Color.

Po kliknięciu w opcję wybierz kolor otwiera się paleta dzięki, której można wybrać kolor lub wpisać jego nazwę w RGB.

W podobny sposób można tworzyć lub edytować inne elementy.

Ostatecznie tak wygląda gotowa paletka kolorów w sklepie!

Aktybuty oczywiście dodajemy normalnie do produktów! Zmianie ulegnie bowiem jedynie sposób ich wyświetlania.

A tak się to prezentują się atrybuty po ich skonfigurowaniu z pomocą wtyczki. Rożnica zdecydowanie jest widoczna.

Artykuł Zmieniamy wygląd wariantów z WooCommerce Variation Swatches pochodzi z serwisu Kurs WordPress od podstaw.

Inne części kursu:

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Konkretnie omówię typy produktów jakie można dodać do naszego sklepu w WooCommerce. To jakie typy są dostępne możecie zobaczyć na załączonym poniżej obrazku.

Jak widać posiadamy 4 typy produktów:

• prosty,
• grupowy,
• zewnętrzny/afilacyjny,
• z wariantami

Nieco więcej o tych typach postaram się wam napisać poniżej oraz w jednym z kolejnych wpisów gdzie będę omawiać znaczenie konkretnych pól. Teraz jednak chciałam zwrócić waszą uwagę na znajdujące się na prawo od pola wyboru checkboxy.

Wirtualny produkt

Chodzi mi o pola z napisem Wirtualny i Do pobrania. Jak nietrudno się domyśleć są to pola, stosowane w przypadku gdy nasz produkt nie jest materialny np. jest jakimś plikiem graficznym, e-bookiem. Innymi słowy sprzedajemy go w formie elektronicznej a nie materialnej.

Teraz to od nas zależy czy kupujący będzie mógł go bezpośrednio po zakupie pobrać (zaznaczamy opcję do pobrania) lub sami np. po zaksięgowaniu wyślemy ten plik. Wszystko zależy od tego jakie opcje wybierzemy. Na załączonym powyżej obrazku – wybrałam obie opcje.

Po zaznaczeniu pierwszej czyli Wirtualny w menu zniknęła opcja dotycząca wysyłki. Z kolei zaznaczenie Do pobrania da nam możliwość załączenia pliku. Jeżeli w tej chwili zastanawiacie się jak sprawić by klienci mogli pobierać tylko kreśloną ilość plików odsyłam do zakładki MAGAZYN.

Poniżej zamieściłam obrazek z przykładowo dodanym plikiem do pobrania. W moim projekcie raczej przynajmniej na początku tego typu produkty się nie pojawią.

Grupowy produkt

Tak naprawdę grupowy produkt – to „zestaw” dwóch lub większej ilości produktów. Zapewne każdy z was się już z takim produktem spotkał wiele sklepów oferuje kilka produktów jako zestaw w niższej cenie niż kupione osobno.

Wszystkie produkty, które mają wchodzić w skład naszego grupowego produktu ustawiamy w Powiązane produkty – pole Produkty grupowe.

Tak wygląda przykładowy grupowy produkt (bez obrazka) w skład, którego wchodzą 2 produkty.

Poniżej zamieściłam, krótki filmik z przykładowym dodaniem produktu.

Produkt zewnętrzny/afilacyjny,

Jak sama nazwa mówi dodając tego typu produkt oferujemy naszym klientom, produkt z innego sklepu.

Ostatni typ produktów – czyli Produkt z Wariantami omówię w kolejnym wpisie!

Artykuł Dodawanie nowego produktu w WooCommerce cz. 3 pochodzi z serwisu Kurs WordPress od podstaw.

Kod, który pokaże poniżej powtórzę jeszcze za jakiś czas podczas kiedy będę omawiać szablon, który stworzyłam na potrzeby budowanego przez zemnie sklepu w Woocommerce.

Inne części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Domyślne ustawienie informacji o produkcie

W domyślnym szablonie, ale nie tylko tabsy wyglądają mniej więcej tak jak na załączonym poniżej obrazku. Czyli posiadamy jak gdyby dwie kolumny. W pierwszej jest coś w rodzaj małego menu z przyciskami takimi jak:

• opis
• dodatkowe informacje
• Opinie

Zawartość drugiej kolumny z kolei ulega zmianie w zależności od tego, jaką opcję wybierzemy w prawej kolumnie. Domyślnie jest to opis produktu – taką zawartość ma bowiem pierwsza karta. W przypadku dodatkowych informacji – można tam znaleźć informacje o produkcie np. jakie posiada atrybuty.

Jak przesunąć menu tabów na górę a opis umieścić pod spodem?

Tak aby szerokość pola z opisem się rozciągnęła się na całą szerokość. Czyli zamiast pionowych, uzyskać poziome! Coś podobnego do tego poniżej:

Układ ten wraz z kolorystyką uzyskać można bardzo łatwo z pomocą CSS.

@media screen and (min-width: 768px) {
  .woocommerce-tabs ul.tabs {
    width: 100%;
  }
  .woocommerce-tabs ul.tabs li {
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }
  .woocommerce-tabs ul.tabs li a {
    padding: 1em 1.5em;
  }
  .woocommerce-tabs ul.tabs li:after {
    display: none;
  }

}
  .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li:hover a {
    color: #fff;
    background-color: #11abc2;
  }

@media screen and (min-width: 768px) {
  .woocommerce-tabs .panel {
    width: 100%;
    padding: 0 11px;
  }
}

Powyższy kod posiada ustawiony warunek, powoduje on że zawarty w nim kod obsługiwany jest do momentu kiedy ekran ma szerokość powyżej 768px; Poniżej tej szerokości nie miałam w moim szablonie nie miałam potrzeby wprowadzać istotnych zmian.

Jak zawsze warto pamiętać, że kodu nie należy dokładnie kopiować. Po jego wprowadzeniu do pliku z stylami CSS warto go dostosować do swoich potrzeb. Kod w tym konkretnym przykładzie jest dostosowany do szablonu, który ja buduje na potrzeby sklepu.

Artykuł Zmiana orientacji tabów w sklepie Woocommerce na pionową pochodzi z serwisu Kurs WordPress od podstaw.

W poprzedniej części omówiłam poniekąd jak ustawić większość opcji. Zrobiłam to jednak dość ogólnie. W kolejnej pokaże wam jak dodać nieco bardziej zaawansowane produkty takie jak z wariantami (koszulki – różne rozmiary i kolory).

Dodawanie grafiki

Teraz chciałam jednak poruszyć temat dodawania ilustracji (zdjęć) naszego produktu. WooCommerce posiada bowiem 2 pola przeznaczone na dodawanie zdjęć. Pierwsze to Obrazek produktu. Poniżej umieściłam grafikę jak wygląda uzupełnione takie pole.

W tym polu możemy umieścić tylko jeden obrazek. Jest to oczywiście główny obrazek naszego produktu. Czyli występuje tu analogia jak przy stronach lub wpisach. Drugie pole to „Galeria produktu”. Z pomocą tego pola możemy już dodać więcej zdjęć.

Na wszelki wypadek przypominam, że do czasu zapisania i opublikowania nasz produkt nie będzie widoczny na stromnie. Puki wasz sklep nie jest ogólnie dostępny (czyli nie posiadacie klientów i dopiero wprowadzacie produkty) możecie spokojnie eksperymentować. Najwyżej usuniecie lub będziecie edytować źle dodane produkty.

Nasz produkt w sklepie

Ostateczny wygląd jak nasz produkt będzie się prezentował na stronie zależy od kilku czynników. Jaki typ produktu wybraliście, jakie macie wtyczki oraz z jakiego motywu korzystacie.

Osobiście na potrzeby budowanego sklepu – tworzę motyw potomny czyli child themes. To jak tworzy się taki szablon omówię nieco później – jako ciekawostkę. Choć ta wiedza może się niektórym przydać.

Poniżej zamieściłam screen z innym produktem – posiadającym różne warianty.

A tak prezentują się na stronie sklepu:

Po lewej znajduje się nasza koszulka, która jest dodana jako prosty produkt a po prawej mamy obrazek z telefonem, który dodany jest jako produkt z wariantami. Niech was też nie dziwi informacja poniżej produktu. Warianty posiadają rożne ceny. Z tond też taka informacja. Później pokażę wam jak zmienić ten napis na np. od 5,00. Pomijając 7,00 czyli górną granicę cenową.

Artykuł Dodawanie nowego produktu w WooCommerce cz. 2 pochodzi z serwisu Kurs WordPress od podstaw.

Pozostałe części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Na początek ustalimy gdzie szukać opcji dodawania nowego produktu. A następnie w kolejnych etapach pokaże wam jak go skonfigurować. Proces całkowitej konfiguracji produktu zajmie mnie trochę czasu dlatego podzielę go na kilka części. Dziś pokażę wam jakie funkcje posiada po instalacji WooCommerce.

W kolejnych wpisach dopiero pokażę jak dodawać atrybuty (i przede wszystkim jak je tworzyć). Przygotuję również słowniczek opisujący pola produktu. W zależności od tego z czym planujecie prowadzić sklep inne pola będą wam potrzebne – a dzięki takiemu słownikowi będzie wam łatwiej je znaleźć.

Dodawanie nowego produktu

Zakładkę z produktami znajdziecie w lewej kolumnie panelu administracyjnego Produkty -> Dodaj nowy. Poniżej załączyłam kilka obrazków dokumentujących kolejne kroki.

Otworzy się w tedy karta wyglądem przypominająca klasyczny edytor WordPress. Różni się od niego jedynie ilością pul. Tak więc posiadamy pole na tytuł, opis, opcje publikacji, kategorie, tagi i obrazek. Jednym słowem to co mieliśmy w starym edytorze.

Zasada działania jest też analogiczna – jednak tym razem nie budujemy bloga a sklep. Nowością jest pole poniżej edytora. Zawierające opcje dla produktu.

Kategorie w sklepie

Przykładowe kategorie produktów są dodawane już po instalacji. Jeżeli nam one nie odpowiadają można je usunąć . Wyjątkiem „Bez kategorii” – domyślna główna kategoria sklepu. Kiedy będziecie więc dostosowywać kategorię pod swój własny sklep po prostu zmieńcie nazwę tej kategorii np. na Inne.

Konfigurowanie cech produktu

W tym wpisie nie będę dokładnie omawiała każdego pola. Tych pól jest całkiem sporo – dlatego przygotowałam osobny wpis gdzie znajdziecie tłumaczenie działania.

Do tego produktu będę wracać w następnych wpisach kilkakrotnie. W pewnym sensie pełni on bowiem funkcję testu możliwości dodawania i określania cech.

Ustawienia główne produktu

Na pierwszej karcie konfigurowania produktu znajdziemy informacje o jego statusie i cenie. Każde pole ma swoje określone zadanie.

W związku z tym, że jest to np. mój pierwszy produkt jedynym polem jakie tu wypełnię jest cena.

Magazyn

Kolejną kartą jest magazyn a właściwie to zarządzanie magazynem. Jest to karta, w której możemy ustawić zarządzanie magazynem. Funkcja ta jest niezbędna jeśli posiadamy ograniczoną ilość produktu.

Wysyłka

W tej karcie ustalamy cechy produktu istotne do jego wysyłki. Czyli np. wymiary i wagę. Dokładniej przyjrzymy się tej funkcji jednak nieco później.

Powiązane produkty

Powiązane produkty to karta na, której znaleźć można możliwość powiązania ze sobą różnych produktów. Dostępne mamy 2 sposoby powiązania dokładnie powiem o nich później. W tym miejscu chciałam zasygnalizować, że nawet jeśli nie dodacie nowych powiązanych produktów, sklep sam wybierze kilka produktów z tej samej kategorii.

Produkty te będą wyświetlać się pod opisem produktu. W momencie kiedy dodamy powiązany produkt, który spokojnie myślę można nazwać proponowanym lub sugerowanym będą się one nadal wyświetlać, ale poniżej proponowanych.

Atrybuty

Tak jak pisałam wcześniej o tym jak dodawać atrybuty będę pisać w innym wpisie. Dlatego tu tylko wam pokażę jak je dodawać. Nie oznacza to jednak, że z poziomu produktu nie możemy dodawać na szybko nowych atrybutów lub ich cech.

O tym jak dodać nowy atrybut napisałam osobny wpis.

Przykładowo mam dodany jeden atrybut – kolor. Widać to na załączonym poniżej obrazku. W celu jej dodania wybiorę ją z listy.

Następnie wybieram cechy jakie ma atrybut. Jak widać mój atrybut kolory posiada kilka wartości.

A tak się one prezentują po dodaniu. Kiedy już je dodamy zapisujemy atrybuty.

Jeżeli do atrybutu nie dodamy właściwości przed zapisaniem – zniknie on.

Zaawansowane

Ostatnią kartą są ustawienia Zaawansowane. Jej szczegóły możecie zobaczyć na poniższym obrazku:

Podsumowanie

Ten wpis skończę w tym miejscu jest bowiem już wystarczająco długi. Oczywiście nie omówiłam wszystkich możliwości jakie dostępne są podczas dodawania produktu. W WooCommerce jest całkiem sporo opcji i trudno jest omówić je wszystkie naraz.

W drugiej części pokażę jak dodawać grafiki (stworzyć galerią zdjęć) oraz budować bardziej zaawansowane produkty np. różne warianty, produkty grupowe. Dlatego zapraszam do kolejnej części.

http://wordpress.aurainweb.pl/2019/03/18/dodawanie-nowych-atrybutow-do-sklepu-woocommerce/

Artykuł Dodawanie nowego produktu w WooCommerce cz. 1 pochodzi z serwisu Kurs WordPress od podstaw.

Pozostałe części

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Co to jest atrybut?

Zaczniemy może od prostego pytania czyli po co nam są te „atrybuty” i co to właściwie jest? A więc atrybuty określają cechy, właściwości konkretnego produktu. Przykładowymi atrybutami są

• kolor (np. niebieki, zielony)
• rozmiar (36,48, L, M)
• skład produktu (np. len, bawełna)

To oczywiście tylko przykłady, takich atrybutów może być o wiele więcej. To jakie będą nam potrzebne zależy jednak od tego co będzie oferował nasz sklep. W moim przypadku powyższe atrybuty są jak najbardziej na miejscu. Bo buduje sklep w którym będzie można nabyć odzież.

Dodajemy pierwszy atrybut produktu

Atrybuty znajdują się w panelu administracyjnym Produkty-> Atrybuty.

Po wejściu w nie otworzy się okno z dwoma kolumnami (poza lewą kolumną panelu administracyjnego). W pierwszej od lewej mamy możliwość dodawania nowych atrybutów w drugiej zaś mamy listę gotowych atrybutów. Jak widać na obrazku aktualnie nie ma, w sklepie żadnego atrybutu.

W związku z czym dodamy teraz nasz pierwszy atrybut. Będzie to kolor! Wy jednak możecie dodać inny bardziej wam przydatny. Nie muszę chyba zbytnio opisywać co należy wpisać w dane pole. Działa ono analogicznie jak inne elementy WordPress tego typu (np. kategoria, tagi)

Dla każdego atrybutu możemy stosować 4 sposoby sortowania (czyli kolejności ustawiania właściwości).

Po uzupełnieniu pul dodajemy nasz atrybut. Po zapisaniu pojawi się on w prawej kolumnie. Oczywiście w tym momencie nie posiada on, żadnych wartości. Nadaliśmy mu tylko nazwę. Dlatego teraz klikamy w „konfiguruj taksonomię” lub nazwę atrybutu.

Przenosimy się w tedy do prawie identycznej karty gdzie możemy dodawać wartości.

W moim przypadku to nazwy kolorów. Tak więc wpisuję kolory, które będą mi potrzebne np. czarny, niebieski. W sklepie, który aktualnie tworzę kolory oznaczane są numerami nie ma więc koloru białego tylko k1. Jednak jak coś takiego ogarnąć pokażę później.

Kiedy atrybut będzie gotowy będziemy mogli skorzystać z niego podczas dodawania lub edytowania produktów.

Dodawanie atrybutu z poziomu nowego produktu

Atrybuty możemy także dodawać podczas tworzenia nowego produktu. Nowy atrybut dodajemy w zakładce Atrybuty (w Danych produktu). W celu dodania nowego atrybuty wybieramy z rozwijanej listy opcję Nowy atrybut i klikamy Dodaj.

Otworzy się w tedy okno z możliwością dodania nowego atrybutu. Następnie tworzymy właściwości atrybutu. Kiedy wszystko będzie gotowe Zapisujemy atrybuty.

Wyświetlanie w sklepie

W zależności od tego jaki rodzaj produktu utworzymy atrybuty na karcie produktu w sklepie będą pokazywać się w różnych miejscach.

Jednym z takich miejsc znajduje jest karta Dodatkowe informacje. W tej karcie zobaczyć możemy wszystkie atrybuty produktu (niezależnie od wariantów) oraz ich wartości.

Artykuł Dodawanie nowych atrybutów do sklepu WooCommerce pochodzi z serwisu Kurs WordPress od podstaw.

Części kursu

• Instalacja WooCommerce – budujemy nasz własny sklep z WordPress
• Budujemy sklep internetowy z WooCommerce
• Dodawanie nowego produktu w WooCommerce cz. 1
• Dodawanie nowego produktu w WooCommerce cz. 2
• Dodawanie nowego produktu w WooCommerce cz. 3
• Dodawanie nowego produktu w WooCommerce cz. 4
• Zmiana orientacji tabów w sklepie Woocommerce na pionową
• Dodawanie nowych atrybutów do sklepu WooCommerce
• Zmieniamy wygląd wariantów z WooCommerce Variation Swatches

Instalacja WooCommerce

Skoro zdecydowaliście się zacząć ten „kurs” zakładam, że umiecie już zainstalować zwykłą wtyczkę w WordPress. W razie co na blogu znajdziecie krótki opis tego procesu.

Po zainstalowaniu wtyczki klikamy w przycisk aktywuj i następnie postępujemy zgodnie z krokami konfiguracja. W ten sposób może nie zaoszczędzimy czasu, ale będziemy mogli nieco poznać działanie tworzonego przez nas sklepu.

Na pierwszej karcie – „Ustawienia sklepu” zaczynamy od wybierania rynku na którym będziemy chcieli sprzedawać. W moim przypadku będzie to rynek Polski.

Wprowadzamy także informacje o lokalizacji naszego sklepu. Wiem, że to dziwnie brzmi bo niezakładany lokalnego tylko internetowy jednak musimy uzupełnić to pole.

Najlepiej wpisać adres na jaki chcemy otrzymywać w przyszłości korespondencję lub ten na który zarejestrowaliśmy firmę.

Ustalamy tutaj również walutę jaką będzie obsługiwał nasz sklep oraz jakie produkty będziemy sprzedawać. Prawdziwe czy wirtualne!

Poniżej znajduje się pole z zapytaniem czy chcemy pomóc usprawnić działanie wtyczki poprzez udostępnienie danych. Warto przeczytać co dokładne jest tam napisane. Jeśli nie wyrażamy zgody – wystarczy odznaczyć pole.

Na koniec klikamy przycisk „Startujemy” i przechodzimy do kolejnej karty czyli Płatności!

Od razu możemy skonfigurować nasz sklep z PayPal, ale to nie jedyna opcja jaką nam tu jest oferowana. Poniżej znajduje się rozwijane pole „zbieraj płatności od klientów w trybie offline”.

Możemy tutaj włączyć opcje takie jak „Tradycyjna płatność”, „Przelew bankowy” czy „za pobraniem”. Tylko od nas zależy na co się zdecydujemy.

Kolejna karta to Wysyłka. Konfigurujemy tutaj podstawowe koszty wysyłki (dla płaskiej stawki). Jak widać nie mamy tu za dużo opcji. W celu ich dodania możemy skorzystać z dodatkowych rozszerzeń.

Teraz nie będę ich instalować zajmę się tym później, kiedy będę już wiedziała jakie mam konkretne stawki.

Następna karta to rekomendowane dodatki do WooCommerce. Ich zadaniem jest usprawnienie pracy sklepu. Znajdują się wśród nich gotowy motyw do sklepu, automatyczne stawki podatkowe, wtyczka zajmująca się wysyłką e-mail.

Jeżeli nie chcemy ich instalować wystarczy te opcje odznaczyć. Nie mniej jednak dwie ostatnie mogą być bardzo przydatne, podczas prowadzenia sklepu.

Teraz konfigurator zaproponuje nam dodanie Jetpack. Muszę przyznać że to dość użyteczna wtyczka. Dzięki jej dodaniu zyskujemy min. Statystyki do sklepu lub możliwość promocji produktów.

Już prawie przed nami koniec wstępnej konfiguracji. Została nam jeszcze jedna karta gdzie mamy proponowane dodanie pierwszego produktu.

Na tej stronie znajdziemy kilka ciekawych opcji jak chociaż by link do poradnika wideo czy możliwość rejestracji do newslettera. Takie dodatki mogą się okazać bardzo przydatne szczególnie jeśli nigdy nie prowadziliśmy do tej pory sklepu.

W tym momencie możemy już zacząć prowadzić nasz sklep!

Artykuł Instalacja WooCommerce – budujemy nasz własny sklep z WordPress pochodzi z serwisu Kurs WordPress od podstaw.