Jak stworzyć witrynę WooCommerce z obsługą Elementora

Opublikowany: 2021-10-28

Nie wystarczy, że sama platforma WordPress jest najpopularniejszym systemem zarządzania treścią (CMS) na świecie. Mamy również najpopularniejsze narzędzia do tworzenia stron i platformy e-commerce w Elementor i WooCommerce. W związku z tym sensowne jest wykorzystanie wszystkich trzech do stworzenia świetnie wyglądającego i wydajnego sklepu internetowego.

Jeśli to rozłożymy, WordPress jest idealny do organizowania Twoich postów, stron i produktów. WooCommerce oferuje ścisłą integrację z platformą dzięki swoim programistom (Automattic). Co więcej, Elementor zapewnia potężne i intuicyjne budowanie stron metodą „przeciągnij i upuść”. To kompletne rozwiązanie do budowania sklepu bez kodu.

W tym artykule przyjrzymy się, jak zbudować sklep za pomocą Elementora i WooCommerce. Przez cały czas przyjrzymy się, w jaki sposób oba te elementy łączą się, aby zapewnić największą elastyczność witryny.

Dlaczego WordPress, Elementor i WooCommerce dobrze ze sobą współpracują

Warto przyjrzeć się bliżej, jak WordPress, Elementor i WooCommerce mogą łączyć się, aby pomóc Ci stworzyć najlepsze sklepy internetowe.

Strona główna WordPress.org.

Na początek WordPress jest najczęściej używanym CMS na rynku. Oczywiście to nie wystarczy, aby zapewnić tak dominującą pozycję wśród użytkowników. W rzeczywistości przyjrzeliśmy się temu w poprzednim poście, więc zachęcamy do dalszego czytania tego postu. Krótko mówiąc, jest to bezpieczna, stabilna i skalowalna platforma, na której możesz zbudować.

Skoro o tym mowa, masz też WooCommerce. Ponieważ Automattic rozwija wtyczkę, ma świetną integrację z rdzeniem WordPress, ale to nie wszystko.

Witryna WooCommerce.

To także najpopularniejsza platforma eCommerce. W ekosystemie WordPress ma około 20 procent udziału, co przekłada się na około osiem procent wszystkich stron internetowych. Dla porównania Shopify ma około pięciu lub sześciu procent udziału w rynku. Ponownie, dane dotyczące użytkowania to nie wszystko.

WooCommerce przejmuje proces tworzenia sklepu internetowego i usprawnia ten proces. Możesz zacząć działać w ciągu kilku minut i mieć solidną, wydajną i rozszerzalną platformę e-commerce gotową do uruchomienia.

Aby je połączyć, masz Elementora. Ma również duży udział w rynku w swojej dziedzinie i ogromną bazę użytkowników.

Strona główna Elementora.

Jest to narzędzie do tworzenia stron typu „przeciągnij i upuść” z unikalnym podejściem, które pomoże Ci zbudować całą witrynę od podstaw. Jest to kuszące rozwiązanie, ponieważ istnieje wiele zaawansowanych funkcji i funkcjonalności, których nie mają inne narzędzia. Najbardziej odpowiedni jest tutaj dedykowany WooCommerce Builder.

Krótko mówiąc, Elementor to wtyczka z dużą ilością cali kolumn na blogu WPKube i powinieneś przejrzeć nasze archiwa, aby zobaczyć, co może zrobić.

Czego witryna WooCommerce potrzebuje od kreatora stron

Domyślnym wnioskiem z ostatniej sekcji jest to, że Elementor może zapewnić odpowiednią kombinację funkcji i funkcjonalności, których WooCommerce potrzebuje, aby przenieść Twoją witrynę na wyższy poziom. Chociaż ważne jest, aby dowiedzieć się, dlaczego tak jest i co oferuje.

Ogólnie rzecz biorąc, witryna WooCommerce potrzebuje następujących elementów od kreatora stron:

  • Ścisła integracja, aby nie było konfliktów między kreatorem stron a WooCommerce.
  • Mnóstwo opcji dostosowywania, które pomogą wyróżnić Twoje produkty i strony sklepu.
  • Sposób na edycję poszczególnych elementów składających się na typową stronę produktu.
  • Dodatkowa funkcjonalność, która pomoże Ci „ulepszyć” Twój sklep.

Powinieneś (oczywiście) również zwrócić uwagę na swoje indywidualne potrzeby. Na przykład możesz znaleźć formularze i wyskakujące okienka, które są ważne dla Twojego sklepu i strategii sprzedaży. Dobrą wiadomością jest to, że Elementor jest w stanie sprostać Twoim potrzebom.

Na przykład ma świetne narzędzie do tworzenia wyskakujących okienek, które działa jako uczta dla wyprzedaży, ofert ograniczonych czasowo, kuponów i wielu innych:

Kreator wyskakujących okienek Elementor.

Możesz je tworzyć tak samo jak inne szablony stron i możesz je zastosować w mgnieniu oka. Co więcej, możesz je dostosować w niemal dowolny sposób. Jest to idealne rozwiązanie, jeśli masz określoną kampanię do promowania w swojej witrynie.

