Zbuduj i zaprojektuj niesamowitą stronę produktu WooCommerce z Elementor

Musisz zmodyfikować stronę produktu, aby wyróżnić swój sklep e-commerce na tle konkurencji i zapewnić swoim klientom wyjątkowe wrażenia. Ponadto opcja estetycznej personalizacji strony produktu ma kluczowe znaczenie dla utrzymania spójnego projektu wizualnego w całym sklepie internetowym.

Elementor jest jednym z wiodących twórców witryn WordPress na rynku, ale czy wiesz również, ż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 świetnie, prawda?

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

Zacznijmy.

• Tworzenie szablonu Elementora
• Zdjęcie lub galeria produktu Building Elementor
• Tytuł produktu WooCommerce, cena i dodaj do koszyka
• Konfigurowanie zakładek produktu Elementor
• Krótki opis produktu Elementor
• Dodatkowa sprzedaż produktów Elementor i WooCommerce
• Wniosek – Kreator stron produktu Elementor

Tworzenie szablonu Elementora

Pierwszym krokiem w tej procedurze jest zbudowanie nowego szablonu Elementor, przechodząc do Szablonów na pulpicie WordPress. Kliknij „Zbuduj nowy”, a następnie wybierz Pojedynczy produkt jako szablon, który chcesz utworzyć.

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

Zdjęcie lub galeria produktu Building Elementor

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

Utwórz prosty wiersz z 2 kolumnami i wprowadź moduł Obrazy produktów w lewej kolumnie; wygląda to praktycznie i działa, ale dostosujmy odznakę sprzedaży, aby pasowała do motywu Elementor Hello używanego w tym artykule. Aby to zrobić, musimy zastosować małą linię niestandardowego CSS, który można wprowadzić, wybierając Zaawansowane> Niestandardowy CSS i wklej poniższy kod.

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

Tytuł produktu WooCommerce p , cena i dodaj do koszyka

Dodamy moduły Elementora dla tytułu produktu, ceny produktu i dodania do koszyka w prawej kolumnie.

Wyszukaj te trzy moduły w konstruktorze Elementora, a następnie przeciągnij i upuść je, aby ułożyć je w podanej powyżej kolejności; jest to w pełni funkcjonalne, ale chcemy go dostosować, aby pasował do stylu, jak powyższa sekcja Motyw Hello Elementor. Stylizacja modułów za pomocą Elementora jest łatwa, wystarczy kliknąć 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. Najpierw zaktualizujmy czcionkę i kolor tytułu produktu, aby pasowały do ​​tych użytych 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 wpisz ten kod szesnastkowy, jeśli podążasz za tym — #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 zawartość 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żesz zrobić w zakładce Styl dla ilości.

Konfigurowanie zakładek produktu 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 pomocą zakładek produktów.

Utwórz nowy wiersz pod górną sekcją i przeciągnij moduł kart danych produktu z kreatora Elementor do wiersza, aby go wstawić. Stylizacja nie jest tutaj wymagana, ponieważ dziedziczy niektóre style z motywu Hello Elementor. Zmodyfikujmy jednak styl przycisku przesyłania recenzji.

Aby to zrobić, będziemy potrzebować trochę niestandardowego CSS. Rozpocznij edycję kart danych produktu, a następnie kliknij kartę Zaawansowane i przewiń w dół do niestandardowego kodu CSS. Wprowadź poniższy kod CSS, aby dostosować kolory zgodnie ze swoim projektem.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; kolor: #fff; promień obramowania: 0px; }

Krótki opis produktu Elementor

Ok, więc mamy do tej pory przyzwoity, prosto wyglądający projekt, ale wygląda trochę oszczędnie. Dodanie modułu krótkiego opisu produktu w górnej części może pomóc uzupełnić to i dodać więcej kontekstu.

Wyszukaj moduł Krótki opis WooCommerce, a następnie przeciągnij i upuść go poniżej ceny produktu i powyżej modułu Dodaj do koszyka.

Stylizacja nie jest tutaj wymagana, ponieważ odziedziczyła style z Hello Elementor.

Dodatkowa sprzedaż produktów Elementor i WooCommerce

Zwiększenie średniej wartości koszyka ma kluczowe znaczenie dla każdej witryny WooCommerce, dlatego dobrze, że Elementor zawiera moduł Product Upsells, który umożliwia łatwą integrację dostosowywania w swoim sklepie.

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

Jak widać, wymaga to niewielkiego dostosowania, aby uzupełnić resztę naszego stylu. Zacznij modyfikować moduł i wprowadź następujące zmiany:

• 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 do szablonu.

Gdy skończysz, opublikujesz swój szablon. W następnym 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ć „Wszystkie produkty”, aby użyć szablonu na wszystkich stronach produktów. Możesz również użyć tego szablonu tylko w przypadku produktów, które należą do określonej kategorii lub mają powiązany z nimi określony tag.

stron produktu Elementor p

Niektórzy użytkownicy mogą mieć trudności z uzyskaniem niestandardowych ustawień projektu, takich jak kolor czcionki i typografia, do wyświetlenia podczas korzystania z Elementora. Wygląd Twojego sklepu WooCommerce może ulec zmianie, jeśli używasz motywu WordPress, który może kontrolować wygląd Twojego sklepu. Jeśli napotkasz ten problem, pamiętaj, że Twój artykuł może w niektórych przypadkach 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 zacznij budować na nowo utworzonej stronie. Niestandardowy przycisk „Dodaj do koszyka”, „Cena produktu”, „Obraz 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. Możesz przejrzeć wszystkie dostępne obecnie widżety, odwiedzając tę ​​stronę. Jeśli wolisz, możesz rozmieścić widżety w dowolnym miejscu układu strony i dostosować ich style do pożądanego wyglądu.

Musisz zmodyfikować swoją stronę produktu, aby wyróżnić swój sklep e-commerce na tle konkurencji i zapewnić swoim klientom wyjątkowe wrażenia. Ponadto opcja 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 użyciu, kreator stron zawiera wszystkie niezbędne widżety i opcje stylizacji, które pomogą Ci w tworzeniu niestandardowych stron produktów. Mamy nadzieję, że znalazłeś ten samouczek informacyjny i dostarczyłeś Ci informacji potrzebnych do dostosowania produktów i stron archiwum produktów WooCommerce za pomocą Elementora. Czy w przeszłości używałeś Elementora do tworzenia stron WooCommerce? Zapraszamy do podzielenia się swoimi przemyśleniami w sekcji komentarzy. Z przyjemnością rzucimy okiem.