Chcesz dowiedzieć się, jak stworzyć spersonalizowaną stronę sklepu? WooCommerce z Elementorem?
Jak być może wiesz, Elementor Pro jest wyposażony w funkcję konstruktora WooCommerce co pozwala stworzyć stronę internetową spersonalizowanego handlu elektronicznego z WooCommerce bez kodowania. Ta funkcja umożliwia tworzenie niestandardowych stron WooCommerce za pomocą edytora wizualnego 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 twojawitryna.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 i 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.
Istnieją 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
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.
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ę.
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,
- Pudełko
W tym kontekście Box odnosi się do pojemnika każdego produktu. Możesz otworzyć blok Pudełko 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 to stworzyć stronę internetową spersonalizowana i unikalna platforma e-commerce z WooCommerce i bez kodowania. Nie ma potrzeby instalowania 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
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.
...
