Przejdź do głównej treści

Jak stworzyć niestandardową stronę sklepu WooCommerce za pomocą Elementora

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Czy chcesz dowiedzieć się, jak stworzyć niestandardową stronę dla sklepu WooCommerce za pomocą Elementora?

Jak być może wiesz, Elementor Pro jest wyposażony w funkcję kreatora WooCommerce, która pozwala zbudować niestandardową witrynę e-commerce z WooCommerce bez kodowania. Ta funkcja umożliwia tworzenie niestandardowych stron WooCommerce za pomocą wizualnego edytora Elementora, który oferuje intuicyjny interfejs.

Zobacz także: Jak zainstalować Elementora na WordPressie

W chwili pisania tego artykułu możesz tworzyć niestandardowe strony dla strony sklepu, strony produktu i stron archiwum produktów (tagi i kategorie). Wkrótce będzie można również tworzyć niestandardowe strony dla strony kasy i strony koszyka.

W tym artykule pokażemy, jak utworzyć niestandardową stronę sklepu WooCommerce za pomocą funkcji kreatora WooCommerce Elementor Pro.

Sama strona sklepu jest jedną z domyślnych stron w WooCommerce. Ta strona służy jako wizytówka do wyświetlania Twoich produktów. Możesz uzyskać dostęp do tej strony, przechodząc do votresite.com/store. Domyślnie strona sklepu WooCommerce wyświetla tylko produkty WooCommerce.

Tworząc niestandardową stronę sklepu za pomocą Elementor Pro, możesz dodawać elementy, aby uatrakcyjnić swój sklep.

Jak stworzyć niestandardową stronę sklepu WooCommerce za pomocą Elementora

Istnieją co najmniej dwa widżety Elementora, których możesz użyć do stworzenia niestandardowej strony sklepu WooCommerce: Produkty archiwalne dzięki Produkty

W tym przykładzie używamy tego ostatniego.

Funkcja widżetu Produkty jest bardzo podobny do tego z widżetu Posty Różnica polega na tym, że widżet Produkty służy do wyświetlania produktów WooCommerce, a widżet Posty służy do wyświetlania postów na blogu.

Czytaj także: Jak importować lub eksportować modele w Elementorze

Pamiętaj, że widżet Produkty możesz znaleźć tylko wtedy, gdy wtyczka WooCommerce jest zainstalowana i aktywowana.

Aby rozpocząć tworzenie niestandardowej strony sklepu WooCommerce za pomocą Elementor Pro, przejdź do pierwszy à Szablony -> Kreator motywów na pulpicie WordPress. Kliknij na zakładkę Produkty Archiwum strony Theme Builder, a następnie kliknij przycisk ajouter ARCHIWUM PRODUKTÓW.

Nadaj swojemu modelowi nazwę i kliknij przycisk STWÓRZ MODEL.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

jak stworzyć niestandardową stronę dla sklepu WooCommerce za pomocą ElementoraIstnieją trzy niestandardowe szablony stron sklepu, z których możesz wybrać, jeśli chcesz utworzyć niestandardową stronę sklepu z szablonu. Jeśli chcesz zbudować niestandardową stronę sklepu od podstaw, możesz po prostu zamknąć bibliotekę szablonów.

Zobacz także: Jak korzystać z próbnika kolorów w Elementorze

W tym przykładzie utworzymy od podstaw niestandardową stronę sklepu. Jak wspomniano powyżej, będziemy używać widżetu Produkty do wyświetlania produktów.

Przed dodaniem widżetu Produkty do pola edycyjnego możesz zdefiniować układ, dodając sekcje i kolumny. Gdy układ jest gotowy, możesz po prostu przeciągnąć widżet Produkty do pola edycji.

Jak widać, widżet Produkty automatycznie ładuje i wyświetla najnowsze produkty WooCommerce. Możesz zmodyfikować zapytanie, otwierając blok Zapytanie pod zakładką Treść z panelu ustawień. Do wyboru jest pięć opcji:

  • Bieżące zapytanie - Bieżące zapytanie
  • Najnowsze produkty - Najnowsze produkty
  • Wyprzedaż - Wyprzedaż
  • Polecane - Polecane
  • Wybór ręczny — wybór ręczny

Możesz także ustawić kolejność wyświetlania produktów lub wykluczyć niektóre

jak stworzyć niestandardową stronę dla sklepu WooCommerce za pomocą Elementora

