Trendy zakupowe zmieniają się w szybkim tempie, a ludzie częściej niż kiedykolwiek kupują online.
Dlatego rośnie zapotrzebowanie na sklep eCommerce, aby zaspokoić nawyki zakupów online, ponieważ ludzie uważają, że wygodniej jest kupować online, zamiast wychodzić na zakupy.
Możesz także rozpocząć swój sklep e-commerce od razu, korzystając z odpowiednich narzędzi i konfiguracji. I zauważysz drastyczny wzrost sprzedaży w rekordowym czasie.
Jeśli planujesz założyć sklep e-commerce i szukasz eksperta od WordPressa, który wykona to zadanie za Ciebie, powiem Ci, że nie potrzebujesz żadnego.
Tak! Możesz to zrobić samodzielnie, ponieważ nie musisz być programistą WordPress ani ekspertem od kodowania i możesz to zrobić bez wiedzy na temat kodowania przy użyciu odpowiednich narzędzi i konfiguracji.
Wystarczy postępować zgodnie z samouczkiem krok po kroku dotyczącym tworzenia strony sklepu WooCommerce za pomocą narzędzia do tworzenia stron Elementor.
Zajrzyjmy głębiej, aby dojść do sedna!
- Czego będziesz potrzebować do stworzenia strony produktu za pomocą Elementora?
- Jak zainstalować narzędzie do tworzenia stron Elementor?
- Utwórz krok po kroku stronę produktu Elementor WooCommerce
- Zoptymalizuj mobilnie swoją stronę produktu WooCommerce
- Ceny Elementora Pro
- Podsumowanie
Czego będziesz potrzebować do stworzenia strony produktu za pomocą Elementora?
plugin WooCommerce na swojej stronie WordPress z repozytorium WordPress.org, a ponadto musisz zainstalować narzędzie do tworzenia stron Elementor . Wersję bezpłatną można pobrać z WordPress.org, jednak wersja bezpłatna ma ograniczone opcje dostosowywania. Dlatego jeśli chcesz uzyskać nieograniczone możliwości dostosowywania, wybierz profesjonalny Elementor i pobierz go z oficjalnej strony Elementor.org.
Jak zainstalować narzędzie do tworzenia stron Elementor?
- W przypadku darmowej wersji Elementora:
Przejdź do Plugin > Dodaj nowe > wejdź do narzędzia do tworzenia stron Elementor > kliknij zainstaluj i aktywuj.
- Dla Elementora Pro:
Kup wersję Pro na stronie Elementor.com, prześlij plik ZIP, a następnie kliknij opcję instalacji i aktywowania.
Utwórz krok po kroku stronę produktu Elementor WooCommerce
Standardowa strona produktu WooCommerce wygląda jak każda podstawowa strona produktu WooCommerce, bez żadnych wyraźnych elementów.
![](https://www.holdersing.com/wp-content/uploads/2020/06/2nd-1.png)
Jeśli jednak chcesz dodać głos swojej marki, musisz dostosować ją w sposób unikalny.
Krok 1: Przejdź do sekcji Szablon w menu Panelu i kliknij „Dodaj nowy”.
![](https://www.holdersing.com/wp-content/uploads/2020/06/Ad-new-template-2.png)
Teraz z rozwijanego menu wybierz pozycję „Pojedynczy produkt”
![](https://www.holdersing.com/wp-content/uploads/2020/06/seelct-single-product.png)
Najlepsze jest to, że Elementor jest wyposażony w kilka gotowych szablonów stron produktów, więc jeśli chcesz szybko zacząć, wybierz dowolną z opcji, która wygląda najbliżej wybranej.
O wiele łatwiej jest stworzyć stronę produktu na podstawie gotowego szablonu, niż tworzyć ją od zera. Dlatego zmodyfikuj dowolny istniejący szablon i zaoszczędź swój czas i wysiłek.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-page-template.png)
Wybraliśmy ten szablon dla naszej strony produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/aaa.png)
Po wybraniu ulubionego szablonu zostaniesz przeniesiony do edytora Elementor, w którym możesz dostosować szablon według własnych upodobań.
![](https://www.holdersing.com/wp-content/uploads/2020/06/elementor-editor.png)
Tutaj możesz zobaczyć różne bloki w menu po lewej stronie. Przeciągnij i upuść blok, z którym chcesz pracować.
Kliknij przycisk „+” Dodaj i wybierz rozmiar kolumny, którą chcesz dodać.
Dla naszego szablonu produktu wybraliśmy dwa rozmiary kolumn.
Teraz dodaj widżet tytułu produktu w prawej kolumnie i dodaj na nim tytuł swojego produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/poduct-tite-widegt-1.png)
Po dodaniu tytułu produktu następnym krokiem jest dodanie nad nim „bułki tartej Woo”.
Teraz dodaj zdjęcie produktu do lewej kolumny i przeciągnij i upuść widżet obrazu produktu z lewej kolumny.
![](https://www.holdersing.com/wp-content/uploads/2020/06/drop-the-image-in-left-column.png)
Możesz dodać dopełnienie do obu kolumn, aby zachować ich niewielką odległość od siebie.
Po dodaniu zdjęcia i dostosowaniu wypełnienia do wymaganych wymiarów dodaj widżet z oceną produktu pod tytułem produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-the-product-ratign.png)
Dodaj krótki opis widżetu produktu pod blokiem recenzji produktu. możesz także dostosować odstęp między dwoma blokami.
Kiedy skończysz z opisem produktu i wszystkimi szczegółami, naszym następnym krokiem będzie dodanie ceny produktu. W tym celu będziesz musiał przeciągnąć i upuścić widżet ceny pod opisem produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price.png)
Po dodaniu zakładki cenowej pod opisem produktu możesz dostosować widżet cenowy wybierając opcje z lewego menu. Możesz powiększyć ikonę, zmienić styl czcionki, a także kolor czcionki z czarnego na dowolny inny wybrany kolor.
![](https://www.holdersing.com/wp-content/uploads/2020/06/product-price-foramt-1.png)
Teraz dodaj widżet „dodaj do koszyka” i dostosuj jego kolor, czcionkę lub styl z menu, jeśli chcesz.
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-widget.png)
![](https://www.holdersing.com/wp-content/uploads/2020/06/add-to-the-cart-options.png)
Teraz dodaj meta produktu pod widżetem ceny, który wyświetli kategorię produktu i numer seryjny produktu.
Krok 2: w kolejnej sekcji dodaj dodatkowe informacje o produkcie.
Utwórz nową dwukolumnową sekcję, a następnie dodaj zakładki Dane produktu zawierające opis, dodatkowe informacje i recenzje. A po prawej stronie kolumny dodaj sekcję powiązanego produktu.
Aby zachować ten sam format każdej kolumny, możesz kliknąć lewy róg każdej kolumny, a następnie skopiować i wkleić format każdej kolumny.
Krok 3: dodaj kolejną sekcję lub dodaj sekcję „up-sell”.
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-1.png)
Oto jak będzie wyglądać sekcja up-sell po dodaniu. Dodaj trochę wypełnienia, aby wyrównać sekcję.
![](https://www.holdersing.com/wp-content/uploads/2020/06/up-sell-section-2.png)
I wreszcie, skończyłeś projektowanie strony produktu. Ostatnim krokiem jest teraz miejsce, w którym chcesz opublikować swój produkt? możesz kliknąć opcję publikuj lub przejść do sekcji oka w dolnym rogu lewego menu i kliknąć ustawienia, aby wybrać kategorię produktu.
![](https://www.holdersing.com/wp-content/uploads/2020/06/find-category.png)
Kliknij menu Dodaj warunek, a następnie wybierz kategorię swojego produktu i kliknij Opublikuj.
Zoptymalizuj mobilnie swoją stronę produktu WooCommerce
Ponieważ duży ruch będzie przechodził przez smartfony, będziesz musiał zoptymalizować swój sklep pod kątem przeglądania na smartfonach, w przeciwnym razie możesz stracić sprzedaż.
Chociaż WooCommerce jest już zoptymalizowany pod kątem urządzeń mobilnych, jednak aby upewnić się, że szablony stron produktów wyglądają absolutnie dobrze na ekranie urządzenia mobilnego, postępuj zgodnie z poniższą procedurą.
W lewym dolnym rogu interfejsu Elementora znajdziesz opcję Tryb responsywny.
![](https://www.holdersing.com/wp-content/uploads/2020/06/mobile-responsive.png)
Po kliknięciu opcji Responsywność mobilna możesz przełączać się pomiędzy opcjami wyświetlania na urządzeniach mobilnych, komputerach stacjonarnych i kartach.
Kliknij dowolną opcję, którą chcesz wyświetlić, i dostosuj projekt, jeśli znajdziesz jakieś komplikacje.
Teraz zapisz i kontynuuj publikowanie strony produktu.
Ceny Elementora Pro
![](https://www.holdersing.com/wp-content/uploads/2020/06/pridicn.png)
Podstawowa wersja Elementora jest dostępna za darmo, natomiast wersja pro zawiera trzy licencje. Jeśli szukasz osobistego bloga lub pojedynczej witryny, licencja osobista będzie dla Ciebie najbardziej odpowiednia, dzięki czemu możesz uzyskać narzędzie do tworzenia WooCommerce wraz z ponad 90 profesjonalnymi widżetami.
Licencje Plus i Expert są odpowiednie dla dorosłych firm lub agencji z obsługą odpowiednio 3 witryn i 1000 witryn.
Podsumowanie
Jedynym celem narzędzia do tworzenia stron Elementor jest umożliwienie użytkownikom uwolnienia ich kreatywności bez polegania na kodowaniu. Elementor jest wyposażony w różnorodne widżety, które pozwalają tworzyć dowolne strony produktów w oparciu o atrakcyjne układy. Podstawowych elementów WooCommerce jest ponad 10, które umożliwiają użytkownikom dostosowanie każdego załamania i krzywizny strony sklepu. A jeśli nie znajdziesz żądanego elementu w menu Elementora, nie martw się! Istnieje wiele innych zaawansowanych ustawień, które mogą ulepszyć Twój arsenał i dodać wiele elementów do Twojej biblioteki. Jednym z nich są Essential Add-ons , które zawierają elementy dedykowane wyłącznie dla WooCommerce.