Jak wybrać odpowiedni motyw WooCommerce?

Nie będziemy tutaj wchodzić w szczegóły, ponieważ omawiamy to w naszym samouczku, a także podsumowujemy kilka tematów w dedykowanym artykule.

Główną kwestią, której potrzebujesz w tym przypadku, jest motyw zgodny z Elementorem i WooCommerce. Nawet szybkie spojrzenie na witryny premium z rynkiem pokaże, że wiele motywów to reklamuje, więc masz szeroki wybór.

Mimo to istnieje kilka wyróżniających się motywów, o których możemy wspomnieć:

  • Witryna sklepowa. Prawdopodobnie będzie miał najmniejszą kompatybilność z Elementorem w przyszłości, ponieważ Edytor bloku jest technologią natywną. Jeszcze,
  • Cześć. To jest pusty motyw startowy Elementora i jest idealny do tworzenia od podstaw witryny WooCommerce. Oczywiście, jeśli masz mniej wolnego czasu, warto wybrać inny, bardziej funkcjonalny motyw.
  • GenerujPrasę. To topowy motyw z elastyczną infrastrukturą. Oznacza to, że niezależnie od tego, czy używasz Edytora bloków, Elementora, czy czegoś innego, Twój sklep będzie wyglądał niesamowicie.

Zachęcamy do znalezienia odpowiedniego motywu, zanim zaczniesz tworzyć swoją witrynę. Pamiętaj, że najlepsze wyniki uzyskasz z czymś kompatybilnym z Elementorem i WooCommerce.

Jak stworzyć witrynę WooCommerce z obsługą Elementora w 3 krokach?

W pozostałej części tego artykułu pokażemy, jak używać Elementora i WooCommerce do stworzenia witryny e-commerce. Należy zwrócić uwagę na trzy kroki:

  • Zainstaluj i skonfiguruj WooCommerce.
  • Twórz linie produktów WooCommerce i używaj Elementora do tworzenia stron produktów.
  • Zaprojektuj dedykowaną stronę Sklepu, ponownie używając Elementora.

Chociaż w tym samouczku zakładamy, że masz już zainstalowany i aktywowany Elementor Pro. To jest coś, przez co przeprowadzimy Cię w naszym artykule na temat tworzenia lejka WordPress. Ten post pomoże ci, gdy napotkasz kłopoty.

1. Zainstaluj i skonfiguruj WooCommerce

Podczas konfigurowania instalacji WooCommerce należy wziąć pod uwagę dwa aspekty: samą wtyczkę i ustawienia sklepu. W rzeczywistości instalacja wtyczki przebiega tak samo, jak każda inna wtyczka WordPress.

Jeśli chodzi o konfigurację samego WooCommerce, chociaż możesz być gotowy do pracy w ciągu kilku minut, warto poświęcić trochę więcej czasu na przejście przez kreatora konfiguracji.

Kreator instalacji WooCommerce.

Jeśli chodzi o ten punkt konfiguracji, mamy cię w zasięgu ręki. W rzeczywistości mamy pełny samouczek WooCommerce, który krok po kroku opisuje, jak zacząć z WooCommerce i stworzyć swój pierwszy produkt. Dobrze jest mieć otwarty wpis w wolnej karcie podczas przeglądania tej. Informacje w nim zawarte będą cenne dla następnego zestawu kroków.

2. Stwórz swoje produkty WooCommerce

Po uruchomieniu instalacji WooCommerce i uruchomieniu, powinieneś przyjrzeć się tworzeniu produktów na zapleczu. Ponownie, nasz samouczek WooCommerce szczegółowo opisuje, jak to zrobić, ale oto Uwagi Cliffa:

  • Przejdź do zakładki Produkty> Dodaj nową w WordPress.
  • Wpisz nazwę i krótki opis swojego produktu.
  • Użyj metapól WooCommerce, aby wypełnić dane produktu, takie jak cena.
  • Dodaj obraz.
  • Opublikuj swój produkt.

Jednak tutaj Elementor pokazuje swój pierwszy potężny ruch – WooCommerce Builder. Jest to sposób na użycie kreatora stron do stworzenia projektu stron produktów.

Aby rozpocząć, kliknij Szablony > Dodaj nowy w WordPress:

Link Dodaj nowy w WordPressie.

W tym miejscu wybierz Pojedynczy produkt z listy rozwijanej Typ szablonu i wprowadź opcjonalną nazwę:

Tworzenie nowego szablonu w Elementorze.

Spowoduje to otwarcie Biblioteki szablonów, aby pokazać każdy gotowy blok w obrębie:

Biblioteka szablonów Elementora.

Gdy zobaczysz projekt, który Ci się podoba, kliknij przycisk Wstaw , a Elementor zaimportuje blok:

Importowanie bloku na stronę.

