W artykule:
Chcesz otworzyć swój pierwszy sklep WooCommerce? A może zbudowałeś sklepy WooCommerce dla klientów, ale chcesz zbudować lepsze niestandardowe sklepy eCommerce?
Masz niesamowite produkty, które nie możesz się doczekać, aby dotrzeć do swoich klientów. Na szczęście możesz być otwarty na biznes w mgnieniu oka.
W tym poście omówię, jak zbudować sklep WooCommerce za pomocą Elementora WooCommerce Builder. Jest to wizualny, przeciągany i upuszczany Kreator stron WordPress, który zapewnia pełną kontrolę nad projektami stron sklepu i produktów.
Obszary, które będę obejmował, to:
- Czym są Elementor i WooCommerce?
- Zalety korzystania z Elementor WooCommerce Builder
- Konfiguracja i konfiguracja WooCommerce
- Zaprojektuj stronę archiwum sklepu
- Zaprojektuj jedną stronę produktu
- Dołącz produkty WooCommerce do innych projektów w razie potrzeby
Niezależnie od tego, czy jest to twój pierwszy sklep, czy pięćdziesiąty, odkryjesz prostszy przepływ pracy, który eliminuje potrzebę bezpośredniej edycji plików szablonów WooCommerce lub brudzenia rąk hookami. Woo-hoo!
Czym są Elementor i WooCommerce?
Na początek, na wypadek, gdybyś nie wiedział (chociaż jak nie mogłeś?), oto krótki przegląd tego, czym są Elementor i WooCommerce.
Elementor jest ” ostatecznym & darmowy WordPress page builder.”
Pozwala stworzyć niesamowicie piękną stronę internetową w najszybszy możliwy sposób. Możesz osiągnąć wysoki poziom projektowania, projektując na żywo i na frontendzie swojej witryny WordPress.
Jest to obecnie jedyny (i pierwszy) edytor stron z interfejsem frontendowym, który zapewnia nieograniczone możliwości projektowania.
WooCommerce to darmowa wtyczka WordPress, która zawiera funkcje e-commerce dla Twojej witryny, dzięki czemu możesz mieć sklep internetowy.
Łatwo integruje się z istniejącą witryną WordPress, umożliwiając tworzenie konfigurowalnych sklepów w ciągu kilku minut, uzyskiwanie bezpiecznych płatności, konfigurowalne opcje wysyłki i wiele więcej.
Jak Elementor WooCommerce Builder pomaga stworzyć sklep eCommerce
Darmowa wtyczka Core Elementor pozwala zaprojektować zawartość WordPress za pomocą wizualnego interfejsu przeciągnij i upuść.
Możesz użyć widżetów, aby dodać zawartość do swojej witryny i kontrolować prawie każdy aspekt układów i stylów swoich projektów.
Dzięki Elementor Pro uzyskujesz dostęp do Elementor WooCommerce Builder, który umożliwia projektowanie dynamicznych szablonów dla Archiwum produktów i pojedynczych stron produktów za pomocą tego samego edytora wizualnego.
Dzięki WooCommerce Builder możesz łatwo zbudować całkowicie Niestandardowy sklep WooCommerce bez konieczności bezpośredniej pracy z plikami szablonów PHP lub haczykami WooCommerce.
Zalety korzystania z Elementor WooCommerce Builder
- Projekt wizualny, przeciągnij i upuść: Możesz zaprojektować swój sklep WooCommerce dokładnie tak, jak go zobaczą Twoi odwiedzający. Możesz nawet wyświetlić podgląd różnych produktów, aby zobaczyć, jak wyglądają z Twoimi projektami.
- Brak kodu PHP/: Zamiast pracować bezpośrednio z PHP i / lub plikami szablonów, możesz zaprojektować wszystko z poziomu interfejsu Elementora.
- Dedykowane widżety WooCommerce: Otrzymasz dedykowane widżety zawierające wszystkie ważne informacje WooCommerce, nawet do upsells i powiązanych produktów.
- Warunkowe wyświetlanie szablonu: Możesz utworzyć tyle archiwów produktów i pojedynczych szablonów, ile potrzeba, i użyć reguł warunkowych, aby kontrolować, gdzie używać każdego szablonu. Na przykład, można utworzyć jeden produkt pojedynczy projekt dla produktów w „kategorii A” i inny dla produktów w „kategorii B”.
- Gotowe szablony: Otrzymujesz dostęp do gotowych archiwów produktów i pojedynczych szablonów, które możesz dostosować do swoich potrzeb. Możesz też zbudować własne projekty od podstaw.
Czy jest coś, czego nie możesz zaprojektować z Elementor WooCommerce Builder?
Możesz użyć Elementor WooCommerce Builder do zaprojektowania Archiwum produktów i pojedynczych szablonów, które zawierają większość treści twojego sklepu. Możesz także zaprojektować resztę treści WordPress, nawet w tym szablony dla nagłówka i stopki.
Istnieją jednak dwie strony WooCommerce, które w tej chwili Ci nie pomagają:
- Koszyk
- Kontakt
Możesz użyć Elementora, aby dodać zawartość wokół zawartość koszyka WooCommerce i kasy, ale nie można dostosować samej zawartości.
Jednak, aby kontrolować projekt koszyka i zawartości kasy, istnieje kilka opcji.
Po pierwsze, możesz użyć elastycznego motywu podstawowego, który dobrze pasuje do Elementora, a także daje ustawienia do kontrolowania stron koszyka i kasy. Oto kilka dobrych opcji:
- Astra
- OceanWP
- GeneratePress
- Neve
Po drugie, jeśli znasz się na CSS, możesz dodać własne style, aby kontrolować strony koszyka i kasy.
Na koniec możesz użyć wtyczki, która modyfikuje proces realizacji transakcji.
Na przykład wtyczka CartFlows pozwala zbudować niestandardowy proces realizacji transakcji przy użyciu Elementora. Jednak CartFlows jest bardziej odpowiedni dla lejków sprzedaży niż „tradycyjne” sklepy eCommerce, więc nie będzie działał we wszystkich sytuacjach.
Możesz również użyć wtyczki, takiej jak nasz własny Forminator, aby utworzyć niestandardowy proces realizacji transakcji.
Jak zaprojektować swój sklep WooCommerce z Elementor
Teraz zakasaj rękawy, aby uzyskać praktyczne wskazówki i zaprojektuj swój sklep za pomocą Elementor Pro i WooCommerce Builder.
Chodźmy krok po kroku i stwórzmy sklep.
Konfiguracja i konfiguracja WooCommerce
Jeśli jeszcze tego nie zrobiłeś, zacznij od skonfigurowania i skonfigurowania podstaw swojego sklepu WooCommerce. Te podstawowe kroki konfiguracji nie są głównym celem tego samouczka,więc nie będziemy zbyt dogłębnie.
Ale ogólnie rzecz biorąc, będziesz chciał:
- Zainstaluj i aktywuj darmową wtyczkę WooCommerce z WordPress.org.
- Uruchom Kreator konfiguracji WooCommerce, aby skonfigurować ważne podstawy.
- Dodaj swoje produkty.
- Skonfiguruj inne odpowiednie ustawienia w obszarze ustawień WooCommerce.
Jeśli potrzebujesz pomocy w rozpoczęciu pracy, więcej informacji na ten temat znajdziesz tutaj.
Zaprojektuj stronę Archiwum sklepu
Teraz możesz zacząć budować swój sklep, zaczynając od szablonu dla archiwów produktów.
Strona Archiwum produktów to strona zawierająca listę wszystkich produktów WooCommerce (lub produkty z określoną kategorią, tagiem itp.).
Aby rozpocząć, przejdź do Szablony > Kreator Motywów > Archiwum Produktów. Następnie kliknij Dodaj Nowy Produkt Archiwum guzik.
Nadaj jej fantazyjną nazwę i kliknij Utwórz Szablon kontynuować.
Spowoduje to przejście do interfejsu projektowania. Możesz zaimportować jeden z gotowych szablonów Archiwum produktów lub zamknąć bibliotekę szablonów, aby stworzyć swój projekt od podstaw.
Stamtąd będziesz mógł zaprojektować szablon archiwum za pomocą wizualnego interfejsu przeciągnij i upuść.
Możesz skorzystać z dedykowanego Archiwum Produktów widżety do dodawania podstawowych treści, takich jak lista wszystkich produktów lub tytuł strony archiwum (np. nazwa kategorii).
Edycja jednego z widżetów pozwala kontrolować jego wygląd i funkcjonalność. Możesz dostosować wszystko, od ocen gwiazdek po odznaki sprzedaży.
Po zakończeniu projektowania kliknij Publikuj przycisk do kontrolowania, kiedy używać szablonu.
Otrzymujesz pięć warunków wyświetlania, które możesz dowolnie łączyć i dopasowywać:
- Wszystkie Archiwa Produktów
- Strona sklepu
- Wyniki wyszukiwania
- Kategorie produktów
- Tagi produktów
Na przykład, aby wyświetlić szablon tylko na głównej stronie sklepu, wybierz Strona Sklepu.
W niektórych warunkach otrzymasz dodatkowe opcje. Przykładem tego jest wybranie Kategorie produktów, możesz kierować swój szablon do wszystkich stron archiwum kategorii produktów lub tylko określonej kategorii (lub zestawu kategorii).
Te warunki wyświetlania są użyteczne, ponieważ pozwalają tworzyć tyle unikalnych szablonów, ile potrzebujesz, aby najlepiej zaprezentować wszystkie różne produkty, które sprzedajesz.
Czasami uniwersalne podejście nie jest najlepszym rozwiązaniem. WooCommerce Builder ułatwia tworzenie nowych szablonów bez konieczności pracy bezpośrednio z plikami szablonów PHP.
Zaprojektuj Swoje Pojedyncze Strony Produktów
Po utworzeniu stron Archiwum produktów możesz użyć tego samego podstawowego podejścia, aby dostosować szablon strony produktu WooCommerce dla pojedynczych produktów.
Aby rozpocząć, przejdź do Szablony > Kreator Motywów > Pojedynczy Produkt. Następnie kliknij Dodaj Nowy Pojedynczy Produkt przycisk i nadać mu nazwę.
Podobnie jak w przypadku projektu Archiwum produktów, będziesz mieć możliwość zaimportowania jednego z gotowych szablonów lub zbudowania własnego szablonu strony produktu od podstaw.
Teraz otrzymasz kolejny zestaw dedykowanych widżetów dla wszystkich informacji na pojedynczej stronie produktu, w tym wszystko, od tytułu produktu do powiązanych produktów i sprzedawców.
Wprowadzenie ustawień jednego z widżetów pozwala skonfigurować jego styl i rozmieszczenie.
Domyślnie Elementor pobiera jeden z twoich prawdziwych produktów w celu podglądu na żywo twojego projektu. Ale jeśli chcesz zobaczyć, jak wyglądałby Twój projekt z innym produktem, kliknij na narzędzia ikona w lewym dolnym rogu i edytuj Ustawienia Podglądu aby użyć dowolnego produktu w swoim sklepie.
Po zakończeniu kliknij Publikuj przycisk, aby wybrać, gdzie zastosować ten produkt pojedynczy szablon.
Tutaj dostaniesz kolejne pięć opcji:
- Wszystkie produkty
- W kategorii
- W kategorii Dziecko
- In tag
- Produkty wg autora
W przypadku tych ostatnich opcji będziesz mógł wybrać określone elementy, które mają zastosowanie do tego warunku (np. konkretna Kategoria).
Podobnie jak w przypadku szablonów Archiwum produktów, możesz powtórzyć proces tyle razy, ile potrzeba, aby upewnić się, że każdy rodzaj produktu ma zoptymalizowany pojedynczy projekt produktu.
Dołącz produkty WooCommerce do innych projektów w razie potrzeby
Poza możliwością zaprojektowania Archiwum produktów i pojedynczych szablonów, Elementor Pro oferuje również dedykowane widżety WooCommerce, które można wykorzystać w innych projektach.
Możesz na przykład użyć ich do wyświetlania produktów w pisanym poście na blogu. Możesz uzyskać dostęp do tych widżetów w dowolnym momencie z WooCommerce sekcja w interfejsie Elementora.
Jeśli chcesz wyświetlić produkty, możesz tworzyć własne niestandardowe zapytania, aby kontrolować, które produkty mają być wyświetlane.
Możesz nawet użyć dołączonej funkcji Elementor Popup Builder, aby dołączyć lub promować produkty w wyskakującym okienku. Na przykład możesz reklamować specjalną ofertę i dodać przycisk Dodaj do koszyka bezpośrednio w wyskakującym okienku.
To świetna funkcja do promowania specjalnych ofert i promocji.
Czas otworzyć sklep
Dzięki Elementor Pro możesz zbudować Niestandardowy sklep WooCommerce szybciej i z większą elastycznością.
Jak widzisz, to prosty proces. Zamiast pracować z hookami lub plikami szablonów, możesz użyć wizualnego interfejsu przeciągnij i upuść.
Otrzymujesz dedykowane widżety do wyświetlania ważnych informacji o produktach WooCommerce, a także możesz użyć warunkowych reguł wyświetlania, aby utworzyć tyle pojedynczych szablonów produktów i archiwów produktów, ile potrzebuje twój sklep.
Jeśli naprawdę chcesz, aby Twoja witryna świeciła, sprawdź nasz artykuł na 8 Must-have podczas dodawania eCommerce do witryny WordPress.
Ponadto, jeśli szukasz dodatkowych funkcji WordPress, oferujemy dedykowany hosting, zarządzanie witryną i wsparcie 24/7.
Zacznij więc już dziś i zbuduj własny niestandardowy sklep WooCommerce. Następnie obróć ten znak na „otwórz” i zacznij sprzedawać swoje niesamowite produkty.