Aby ustawić liczbę kolumn i wierszy, możesz otworzyć blok Treść pod zakładką Zawartość. Z tego bloku możesz również aktywować paginacja.

Możesz bawić się panelem ustawień, aż uzyskasz najlepsze ustawienia dla widżetu Produkty. Gdy skończysz z widżetem Produkty, możesz dodać więcej widżetów do swojej strony.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

Czytaj także: Jak korzystać z próbnika kolorów w Elementorze

Po zakończeniu edycji strony możesz kliknąć przycisk PUBLISH u dołu panelu ustawień.

Dodaj warunek wyświetlania, klikając przycisk dodaj warunek. Ponieważ chcesz utworzyć niestandardową stronę sklepu, wybierz opcję Sklep Page. Kliknij przycisk ZAPISZ I ZAMKNIJ aby zapisać zmianę.

jak stworzyć niestandardową stronę dla sklepu WooCommerce za pomocą Elementora

Do tej pory pomyślnie utworzyłeś niestandardową stronę sklepu WooCommerce za pomocą Elementor Pro. Możesz iść na swojej stronie.com/store aby sprawdzić wynik.

Dostosuj widżet Produkty

Przed opublikowaniem swojej strony możesz dostosować widżet Produkty, aby była bardziej atrakcyjna. Aby to zrobić, kliknij widżet w polu edycji i przejdź do zakładki Styl z panelu ustawień. Istnieją cztery bloki, które możesz otworzyć w następujący sposób:

  • Produkty

Możesz otworzyć ten blok, aby zdefiniować odstęp między kolumnami i wierszami. Z tego bloku można również ustawić typografię (rodzina czcionek, rozmiar czcionki itp.) oraz kolor tekstu elementów produktu, takich jak tytuł produktu, cena produktu, ocena produktu, produkt itp…. Możesz również ustawić granicę obrazu produktu,

  • Zestawy

W tym kontekście Box odnosi się do pojemnika każdego produktu. Możesz otworzyć blok Zestawy zdefiniować szerokość obramowania kontenera, promień obramowania, cień pudełka, kolor tła, kolor obramowania itp.

  • Paginacja

Jeśli aktywujesz opcję Paginacja z bloku Zadowolony, możesz otworzyć blok Paginacja pod zakładką Styl aby dostosować paginację. Możesz ustawić takie rzeczy jak odstępy, kolor obramowania, kolor tła itp.

Możesz również zdefiniować różne parametry dla każdego stanu (normalny, wskazujący i aktywny).

  • Wyprzedaż Flash

Kiedy dodajesz nowy produkt w WooCommerce, możesz ustawić atrybut ceny sprzedaży, aby pokazać odwiedzającym, że powiązany produkt jest przeceniony. Aby to podkreślić, możesz wyświetlić atrybut sprzedaży na stronie sklepu, aby przecenione produkty miały plakietkę sprzedaży.

Możesz otworzyć blok Wyprzedaż Flash aby spersonalizować odznakę sprzedaży. Możesz zdefiniować elementy, takie jak kolor tekstu, kolor tła, typografia, promień obramowania, rozmiar (szerokość i wysokość), odległość itp.

W końcu

WooCommerce Builder to jedna z funkcji oferowanych przez Elementor Pro. Pozwala zbudować spersonalizowaną i unikalną stronę eCommerce z WooCommerce i bez kodowania. Nie ma potrzeby instalowania motywu WordPress, który twierdzi, że jest przeznaczony dla WooCommerce. Zamiast tego możesz samodzielnie tworzyć niestandardowe strony WooCommerce za pomocą edytora wizualnego Elementora.

Czytaj także: Jak dodać przegrodę, aby utworzyć sekcję w Elementorze

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Do wersji 3.2.2 Elementor Pro umożliwia tylko tworzenie niestandardowej strony sklepu, niestandardowej strony pojedynczego produktu i niestandardowej strony archiwum produktów. Ale Elementor ogłosił, że w następnej wersji Elementor Pro będzie można również utworzyć niestandardową stronę koszyka, niestandardową stronę kasy i niestandardową stronę konta klienta.

Pobierz Elementor Pro teraz!

Wnioski

Tutaj ! To tyle w tym artykule, który pokazuje, jak stworzyć niestandardową stronę dla sklepu WooCommerce z Elementor. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać fdaj nam znać w commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Powrót do góry