To szybki sposób na uruchomienie dedykowanej strony produktu. Możesz wziąć ten wspaniały początek i dodać więcej. Elementor zawiera szereg dedykowanych widżetów, które pomogą Ci zbudować strony specyficzne dla WooCommerce:

Widżety Elementor WooCommerce.

Gdy masz już odpowiedni układ strony, kliknij zielony przycisk Opublikuj u dołu ekranu:

Przycisk Opublikuj.

Spowoduje to wyświetlenie wyskakującego okienka, które pomoże Ci skonfigurować konkretny warunek wyświetlania szablonu:

Ustawienie warunków dołączania w Elementorze.

Kiedy będziesz gotowy, kliknij Zapisz i zamknij . Stąd możesz dodać więcej produktów do swojego sklepu, pracować nad większą liczbą szablonów lub rozpocząć pracę nad dedykowaną stroną Sklepu.

3. Zaprojektuj stronę dedykowanego sklepu za pomocą Elementora i WooCommerce

Jednym z przydatnych doświadczeń użytkownika (UX) w WooCommerce jest sposób, w jaki generuje większość niezbędnych stron, których potrzebujesz dla swojego sklepu. Najważniejsza jest strona Sklepu najwyższego poziomu, ponieważ jest to przednia markiza, która zdobi drzwi.

Jeśli korzystasz z WordPressa i WooCommerce z motywem specyficznym dla WooCommerce, takim jak Storefront, Twoim głównym zadaniem w dostosowywaniu strony Sklepu jest Dostosowanie. Chociaż skupiamy się na Elementorze. Sposobem na zrobienie tego za pomocą narzędzia do tworzenia stron jest użycie strony Archiwum produktów .

Pozwala to dostosować sposób wyświetlania produktów w witrynie, ale nie obsługuje reszty strony. W niektórych przypadkach zarządzanie dwoma zestawami dostosowań i ustawień może być trudne, ale z naszego doświadczenia wynika, że ​​do tej pory nie stanowiło to problemu.

Podobnie jak w przypadku pojedynczych produktów, musisz przejść do Szablony > Dodaj nowy w WordPress, a następnie wybrać Archiwum produktów z menu rozwijanego:

Wybór szablonu Archiwum Produktów.

Ponownie możesz wybrać blok, edytować stronę od podstaw lub połączyć oba, aby stworzyć coś wyjątkowego. Podobnie jak poprzednio, możesz użyć dowolnych widżetów specyficznych dla WooCommerce, które pomogą Ci zaprojektować stronę według własnych upodobań.

Po ponownym kliknięciu przycisku Publikuj i przejściu do okna dialogowego Ustawienia publikowania możesz wywołać magię. W swojej podstawowej formie możesz umieścić nowy szablon na Stronie Sklepu :

Ustawienia zawierają warunki dla strony Sklepu.

Chociaż to nie wszystko. Możesz dodać kolejne warunki dołączania , aby używać szablonu w wielu miejscach w witrynie. Jest to świetne, aby zapewnić ciągłość i dać odwiedzającym powód do odwiedzenia Twojego sklepu.

Szybka uwaga na temat innych generowanych stron WooCommerce

Zanim zakończymy, chcemy wspomnieć o innych wygenerowanych stronach WooCommerce. Zła wiadomość jest taka, że ​​nie wpadają w oko Elementora. Innymi słowy, nie możesz edytować stron, takich jak strony kasy lub podziękowania, bez dodatkowego rozszerzenia WooCommerce.

To rozczarowujące, ale zrozumiałe. Mimo to nadal możesz używać Elementora do rozwijania otaczających elementów, a następnie upuszczać konkretną funkcjonalność strony za pomocą skrótów. Chociaż to nie jest idealne.

Jeśli pełna edycja tych stron jest dla Ciebie ważna, zajrzyj do Edytora pola kasy (49 USD rocznie) i rozszerzenia Niestandardowe strony z podziękowaniami (również 49 USD rocznie).

Na zakończenie

Co może się nie udać, gdy użyjesz trzech najpopularniejszych narzędzi do opublikowania sklepu e-commerce? W tym przypadku niewiele. WordPress, Elementor i WooCommerce oferują niesamowite wrażenia. Połączenie ich może dać Ci maksimum możliwości w tworzeniu i prowadzeniu sklepu internetowego.

W tym poście przyjrzeliśmy się, jak wspólnie używać Elementora i WooCommerce do budowy sklepu. Po zainstalowaniu i aktywowaniu obu wtyczek pierwszym zadaniem jest tworzenie produktów wraz z powiązanymi z nimi stronami. Stamtąd potrzebujesz dedykowanej strony Sklepu – czegoś, z czym Elementor jest w stanie obsłużyć. Co więcej, dodatkowa funkcjonalność wtyczki do tworzenia stron (np. kreator wyskakujących okienek i nie tylko) może pomóc przenieść Twój sklep w stratosferę.

Czy chcesz stworzyć kombinację Elementora i WooCommerce dla swojego następnego sklepu, a jeśli tak, czy ten artykuł Ci pomoże? Daj nam znać w sekcji komentarzy poniżej!