Zbuduj i zaprojektuj niesamowitą stronę produktu WooCommerce za pomocą Elementora

Musisz zmodyfikować stronę produktu, aby wyróżnić swój sklep e-commerce na tle konkurencji i zapewnić swoim klientom wyjątkowe doświadczenia. Co więcej, możliwość estetycznej personalizacji strony produktu ma kluczowe znaczenie dla utrzymania spójnego projektu wizualnego w całym sklepie internetowym.

Elementor jest jednym z wiodących na rynku narzędzi do tworzenia witryn WordPress, ale czy wiesz, że możesz za jego pomocą budować sklepy WooCommerce?

Wiele wbudowanych modułów Elementor WooCommerce umożliwia wstawianie treści lub bloków funkcjonalności WooCommerce lub stylizowanie ich za pomocą kreatora Elementor. Całkiem nieźle, prawda?

Stylizacja i dostosowywanie WooCommerce wymagało PHP i CSS przy każdej drobnej zmianie, ale w miarę jak narzędzia takie jak Elementor są ulepszane i stają się coraz bardziej złożone, dostępnych staje się coraz więcej opcji przejęcia kontroli nad wyglądem i działaniem Twojego sklepu.

Zacznijmy.

• Tworzenie szablonu Elementora
• Budowanie zdjęcia lub galerii produktu Elementor
• Tytuł produktu WooCommerce, cena i dodanie do koszyka
• Konfigurowanie zakładek produktów Elementor
• Krótki opis produktu Elementora
• Dosprzedaż produktów Elementor i WooCommerce
• Wniosek – narzędzie do tworzenia stron produktów Elementor

Tworzenie szablonu Elementora

Pierwszym krokiem procedury jest zbudowanie nowego szablonu Elementora, przechodząc do opcji Szablony w panelu WordPress. Kliknij „Utwórz nowy”, a następnie wybierz Pojedynczy produkt jako szablon, który chcesz utworzyć.

Ponieważ opracowujemy ten szablon od zera, nie ma potrzeby umieszczania żadnych bloków; wyjdź z następnego okna, aż dojdziesz do zwykłego ekranu kreatora Elementor dla nowej strony.

Budowanie zdjęcia lub galerii produktu Elementor

Każdy produkt WooCommerce ma zdjęcie produktu lub galerię obrazów prezentującą klientom zdjęcia produktu. Elementor zapewnia wbudowany moduł Obrazy Produktów, który pozwala nam wstawić to do naszego szablonu.

Utwórz prosty wiersz składający się z 2 kolumn i wejdź do modułu Obrazy produktów w lewej kolumnie; wygląda to na praktyczne i spełnia swoje zadanie, ale dostosujmy plakietkę sprzedażową tak, aby pasowała do motywu Elementor Hello użytego w tym artykule. Aby to zrobić, musimy zastosować małą linię niestandardowego CSS, którą można wprowadzić, przechodząc do Zaawansowane > Niestandardowy CSS i wklejając poniższy kod.

