Przewodnik projektantów po WooCommerce

Jeśli projektujesz sklep WooCommerce, taki jak Shopify, lub rozwijasz istniejący motyw WooCommerce, ten artykuł Designers Guide To WooCommerce jest dla Ciebie. Ta kompozycja zawiera nieco więcej informacji na temat stylizacji, zmiany projektów i innych informacji, które obejmują powiązane strony WooCommerce.

Ta wtyczka jest narzędziem przyjaznym dla użytkownika i bardzo elastycznym; jednak nie wszystkie witryny będą obsługiwane. Korzystając z funkcji i podejść wspieranych przez WooCommerce, możesz przyspieszyć proces projektowania i rozwoju.

Pozwala użytkownikom dostosować modyfikacje, ale za dodatkową opłatą. Najszybszym sposobem sprawdzenia dostępnych funkcji jest odwiedzenie demonstracji Storefront w WooCommerce. Jeśli potrzebujesz jakiegoś sposobu, aby ogólnie nauczyć się korzystać z Woocommerce, zapoznaj się z przewodnikami po kopułach, które pomogą Ci zacząć. WooCommerce tworzy następujące nowe strony. Istnieją rodzaje stron, dla których będziesz musiał zaprojektować.

Pierwsza to strony produktów. Te strony mają dwa rodzaje, a mianowicie: strony archiwum produktów i pojedyncze strony produktów.

Strony archiwum produktów wyświetlają miniatury dostępnych kategorii produktów. Po kliknięciu miniatury kategorii wyświetlają one inną stronę archiwum produktów. Następnie wyświetla pojedynczy produkt po kliknięciu miniatury produktu.

Drugi rodzaj to pojedyncze strony produktu. Tutaj wyświetlają one pojedyncze produkty i łączą zdjęcia produktów, informacje nagłówka produktu, szczegółowe informacje o produkcie oraz powiązane produkty, sprzedaż krzyżową i sprzedaż dodatkową.

Zawiera również strony specjalne , które obejmują koszyk i kasę . Koszyki są zwykle wyświetlane w formie skondensowanej jako widżet paska bocznego, czasami w formie rozwiniętej na stronie koszyka wraz z informacjami o dostawie. Z drugiej strony, kasa ma miejsce wtedy, gdy klient się kończy i wymaga podania informacji adresowych.

Różne rodzaje produktów

To narzędzie ma różne rodzaje produktów;

Pierwszy to nagłówek produktu podzielony na pięć części. To są:

1. Nazwa produktu – są one wyświetlane na stronach podsumowania/archiwum i pojedynczych stronach
2. Cecha produktu – Zobaczysz na stronach podsumowania/archiwum i stronach singli
3. Obraz — Polecane obrazy są wyświetlane w podsumowaniu, a dodatkowe obrazy na stronie pojedynczego produktu
4. Długi opis — jest wyświetlany w obszarze Opis produktu na dole strony pojedynczego produktu
5. Krótki opis – jest wyświetlany u góry strony pojedynczego produktu

To narzędzie pozwoli również użytkownikowi na produkt.

Każda kategoria wymaga dostarczonego obrazu kategorii i opisu, a także może mieć podkategorie. Na przykład But to kategoria, a marka butów to podkategoria. Archiwa kategorii produktów są generowane automatycznie z następującymi sekcjami: tytuł lub nazwa kategorii, opis kategorii, jedna miniatura kategorii dla każdej podkategorii aktualnej kategorii, opcjonalne miniatury produktów zawierające tytuł, cenę i Dodaj do koszyka dla każdego produktu w aktualna kategoria. Kliknięcie kategorii otwiera nową kategorię, kliknięcie miniatury produktu otwiera produkt.

Ponadto w ramach stron produktów są one generowane automatycznie z następującymi elementami:

Zdjęcia produktów — są to zdjęcia polecane i zdjęcia uzupełniające produktu. Tytuł produktu, cena produktu, krótki opis produktu, ilość do dodania do koszyka (z + i kontrolkami), przycisk Dodaj do koszyka, kategorie SKU produktu (jednostka magazynowa) i tagi.

