Jak tworzyć niestandardowe strony produktów WooCommerce za pomocą Elementor

W dzisiejszych czasach Elementor jest jednym z najlepszych budowniczych stron. Bardzo łatwo jest utworzyć stronę internetową za pomocą funkcji budowniczych stron.

Zapewnia jednak Premade projekty, ale jeśli chcesz stworzyć samodzielnie, konstruktor przeciągania i upuszczania Elementora sprawia, że ​​każda operacja jest bardzo łatwa. Jest to więc sytuacja korzystna.

Nawiasem mówiąc, strony produktów znajdują się w prawie każdej witrynie e -commerce, ale niestandardowa strona produktu WooCommerce jest zbudowana, gdy właściciel witryny musi inaczej pokazać produkt.

Projektując Witrynę, możesz tworzyć niestandardowe strony WooCommerce.

I na tym blogu zobaczymy, jak utworzyć niestandardowe strony produktów WooCommerce za pomocą Builder Page Elementor na stronie WordPress.

Jakie narzędzia potrzebujemy, aby stworzyć niestandardowe strony produktów WooCommerce

Na tym blogu będziemy potrzebować wtyczki Elementor. Oprócz tego będziemy również potrzebować dodatków Elemento.

Elementor ułatwia proces budowania stron, a dodatek Elemento pomaga rozszerzyć moc Elementor, dodając widżety i dodatkowe funkcje do widżetów.

Dodatki Elemento mają pewne widżety, które wydają się nielegalne w użyciu ze względu na ich działanie i gładkość.

Więc zacznijmy teraz,

Jak tworzyć niestandardowe strony produktów WooCommerce za pomocą Elementor

Najpierw zainstalujmy obie wtyczki.

Instalowanie wtyczki elementora

Krok 1) Otwórz deskę rozdzielczą

Zaloguj się do pulpitu WordPress.

Krok 2) Przejdź do wtyczek i kliknij Dodaj nową wtyczkę

Na desce rozdzielczej widać kilka menu po lewej stronie. Przejdź do wtyczek i kliknij Dodaj nową wtyczkę.

Krok 3) przejdź do paska wyszukiwania i wyszukaj elementor

Na tej stronie znajdziesz wtyczki. Przejdź do paska wyszukiwania i wyszukaj elementor.

Krok 4) Zainstaluj i aktywuj elementor

Po poszukiwaniu elementora pojawi się na liście wtyczki. Kliknij przycisk Zainstaluj, po instalacji kliknij przycisk Aktywuj, aby aktywować wtyczkę elementora.

Przesyłanie wtyczki Elemento Addons

Najpierw pobierz dodatki Elemento z motywu.

Przejdź do strony Elemento Addons i kup wtyczkę. Możesz obejrzeć ten samouczek, jeśli potrzebujesz pomocy, aby uzyskać dodatki Elemento.

Krok 1) Otwórz deskę rozdzielczą i przejdź do strony wtyczki

Powtórz te same kroki i osiągnij stronę wtyczki.

Krok 2) Kliknij wtyczkę Prześlij

Przejdź do górnego lewej i kliknij wtyczkę przesyłania.

Krok 3) Prześlij dodatki Elemento

Kliknij Instaluj teraz od czasu do czasu aktywuj wtyczkę.

Obie wtyczki są zainstalowane, a teraz możemy kontynuować.

Tworzenie niestandardowej strony produktu WooCommerce

Krok 1) Utwórz nową stronę

Przejdź do pulpitu nawigacyjnego i kliknij strony, a następnie kliknij Dodaj nową stronę.

Krok 2) Kliknij „Edytuj z Elementor”

Na górnym pasku znajdziesz przycisk Edytuj za pomocą Elementor. Kliknij na to.

Następnie strona otworzy się z Elementor. Na tej stronie możesz uzyskać dostęp i używać widżetów elementu.

Będziemy potrzebować dwóch przedziałów, więc najpierw weź pojemnik o dwóch stronach.

Na stronie produktu pierwsza i jedna z najważniejszych rzeczy, które umieścimy, jest obraz. Znajdź więc widżet obrazu i włóż go do lewego pojemnika.

Teraz ustaw obraz produktu.

Teraz przejdź do prawej strony. Aby wejść do nagłówka, poszukaj go i wstaw do drugiego pojemnika.

Wprowadź nazwę produktu w tytule.

W ten sam sposób napiszemy ceny produktu. Aby napisać cenę, włóż widżet edytora tekstu poniżej tytułu i napisz tam wycenę produktu.