selektor .onsale { \sbackground-color: #cc3366 ; \S}

produktu WooCommerce , cena i dodanie do koszyka

Będziemy dodawać moduły Elementora dla tytułu produktu, ceny produktu i dodawania do koszyka w prawej kolumnie.

Wyszukaj te trzy moduły w konstruktorze Elementora, a następnie przeciągnij je i upuść, aby ułożyć je w kolejności podanej powyżej; jest to w pełni funkcjonalne, ale chcemy je dostosować, aby pasowało do stylu, jak w powyższej sekcji Motyw Hello Elementor. Stylizacja modułów w Elementorze jest prosta, wystarczy kliknąć na moduł, a edytor powinien otworzyć opcje stylizacji po lewej stronie.

Zawartość tych modułów jest doskonała. Dlatego będziemy pracować w zakładce Styl. Po pierwsze, zaktualizujmy czcionkę i kolor tytułu produktu, aby odpowiadały czcionce użytej w motywie Hello Elementor.

Następnie musimy zrobić to samo dla modułów Cena produktu i Dodaj do koszyka, klikając każdy moduł i modyfikując kolor tekstu. W przypadku ceny produktu użyję koloru ciemnoszarego, aby kontrastować z nagłówkiem, więc jeśli podążasz za nim, wpisz ten kod szesnastkowy – #54595f

Następnie w module Dodaj do koszyka zaktualizujemy kilka rzeczy. Kolor tła przycisku i promień obramowania przycisku przy użyciu poniższych ustawień:

• Ustaw treść na „Dodaj do koszyka”.
• Ustaw kolor tła na „#cc3366”
• Ustaw promień obramowania na 0

Zmieniłem promień obramowania selektora kwoty na 0, co można zrobić na karcie Styl dla Ilość.

Konfigurowanie zakładek produktów Elementor

Każdy produkt musi zawierać podstawowe informacje, takie jak opis produktu i recenzje, jeśli są dostępne; jest to zwykle obsługiwane za pośrednictwem zakładek produktów.

Utwórz nowy wiersz pod górną sekcją i przeciągnij moduł Zakładki danych produktów z kreatora Elementor do wiersza, aby go wstawić. Nie jest tu wymagana duża stylizacja, ponieważ dziedziczy niektóre style z motywu Hello Elementor. Zmodyfikujmy jednak styl przycisku przesyłania recenzji.

Aby to zrobić, będziemy ponownie potrzebować trochę niestandardowego CSS. Rozpocznij edycję zakładek Dane produktu, następnie kliknij kartę Zaawansowane i przewiń w dół do Niestandardowy CSS. Wprowadź poniższy kod CSS i dostosuj kolory zgodnie ze swoim projektem.

.woocommerce #formularz recenzji #odpowiedz .form-submit dane wejściowe { kolor tła: #cc3366; kolor: #fff; promień granicy: 0px; }

Krótki opis produktu Elementor

OK, więc mamy przyzwoity, prosty projekt, ale wygląda trochę skromnie. Dodanie modułu krótkiego opisu produktu do górnej części może pomóc w uzupełnieniu tego i dodaniu większego kontekstu.

Wyszukaj moduł krótkiego opisu WooCommerce, a następnie przeciągnij go i upuść pod ceną produktu i nad modułem Dodaj do koszyka.

Nie jest tu jeszcze wymagana żadna stylizacja, ponieważ odziedziczono style z Hello Elementor.

Dosprzedaż produktów Elementor i WooCommerce

Zwiększanie średniej wartości koszyka ma kluczowe znaczenie dla każdej witryny WooCommerce, dlatego miło, że Elementor zawiera moduł sprzedaży produktów, dzięki któremu możesz łatwo zintegrować dostosowywanie w swoim sklepie.

Wyszukaj moduł Upsells produktu w kreatorze Elementor i wstaw go w nowym wierszu za zakładkami Dane produktu.

Jak widać, wymaga to niewielkiej korekty, aby uzupełnić resztę naszego stylu. Rozpocznij modyfikację modułu i dokonaj następujących zmian:

• Ustaw kolor tytułu na – #cc3366
• Ustaw kolor nagłówka na – #cc3366
• Ustaw kolor ceny na – #54595f
• Ustaw kolor tła przycisku na – #cc3366
• Ustaw kolor przycisku na – #fff
• Ustaw promień obramowania przycisku t0 – 0

Gotowy produkt będzie wyglądał jak powyżej. Możesz dostosować kod szesnastkowy koloru według własnego uznania, jeśli użyjesz tego przewodnika jako punktu wyjścia dla swojego szablonu.

Po zakończeniu publikuj swój szablon. W kolejnym oknie zobaczysz pytanie „Gdzie chcesz wyświetlić swój szablon?”. Kliknij „Dodaj warunek”, aby określić, kiedy ten szablon powinien być używany. Możesz wybrać opcję „Wszystkie produkty”, aby używać szablonu na wszystkich stronach produktów. Możesz także użyć tego szablonu tylko w przypadku produktów należących do określonej kategorii lub z powiązanym z nimi konkretnym tagiem.

Wniosek – narzędzie do tworzenia stron

Niektórzy użytkownicy mogą mieć trudności z wyświetlaniem dostosowanych ustawień projektu, takich jak kolor czcionki i typografia, podczas korzystania z Elementora. Jeśli używasz motywu WordPress, który może kontrolować wygląd Twojego sklepu, może to mieć wpływ na wygląd Twojego sklepu WooCommerce. Jeśli napotkasz ten problem, pamiętaj, że w niektórych przypadkach Twój artykuł może zastąpić niestandardowe ustawienia strony.

Możesz także wybrać pustą stronę i utworzyć ją od podstaw, korzystając z widżetów produktu, aby uzyskać całkowicie spersonalizowany wygląd. Użyj pustej strony, zamknij wyskakujące okno biblioteki szablonów, gdy się pojawi i rozpocznij tworzenie na nowo utworzonej stronie. Niestandardowy przycisk „Dodaj do koszyka”, „Cena produktu”, „Zdjęcie produktu” oraz „Tytuł i opis produktu” to tylko niektóre z widżetów WooCommerce, których możesz użyć do dostosowania strony produktu. Odwiedzając tę ​​stronę, możesz zobaczyć wszystkie aktualnie dostępne widżety. Jeśli wolisz, możesz rozmieścić widżety w dowolnym miejscu układu strony i dostosować ich style, aby pasowały do ​​pożądanego wyglądu.

Musisz zmodyfikować stronę produktu, aby wyróżnić swój sklep e-commerce na tle konkurencji i zapewnić swoim klientom wyjątkowe doświadczenia. Co więcej, możliwość estetycznej personalizacji strony produktu ma kluczowe znaczenie dla utrzymania spójnego projektu wizualnego w całym sklepie internetowym. Elementor to fantastyczne narzędzie do dostosowywania stron Twojego sklepu WooCommerce i jest wysoce zalecane. Oprócz tego, że jest prosty w obsłudze, narzędzie do tworzenia stron zawiera wszystkie niezbędne widżety i opcje stylizacji, które pomogą Ci w tworzeniu niestandardowych stron produktów. Mamy nadzieję, że ten samouczek okazał się pouczający i dostarczył Ci informacji potrzebnych do dostosowania stron produktów i archiwów produktów WooCommerce za pomocą Elementora. Czy korzystałeś w przeszłości z Elementora do tworzenia stron WooCommerce? Zachęcamy do podzielenia się swoimi przemyśleniami w sekcji komentarzy. Z przyjemnością rzucimy okiem.