Kategorie
Bez kategorii

Dodawanie produktu w sklepie WooCommerce

Na podstawie sklepu internetowego Gouranga – Centrum Ajurwedy w Szczecinie.

Sklep z suplementami ajurwedyjskimi utworzono dzięki oprogramowaniu Open Source: WordPress + WooCommerce.

Wygląd w trybie WYSIWYG edytowanej strony produktu zawdzięcza wtyczce Block Editor for WooCommerce. Dotyczy długiego opisu.

Kolejność sekcji strony produktu na froncie witryny

  1. Menu nawigacyjne wg kategorii sklepu (ang. breadcrumbs).
  2. Etykiety, np. „Promocja!”
  3. Zdjęcie główne produktu
  4. Miniatury galerii zdjęć
  5. Tytuł produktu
  6. Cena
  7. Krótki opis
  8. Etykiety graficzne / Tagi produktu
  9. Przycisk Dodaj do koszyka
  10. SKU oraz atrybuty produktu
  11. Długi opis
  12. Produkty powiązane Up-sell
Widok na froncie witryny
Wygląd stworzonej w poradniku strony produktu

Tworzenie nowego produktu

Menu witryny (po lewej): Produkty → Dodaj nowy

Tworzenie nowego produktu
Tworzenie nowego produktu

Tip: Domyślnie edytor uruchamia się w trybie pełnoekranowym. Można to zmienić klikając w ikonę 3-kropkową w górnym prawym rogu.

Opcje edytora Tryb pełnoekranowy
Tryb pełnoekranowy
Tytuł produktu
Tytuł produktu

Tip: Aby uzyskać tzw. twardą spację w celu uniknięcia łamania wiersza, jak w połączeniach z jednostkami, np. 100 g, można wprowadzić ją:

  • Windows: Lewy Alt + 255 (z klawiatury numerycznej)
  • Mac: Opt + Space

Tworzenie długiego opisu

Po wprowadzeniu kursora w główne pole, już można zacząć pisać tekst. Domyślnie zaczynamy od akapitu. Jeśli opis jest obszerniejszy, warto nadawać nagłówki.

Akapit długiego opisu i opcje formatowania
Akapit długiego opisu i opcje formatowania
Bloki edytora
Inne typy bloków

Tip: Pasek na górze okna wyboru bloku służy do filtrowania, np. zaczynając pisać „tab”…, zostanie tylko blok „Tabela”.

Dodawanie tabeli
Dodawanie tabeli
Edycja tabeli
Edycja tabeli

Struktura strony produktu i hierarchia nagłówków

Każda porządna strona powinna mieć logiczną strukturę, którą m.in. wyznaczają nagłówki: Tytuł produktu (nagłówek poziomu 1. – H1), następnie poziomu 2., 3. itd.
Uwaga! Oprogramowanie WooCommerce rezerwuje sobie nagłówek poziomu H2 dla tytułów sekcji (Opis, Opinie i in.) dlatego w opisie produktu należy wybierać nagłówki H3 i dalej.

Można od razu wybrać blok Nagłówek lub zamienić zapisany już standardowy akapit, jak niżej:

Zamiana typu bloku na nagłówek
Zamiana akapitu na nagłówek
Zamiana poziomu nagłówka
Zamiana poziomu nagłówka

Dostępne też są inne zamiany, jak kilku akapitów w listę (domyślnie nienumerowana).

Zamiana kilku akapitów na listę
Zamiana kilku akapitów na listę

Obrazki – Zasady

Rozmiary

Optymalny rozmiar obrazka zawiera się w kwadracie 640 × 640 px, co wynika z layoutu witryny (szerokości szpalty głównej na ekranie typu desktop).

System automatycznie zmniejsza większe obrazki do podwójnego rozmiaru, tzn. 1280 px.

Automatycznie zamienia też obrazki w formacie PNG na JPG.

Preferowane są kwadratowe obrazki JPG o boku min. 640 px.
Dowolne proporcje zostaną uwzględnione w ramce głównego zdjęcia produktu. Trzeba mieć świadomość, że niekwadratowe obrazki zostaną przycięte do kwadratu – na listach produktów i dla wszelkich miniatur.

Nazwy plików