Na stronach produktu znajduje się krótki opis produktu. Aby go dodać, ponownie włóż edytor tekstu i napisz krótki opis produktu.

Teraz nadszedł czas, aby dodać przycisk wózka. Tym razem użyjemy widżetu wózka dodatków Elemento, ponieważ ma on więcej funkcji i funkcji.

Wyszukaj dodatek do wózka i wstaw go do pojemnika.

W ustawieniach przycisku koszyka wyszukaj nazwę produktu i wybierz produkt w sekcji produktów. Następnie, gdy użytkownik kliknie przycisk wózka, zostanie on dodany bezpośrednio do koszyka.

Jeśli chcesz dodać identyfikator SKU, możesz to zrobić w taki sam sposób, jak dodaliśmy inny widżet. Tutaj wstaw edytor tekstu i napisz SKU produktu.

Jedną z ważnych części strony produktu jest przyciski udostępniania społecznego. Możesz również dodać przycisk Udostępniania Społecznego do tej strony.

Wyszukaj ikony społecznościowe i umieść je na stronie.

Jeśli chcesz dodać więcej przycisków uchwytów społecznościowych, kliknij, dodaj nowy i dodaj nowy przycisk. Możesz wprowadzić kilka zmian, takich jak zmiana ikony i edycja linku i koloru.

W ten sam sposób możesz tutaj dodać drugą rzecz.

Jeśli chcesz podać główny opis, dodaj edytor tekstu i napisz opis.

Dodałem główny opis poza kontenerem, który wygląda na zorganizowany i systematyczny.

Gdy użytkownicy odwiedzają stronę produktu, możesz wyświetlać powiązane produkty, aby mogli je również sprawdzić.

Aby więc dodać powiązany produkt najpierw dodaj nagłówek i wyszukaj suwak produktu w dodatkach Elemento.

W ten sposób możesz dodać niestandardową stronę produktu WooCommerce. Teraz nadszedł czas, aby zobaczyć podgląd strony.

Muszę powiedzieć, że strona produktu może być również wykonana w kilku prostych krokach. W tym celu będziemy potrzebować widżetu dodatków Elemento.

Zobaczmy, jak to się robi.

Użyj niestandardowej strony produktu

Po kliknięciu edytuj z Elementor , przejdź do lewej strony, gdzie znajdziesz widżety elementarne.

Przewiń w dół i przejdź do dodatków Elemento .

Znajdź tematyczne produkty, przeciągnij widżet i upuść na stronie.

Po upuszczeniu widżetu jego ustawienie dostosowywania pojawi się na lewym pasku. Możesz edytować ustawienia i wygląd dodatku.

Ale jeśli chcesz zmienić wygląd strony, kliknij styl oprócz treści.

Sekcja stylu pozwala na zmianę kolorów, typografii i innych ustawień dodatku.

Po wprowadzeniu wszystkich zmian i skonfigurowaniu strony kliknij Publikuj.

Teraz podgląd Twojej witryny.

Tutaj widać, na niestandardowej stronie produktu WooCommerce, dodaliśmy produkty za pomocą widżetu produktu Elemento Addons.

Produkty są pokazane na stronie. Wyświetlmy podgląd strony pojedynczej produktu.

To wszystko, budowana jest niestandardowa strona produktu WooCommerce.

FAQ

Wniosek

Nauczyliśmy się więc, jak dodać niestandardową stronę produktu WooCommerce za pomocą Elementor. Gdy używaliśmy również wtyczki Elemento Addons, bardzo łatwo było dodawać produkty i wyświetlać je na stronie.

Dodatki Elemento mają tak wiele dodatków do budowania stron internetowych. Jest znany nie tylko z widżetów, ale także z funkcji widżetów.

W celu promowania określonych funkcji mogą być potrzebne niestandardowe strony produktów WooCommerce. Zwykle szablony nie mają takich stron, więc konieczne jest samodzielne utworzenie strony.

Mam nadzieję, że ten blog ci pomoże. Jeśli jednak masz jakieś zapytania lub sugestie, daj mi znać w sekcji komentarzy.
Możesz subskrybować nasz kanał YouTube , również przesyłamy tam świetne treści, śledź nas również na Facebooku i Twitterze .

Odkryj więcej artykułów

• Jak zmienić adres URL logowania WordPress (niestandardowy URL) w łatwych krokach
• Jak utworzyć niestandardową stronę błędu 404 w WordPress (Easy Guide)
• Jak dodać niestandardowy pasek wyszukiwania do WooCommerce, aby ułatwić odkrycie produktu