Zakładki produktów zawierają długi opis produktu, w tym opcjonalną galerię zdjęć, dodatkowe informacje, takie jak bilet atrybutów produktu do wyświetlenia na stronie produktu oraz opcjonalne recenzje produktów. Kliknięcie kategorii otwiera nową kategorię, kliknięcie miniatury produktu otwiera produkt.

Upsells – są to elementy, które „mogą Ci się spodobać”, po których następują kciuki/tytuły dla upsellingów.

Sprzedaż krzyżowa — są to powiązane produkty, po których następują miniatury.

Prezentacja produktu, opcje to prezentacja standardowa i opcjonalna. Standard wyświetla wyróżniony obraz u góry strony produktu, a dodatkowe miniatury zdjęć poniżej w 3 kolumnach miniatur. Natomiast prezentacja Opcjonalna wyświetla polecany obraz bez miniatur pod spodem i wyświetla wszystkie obrazy na karcie Opis.

Kolejną częścią narzędzia są widżety wyszukiwania produktów, które można umieszczać w widżetach paska bocznego lub widżetach stopki. Jeśli chcesz wyszukać dowolną witrynę, dostępne są opcje wyszukiwania w całej witrynie. Poniżej znajduje się pole wyszukiwania produktów, które umożliwia wyszukanie nazwy produktu, krótkiego opisu i długiego opisu. Inny dział opcji wyszukiwania szerokiego to drążenie kategorii. Jest to rozwijane pole, które umożliwia wybór dowolnej kategorii lub podkategorii. Zestaw chmury tagów Dumny posiada rozwijane menu, które pozwoli Ci wybrać tagi cenowe.

Widżety wyszukiwania opcji wyszukiwania kategorii produktów pojawią się tylko wtedy, gdy wyświetlane są automatycznie wygenerowane archiwa kategorii produktów. Pierwsza to nawigacja warstwowa. Pozwala to użytkownikowi dopracować produkty w oparciu o atrybuty i skutecznie pomaga użytkownikowi w tym, czego szuka. Filtr ceny produktu — wyświetla przesuwaną skalę umożliwiającą filtrowanie produktów w określonym przedziale cenowym. Bestsellery — wyświetla tytuł/kciuk/cenę dla automatycznie wybranej listy najlepiej sprzedających się produktów. Polecany produkt wyświetla tytuł/kciuk/cenę dla produktów oznaczonych jako polecane produkty. Wyprzedaż: wyświetla produkty, dla których oprócz ceny wprowadzono cenę sprzedaży.

Jeśli użytkownik chce stylizować swój WooCommerce, mamy opcje takie jak kciuki produktu. Gdy produkty pojawiają się jako kciuki produktów, wyświetlane są 4 elementy, w tym miniatura, tytuł, cena, dodaj do koszyka. Styl CSS, którego można użyć do tła produktu, obramowania produktu, dopełnienia i marginesu. Dalej jest miniatura. Należą do nich obramowanie, dopełnienie i marginesy. Tytuł zawiera czcionkę, wagę, kolor i rozmiar, tak samo jak cena. Pod dodaj do koszyka zawiera kolor przycisku, kolor etykiety, obramowanie i promień.

Na narzędziu pokazana jest również naklejka wyprzedażowa, a słowo „wyprzedaż” pojawia się nad kciukiem produktu na wyprzedaży — można użyć stylizacji CSS: kolor tła, kolor czcionki, kolor obramowania. Szerokość obramowania, obramowanie pełne/przerywane, promień obramowania.

Warianty produktów umożliwiają klientowi ustawienie produktu odzieżowego, który jest dostępny w różnych kolorach lub różnych wzorach. Gdy używane są odmiany produktów, strony archiwum produktów będą wyświetlać przycisk „Wybierz opcje”, a nie przycisk Dodaj do koszyka.

Podsumowując, przedstawiliśmy główne elementy, o których musisz pomyśleć podczas projektowania sklepu WooCommerce. Wyjaśniliśmy różne rodzaje stron, informacje o produktach oraz opcje wyszukiwania i stylizacji. Baw się dobrze, budując swój sklep WooCommerce.

Przeczytaj więcej o motywach WordPress Woocommerce tutaj.