Nazwy plików obrazków po przesłaniu automatycznie stają się opisami, pod warunkiem wysyłania ich przez przycisk Biblioteka mediów (nie metodą „przeciągnij i upuść” wprost w edytorze).

Warto zapisywać nazwy plików wykorzystując duże/małe litery, spacje, polskie znaki diakrytyczne oraz interpunkcyjne.

Nazwy plików obrazków
Nazwy plików obrazków przed przesłaniem

System automatycznie usuwa znaki, które mogłyby być problematyczne jako nazwy źródeł (URL), jednak zanim to zrobi, nazwę w pierwotnym zapisie wykorzystuje do opisów obrazka.

Dodanie ilustracji do długiego opisu

Wybierz blok Obrazek,
Przycisk: Biblioteka mediów

Dodanie ilustracji w treści długiego opisu
Dodanie ilustracji w treści długiego opisu – Przycisk Biblioteka mediów
Okno wysyłania pliku obrazka
Okno wysyłania pliku obrazka

Gdy pojawi się ww. okno, wtedy można przeciągnąć plik z eksploratora plików do okna przeglądarki.

Tip: Można też przeciągać na okno Biblioteka mediów. Upewnić się, że okno zmienia kolor na niebieski z napisem „Upuść pliki tutaj, aby je dodać”.

Opisy obrazka
Opisy obrazka automatycznie. Etykieta opcjonalnie.

Alternatywny opis (niewidoczny na froncie) jest ważny pod kątem dostępności, co wpływa na lepsze pozycjonowanie.
Etykieta domyślnie staje się podpisem widocznym na stronie, jako podpis obrazka (gdy dodany w opisie głównym).

Wyrównanie obrazka
Wyrównanie obrazka (i inne opcje)

Obrazek główny i galeria produktu

Obrazek produktu
Obrazek produktu
Dodawanie obrazka głównego
Dodawanie obrazka głównego

Do galerii produktu można wysyłać wiele plików na raz; wszystkie zostaną zaznaczone „ptaszkami”.

Dodawanie obrazków do galerii
Dodawanie obrazków do galerii produktu

Po dodaniu, w okienku Galeria produktu, można przestawiać miniatury w celu zmiany kolejności.

Krótki opis – Ważny tekst

Krótki opis
Krótki opis produktu

Dodatkowo wprowadziłem licznik znaków, który po przekroczeniu liczby 158 ostrzega, że tekst już może się nie zmieścić w całości w opisie wyniku wyszukiwania Google.

Ten sam tekst wykorzystywany jest w protokole Open Graph, który służy do transmitowania informacji do mediów społecznościowych.
W Facebooku zmieści się ok. 80 pierwszych znaków.

Aby ustawić indywidualny opis oraz tytuł dla FB i Twittera można skorzystać z ostatniej sekcji w głównym wątku edytora – Yoast SEO.

Opcje zaawansowane dla mediów społecznościowych
Opcje zaawansowane dla mediów społecznościowych

Można się spodziewać udostępnienia na Facebooku jak niżej:

Wpływ ustawień zaawansowanych
Wpływ ustawień zaawansowanych

Dane produktu

Zakładki:

  1. Ustawienia główne
  2. Magazyn
  3. Wysyłka
  4. Powiązane produkty
  5. Atrybuty
  6. Zaawansowane

Na pierwszej zakładce najważniejsze, czyli cena produktu.

Magazyn

Stany magazynowe i zarządzanie stanem nie są wymagane, ale zalecam wprowadzanie unikalnego kodu/numeru SKU.

Dane produktu Magazyn
Dane produktu – Magazyn

Powiązane produkty

Pola niewymagane.
Jeśli używane, zalecam max. 2 w sekcji Up-sell
i 1 produkt w Cross-sell.

Dane produktu Powiązane produkty
Dane produktu – Powiązane produkty

Up-sell wyświetlane są na końcu strony produktu, w sekcji pt. Możesz lubić także…

Cross-sell – w podsumowaniu koszyka, w sekcji Zobacz inne równie interesujące…

Produkt cross-sell w koszyku
Produkt cross-sell w koszyku

Atrybuty produktu

Obecnie zdefiniowane są atrybuty:

  1. Producent
  2. Kraj pochodzenia
  3. Dystrybutor w Polsce
