Jak dostosować stronę produktu WooCommerce w Divi

Czy korzystasz z Divi i chcesz edytować stronę produktu, aby zwiększyć współczynniki konwersji? Dobrze trafiłeś! W tym przewodniku pokażemy różne sposoby dostosowywania strony produktu WooCommerce w Divi .

WooCommerce to najlepsze narzędzie eCommerce. Odpowiednie wtyczki i zoptymalizowany motyw WordPress to pierwszy krok do posiadania udanego sklepu WooCommerce. Ale to nie wystarczy, aby mieć udany biznes. Aby przenieść swój sklep na wyższy poziom, powinieneś dostosować najważniejsze sekcje. Widzieliśmy już, jak edytować stronę sklepu i stronę kasy, więc dzisiaj pokażemy Ci, jak dostosować stronę produktu WooCommerce w Divi .

Po co dostosowywać stronę produktu WooCommerce?

Strona produktu to miejsce, w którym wyświetlasz przedmioty, które sprzedajesz w swoim sklepie. Może to zrujnować lub zepsuć Twój biznes, więc musisz poświęcić czas na jego optymalizację, aby zwiększyć współczynniki konwersji.

Domyślnie wtyczka WooCommerce zawiera niestandardowy szablon strony produktu. Niezależnie od tego, czy używasz prostego motywu, takiego jak GeneratePress, czy złożonego, takiego jak Avada, elementy i projekt strony produktu będą takie same. Dlatego jeśli chcesz zrobić wrażenie na swoich klientach, powinieneś dostosować domyślną stronę produktu WooCommerce .

Zmiana kolorów i elementów strony produktu to dobry początek, ale możesz zrobić o wiele więcej. Jedną z opcji jest utworzenie nowego szablonu strony produktu z niestandardowym projektem. Przy odrobinie PHP, HTML i CSS możesz całkowicie przeprojektować swoją stronę produktu. Jeśli jednak korzystasz z Divi, istnieje znacznie lepsza opcja.

Motyw Divi zawiera własny niestandardowy program do tworzenia stron o nazwie Divi Builder . Pozwala łatwo dostosować stronę produktu WooCommerce i każdy centymetr Twojej witryny bez pisania ani jednej linii kodu. Przyjrzyjmy się bliżej, jak to zrobić.

Jak dostosować stronę produktu WooCommerce w Divi

W tej demonstracji użyjemy wtyczki Divi Builder , aby wprowadzić wszystkie zmiany na naszej stronie produktu. Zanim zaczniesz, upewnij się, że masz Divi z zainstalowanym Divi Builder na swojej stronie.

Włącz edytor wizualny

Aby rozpocząć dostosowywanie strony produktu WooCommerce w Divi za pomocą Divi Builder, otwórz dowolną stronę produktu, którą chcesz edytować. Po otwarciu strony zobaczysz przycisk o nazwie Włącz edytor wizualny na pasku administracyjnym. Kliknij go, aby włączyć Divi Builder .

Teraz, gdy włączyłeś edytor wizualny Divi, będziesz mógł wybrać dowolny moduł na tej stronie i edytować go. Aby dostosować swój obecny szablon, możesz po prostu edytować istniejące moduły lub dodać nowe. W sekcji modułów zobaczysz moduły oparte na WooCommerce, takie jak:

• Dodaj do koszyka
• dodatkowe informacje
• bułka tarta
• Powiadomienie o koszyku
• Opis
• Galeria
• Obrazy
• Meta
• Cena £
• Ocena
• Powiązany produkt
• Recenzje
• Magazyn
• Karty
• Tytuł
• Sprzedaż dodatkowa

Możesz dodać dowolny z tych modułów do swojej strony i uczynić ją bardziej przyjazną dla użytkownika, po prostu go klikając. Co więcej, najnowsza wersja kreatora Divi działa bardzo dobrze z WooCommerce, dzięki czemu możesz z łatwością dostosować dowolne moduły. Przyjrzyjmy się niektórym z rzeczy, które możesz edytować.

1. Wyświetl lub ukryj recenzje

Zacznijmy od czegoś prostego. Jak widać powyżej, możesz łatwo wyświetlić lub ukryć funkcję oceny gwiazdek i wyłączyć licznik opinii klientów. Wystarczy kliknąć element recenzji, a następnie nacisnąć ikonę Ustawienia . Następnie przejdź do sekcji Elementy i będziesz mieć możliwość wyświetlenia lub ukrycia oceny w postaci gwiazdek oraz liczby opinii klientów.

Aby wzbudzić zaufanie wśród klientów online, zalecamy wyświetlanie zarówno oceny w postaci gwiazdek, jak i recenzji na stronie produktu.

2. Modyfikacja Galerii

Nie jest tajemnicą, że obraz wart jest tysiąca słów. Dlatego, aby zwiększyć współczynniki konwersji, dobrym pomysłem jest dodanie galerii produktów do stron produktów. WooCommerce domyślnie zawiera tę funkcję, więc wszystko, co musisz zrobić, to przesłać obrazy na stronę produktu lub wybrać je ze strony mediów.

Po zaktualizowaniu strony produktu o Twoje zdjęcia, będzie ona wyglądać tak:

Jeśli z jakiegoś powodu chcesz wyświetlić tylko jedno zdjęcie każdego produktu, za pomocą Divi Builder możesz ukryć galerię dowolnego produktu. Po prostu kliknij galerię, naciśnij ikonę Ustawienia , przejdź do Elementów i będziesz mieć możliwość wyłączenia galerii.

Dodatkowo możesz ukryć wyróżniony obraz i odznakę sprzedaży. Biorąc pod uwagę, jak ważne są zdjęcia podczas sprzedaży, zalecamy dodanie co najmniej 3-4 zdjęć każdego z Twoich produktów.

3. Polecana modyfikacja obrazu

Innym ciekawym sposobem dostosowania strony produktu WooCommerce w Divi jest edycja polecanego obrazu . Pierwsze wrażenia mają znaczenie, dlatego powinieneś wybrać atrakcyjny wizerunek funkcji dla swojego produktu. Ten obraz będzie również widoczny na stronie archiwum sklepu.

Po otwarciu opcji polecanego obrazu za pomocą kreatora Divi będziesz mógł zmienić polecany obraz i odznakę sprzedaży.

Jak wspomnieliśmy wcześniej, zalecamy wyświetlanie atrakcyjnych polecanych obrazów, ponieważ mogą one mieć duży wpływ na współczynniki konwersji.

4. Modyfikacja przycisku Dodaj do koszyka

Aby dodać produkty do koszyka, użytkownicy muszą kliknąć przycisk Dodaj do koszyka. WooCommerce ma domyślnie pole ilości z przyciskiem Dodaj do koszyka, więc nie musisz ręcznie tworzyć przycisku. W tej sekcji pokażemy, jak zmodyfikować przycisk Dodaj do koszyka za pomocą konstruktora Divi.

W sekcji Elementy zobaczysz dwie główne opcje.

• Pole ilości
• Magazyn

Jeśli chcesz dać użytkownikowi możliwość wyboru ilości produktu, pozostaw pole ilość bez zmian. Jeśli jednak sprzedajesz na przykład kursy online, możesz chcieć wyłączyć opcję ilości, aby usunąć szumy ze strony produktu.

Jak widać, po wyłączeniu pola ilości, pole zniknie. Na tej stronie produktu nie mamy opcji, aby zobaczyć opcję zapasów, ale jeśli wyświetlasz zapasy w swojej witrynie, możesz włączyć lub wyłączyć tę opcję w ten sam sposób.

5. Zastosuj zmiany do powiązanych Produktów

Wyświetlanie produktów powiązanych z kupującymi to świetny sposób na zwiększenie sprzedaży. Zazwyczaj WooCommerce domyślnie wyświetla powiązane produkty na podstawie głównej kategorii elementu. Jeśli jednak Twój motyw lub szablon nie wyświetla powiązanych produktów, mamy dla Ciebie rozwiązanie. Zobaczmy, jak możesz dostosować stronę produktu i dodać nowy wiersz z powiązanymi elementami za pomocą Divi.

Najpierw dodaj nowy wiersz do strony. W tym samouczku dodamy jeden wiersz, ale możesz wybrać styl, który lepiej pasuje do Twojego sklepu.

Następnie dodaj moduł produktu związanego z WooCommerce do wiersza, jak pokazano poniżej.

Zobaczysz, że powiązana sekcja produktu zostanie dodana do strony. Następnie możesz dostosować układ i kolor.

Jeśli nie wyświetlasz produktów pokrewnych, zalecamy jej wypróbowanie. Są łatwe w konfiguracji i mogą pomóc w zwiększeniu sprzedaży.

6. Dodaj przełącznik

Przełączniki to doskonały sposób na wyświetlanie informacji na stronie produktu przy jednoczesnym utrzymaniu jej w czystości. W Divi możesz dodać przełącznik za pomocą modułu Przełącz. W tej sekcji pokażemy, jak dodać moduł przełączania pod opisem produktu.

Zacznijmy od najechania kursorem na opis produktu i kliknięcia przycisku +. Następnie poszukaj opcji Przełącz na pasku wyszukiwania i otwórz moduł przełączania.

Aby dodać przełącznik, potrzebujesz dwóch głównych rzeczy.

• Tytuł
• Ciało

W tej demonstracji użyjemy nazwy produktu jako tytułu przełącznika i opisu produktu jako korpusu przełącznika. Aby to zrobić, po prostu kliknij ikonę bazy danych po prawej stronie, a zobaczysz różne rodzaje treści w bazie danych. Jako tytuł wybierzemy tytuł Produkt/Archiwum jako nagłówek, ale możesz wybrać typ treści, który najlepiej odpowiada Twoim potrzebom.

Teraz zróbmy to samo dla ciała. Naciśnij ikonę bazy danych i wybierz z menu opcję Opis produktu .

Po zapisaniu na stronie produktu zobaczysz prosty moduł przełączania, który użytkownicy mogą nacisnąć, aby wyświetlić więcej informacji o produkcie.

Divi umożliwia również dodawanie innych niestandardowych elementów, takich jak nagłówki i opisy, a także czcionki, kolory i tak dalej. Zalecamy zabawę i dostosowanie strony produktu za pomocą przełączników.

Strona produktu WooCommerce Pro-Tip

Zanim zakończymy ten poradnik, mamy dla Ciebie krótką wskazówkę.

Regularnie aktualizuj motyw i wtyczkę

Aby mieć pewność, że zawsze masz dostęp do najnowszych funkcji Divi, zalecamy aktualizację motywu Divi, wtyczki Divi Builder i rdzenia WordPress do najnowszej dostępnej stabilnej wersji.

Najprostszym sposobem na to jest włączenie automatycznych aktualizacji z panelu motywów Divi.

Wszystko, co musisz wprowadzić, to nazwa użytkownika Elegant Themes i klucz API, który możesz znaleźć na pulpicie swojego konta Elegant Themes. Po ich wprowadzeniu zapisz zmiany, a otrzymasz automatyczne aktualizacje.

Wykorzystanie w całej witrynie

Dzięki nowym modułom Divi Builder będziesz mógł dodawać sekcje i dostosowywać dowolne strony lub posty. Wszystko, co musisz zrobić, to włączyć edytor wizualny, dodać żądane elementy i wybrać moduły, których chcesz użyć. Na przykład, jeśli piszesz niestandardową recenzję swojego produktu, rozważ dodanie przycisku Dodaj do koszyka do postu z opinią, aby użytkownicy mieli do niego natychmiastowy dostęp.

Bonus: Inne metody edycji strony produktu WooCommerce

Jeśli szukasz innych sposobów na dostosowanie strony produktu, zapoznaj się z tym przewodnikiem, w którym dowiesz się, jak używać wtyczek, kreatorów stron i fragmentów kodu do edycji strony produktu.

Wniosek

Podsumowując, dostosowanie strony produktu WooCommerce za pomocą Divi może pomóc w zwiększeniu sprzedaży i zwiększeniu współczynników konwersji. Dobrą wiadomością jest to, że możesz to zrobić bez pisania ani jednej linii kodu.

Dzięki Divi Builder możesz łatwo edytować stronę produktu w swoim sklepie bez żadnych dodatkowych wtyczek do tworzenia stron. W tym przewodniku pokazaliśmy, jak wyświetlać lub ukrywać recenzje, polecane obrazy i galerie obrazów oraz jak dostosować przycisk Dodaj do koszyka i sekcję powiązanych produktów. To tylko niektóre z rzeczy, które możesz zrobić, więc zachęcamy do zabawy z Divi Builder i wprowadzania innych modyfikacji.

Funkcja przeciągania i upuszczania stron pomoże Ci łatwo dostosować każdy centymetr Twojego sklepu, nawet jeśli nie masz umiejętności kodowania.

Jakie zmiany wprowadziłeś w swoim sklepie za pomocą Divi? Czy miałeś jakieś problemy z naszym samouczkiem? Daj nam znać w sekcji komentarzy poniżej!