Dane produktu Dodawanie atrybutów
Dodawanie atrybutów – Wybór z listy
Dodawanie atrybutów
Dodawanie wartości atrybutu Producent
Dodawanie atrybutów
Pamiętaj o zapisaniu dodanych atrybutów

Panel „Dokument” – ciąg dalszy

Kategorie produktu

Należy wybrać z dostępnych na liście. Można więcej niż jedną, ale wtedy trzeba wybrać domyślną.

Panele dokumentu Kategorie i tagi produktu
Panele dokumentu – Kategorie i tagi produktu

Tagi produktu

Tagi wykorzystywane są do:

  1. Dodawania znaków graficznych, po krótkim opisie.
  2. Dodawania wstawek tekstowych na końcu długiego opisu.

Tag jest proponowany spośród zdefiniowanych (zaraz pod okienkiem) jeśli zaczniemy wpisywać pierwsze dwie litery.

Tagi graficzne

  1. Vegan Society
  2. Vegan
  3. 100% Bio
  4. Bio
  5. 100% Organic
  6. Fair Trade Forum India
  7. Organic Soil Association
    (wraz z poprzedzającym znakiem EU Organic)
  8. FairWild
  9. 1% for the Planet
  10. Fair for life
  11. GMO Free
  12. Gluten Free
  13. Sugar Free
Znaki graficzne dodawane wg wybranych tagów
Znaki graficzne dodawane wg wybranych tagów

Jak wyglądają wszystkie po dodaniu? → strona dostępna dla zalogowanych.

Inne tagi

  1. Suplementy diety

Dodaje na końcu długiego opisu klauzulę:

Uwaga: Suplement diety nie może być stosowany jako substytut (zamiennik) zróżnicowanej diety. Zrównoważony sposób żywienia i zdrowy tryb życia są ważne dla zachowania dobrego stanu zdrowia.

Uwagi

Do produktów Viridian (wybór atrybutu) dodawany jest automatycznie akapit (przed klauzulą Suplementy diety):

Suplementy diety Viridian nie zawierają powszechnie używanych substancji wypełniających i przeciwzbrylających np. stearynianu magnezu (soli magnezowych kwasów tłuszczowych), dwutlenku tytanu itp.

Nie korzystać z komendy Cofnij w polu krótkiego opisu! Błąd wtyczki.

Poradniki obsługi WooCommerce – po polsku

Czy ten post był przydatny?

Kliknij na ile gwiazdek oceniasz

Średnia: 4.5 / 5 (Oceniono 4 razy)

Bądź pierwszą osobą, która oceni ten post.

Dziękuję za ocenę! 🙂

Bądź ze mną w mediach społecznościowych

Przykro mi, że oceniasz post za nieprzydatny 🙁

Podpowiesz co można poprawić?

Twoje wskazówki:

6 odpowiedzi na “Dodawanie produktu w sklepie WooCommerce”

Fajna stronka. Jak zrobione są zawieszone tła na stronach Masaże, Zabiegi ajurwedyjskie itd., że ładnie się skalują? Robi to wtyczka, czy do każdej strony doczepiany jest customowy kod CSS?

Dzięki! Nie ma wtyczki do teł. Można sobie podejrzeć CSS w narzędziach developerskich przeglądarki – na elemencie DIV o klasie inside-article jest przesłonka gradientowa, natomiast na pseudoelemencie ::before zdefiniowane jest układanie się obrazka tła. Sam URL obrazka przekazywany jest przez Custom Field.

Niestety, trzeba zanurkować w kod HTML. Być może w „wolniejszym czasie” opiszę jak opracowałem CSS, bo faktycznie nie jest trywialny. Powodzenia!

A w jaki sposób aktywować edytor Gutenberg w opisach produktów ze sklepu Woocommerce? U mnie cały czas uruchamia się edytor klasyczny i nie mam pojęcia jak to przełączyć….

We wstępie tego poradnika wspominam o wtyczce. Niestety, nie jest rozwijana. Nie polecałbym w poważnych przedsięwzięciach. Z drugiej strony, kod który zostałby po tej wtyczce, w odczycie jest w pełni kompatybilny z mechanizmem WordPressa.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *