Jak dostosować strony produktów WooCommerce (metoda bez kodu)

Czy chcesz dostosować swoje strony produktów WooCommerce, aby uzyskać większą sprzedaż?

Dobrze zaprojektowana strona produktu ma kluczowe znaczenie dla przyciągnięcia uwagi potencjalnych klientów. Im bardziej atrakcyjna i bogata w informacje jest strona produktu, tym łatwiej jest klientom podjąć decyzję o zakupie.

W tym artykule pokażemy, jak dostosować strony produktów WooCommerce bez pisania jakiegokolwiek kodu.

Dlaczego warto dostosować strony produktów WooCommerce w WordPress?

Domyślnie WooCommerce tworzy strony produktów w Twoim sklepie internetowym podczas kreatora konfiguracji. Niestety, nie są one najlepiej wyglądające ani najbardziej zoptymalizowane pod kątem konwersji.

Optymalizując twoje strony produktów, możesz pomóc kupującym zdecydować, czy produkt jest dla nich odpowiedni i być może przekonwertować więcej odwiedzających na kupujących. Jest to jeden z najprostszych sposobów na zwiększenie twoich przychodów bez zwiększania ruchu w sklepie.

W związku z tym przyjrzyjmy się, jak możesz dostosować swoje strony produktów WooCommerce bez użycia kodu. Możesz użyć tych szybkich odnośników, aby poruszać się po tym przewodniku:

Film instruktażowy

Subscribe to WPBeginner

Jeśli wolisz pisemne instrukcje, czytaj dalej.

Krok 1: Instalacja i włączanie wtyczki SeedProd

Najprostszym sposobem na stworzenie własnej strony produktu WooCommerce jest użycie SeedProd.

SeedProd to najlepszy kreator stron WordPress typu „przeciągnij i upuść „, który zawiera ponad 300 profesjonalnie zaprojektowanych szablonów.

Co więcej, możesz użyć zaawansowanego kreatora motywów SeedProd, aby stworzyć własny motyw WordPress bez pisania ani jednej linii kodu.

Możesz użyć tego kreatora motywów typu „przeciągnij i upuść”, aby dostosować każdą część swojego sklepu internetowego, w tym strony produktów.

SeedProd ma nawet gotowe szablony WooCommerce i bloki e-handlu, które pozwalają szybko stworzyć sklep internetowy o wysokiej konwersji.

Pamiętaj tylko, że ta metoda zastąpi twój obecny, aktualny motyw WooCommerce.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki SeedProd. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do SeedProd ” Ustawienia i wpisz swój klucz licencyjny.

Informacje te można znaleźć na Twoim koncie w witrynie internetowej SeedProd. Po wpisz klucz licencyjny, kliknij przycisk „Zweryfikuj klucz”.

Krok 2: Wybierz zestaw szablonów WooCommerce

Po wykonaniu tej czynności nadszedł czas, aby wybrać zestaw szabl onów WooCommerce, którego będziesz używać w swoim sklepie internetowym. Wystarczy przejść do SeedProd ” Theme Builder, a następnie kliknąć przycisk „Theme Template Kits”.

Ponieważ tworzymy własny motyw WooCommerce, kliknij kartę „WooCommerce”, aby zobaczyć wszystkie różne zestawy e-handlu.

Aby wyświetlić podgląd projektu, po prostu najedź na niego kursorem myszy, a następnie kliknij lupę.

Spowoduje to otwarcie zestawu szablonów w nowej karcie.

Jest to podgląd na żywo, więc można zobaczyć inne projekty w zestawie, klikając odnośniki, menu nawigacyjne, przyciski i inne interaktywne treści.

Ponieważ tworzysz własną stronę produktu WooCommerce, upewnij się, że sprawdziłeś projekt strony produktu. Sprawdź, czy może to być dobra baza, którą możesz później dostosować.

Po znalezieniu zestawu szablonów, którego chcesz użyć, najedź na niego kursorem, a następnie kliknij znacznik wyboru, gdy się pojawi. W tym przewodniku używamy motywu WooCommerce Starter, ale możesz użyć dowolnego szablonu.

SeedProd importuje cały zestaw do twojej witryny internetowej WordPress, dzięki czemu możesz użyć zestawu do utworzenia konfiguratora archiwum produktów, strony sklepu, indeksu bloga i innych.

Aby zobaczyć wszystkie te szablony, przejdź do SeedProd ” Kreator motywów.

Krok 3: Dostosuj szablon strony produktu WooCommerce.

Po zainstalowaniu twojego szablonu, jesteś gotowy do rozpoczęcia konfiguratora strony produktu.

Aby rozpocząć, najedź kursorem na szablon strony produktu, a następnie kliknij odnośnik „Edytuj projekt”, gdy się pojawi.

Spowoduje to otwarcie szablonu w edytorze przeciągnij i upuść SeedProd, z podglądem twojego szablonu WooCommerce po prawej stronie i niektórymi ustawieniami bloków po lewej stronie.

SeedProd pokaże przykład tego, jak strona produktu będzie wyglądać przy użyciu treści z jednego z twoich produktów WooCommerce.

Wszystkie szablony WooCommerce posiadają wbudowane bloki, które są rdzeniem wszystkich projektów SeedProd.

Aby dostosować blok, wystarczy kliknąć, aby wybrać go w podglądzie strony, a następnie wprowadzić zmiany w menu po lewej stronie.

Na przykład, szablon zawiera wbudowany blok Funkcji produktu, który można dostosować na kilka różnych sposobów.

Na początek warto zmienić rozmiar i wyrównanie bloku, korzystając z ustawień w menu po lewej stronie.

Więcej ustawień można znaleźć na karcie „Zaawansowane”. Tutaj możesz sprawić, by obrazek naprawdę się wyróżniał, dodając obramowanie lub cień, dodając animację CSS i nie tylko.

W miarę wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej w twoim sklepie internetowym.

Szablon WooCommerce ma również przycisk wezwania do działania Dodaj do koszyka. Umożliwia on kupującym zakup twoich produktów, więc warto zadbać o to, by przycisk się wyróżniał.

Na początek możesz zastąpić przycisk Dodaj do koszyka twoim własnym konfiguratorem, takim jak Kup teraz lub Kup już dziś. Aby dokonać tej zmiany, wystarczy wybrać przycisk Dodaj do koszyka, a następnie wpisać nowy rodzaj tekstu w polu „Tekst przycisku”.

Możesz również dodać do przycisku krój pisma z ikonką, aby pomóc odwiedzającym zrozumieć, co ten przycisk robi na pierwszy rzut oka.

SeedProd posiada wbudowaną bibliotekę ponad 1400 ikon Font Awesome, których możesz używać na swoich stronach produktów. W menu po lewej stronie kliknij, aby rozwinąć sekcję „Ikonki”.

Można teraz wybrać, czy ikonka ma być wyświetlana przed, czy po tekście przycisku.

Po prostu podejmij twoją decyzję, a następnie kliknij przycisk „Wybierz ikonkę”.

Zobaczysz teraz wszystkie różne ikonki Font Awesome, których możesz użyć. Gdy znajdziesz ikonkę, która Ci się podoba, kliknij ją.

Gdy jesteś zadowolony z wyglądu przycisku, możesz zmienić jego wygląd, klikając kartę „Szablony”. Tutaj znajdziesz różne szablony przycisków, których możesz użyć.

Aby użyć dowolnego z tych wzorów, po prostu kliknij ten, który chcesz.

Po wybraniu szablonu można dostosować wygląd przycisku, klikając kartę „Zaawansowane”. Tutaj możesz zmienić odstępy między przyciskiem a polem ilości, zwiększyć promień obramowania, aby utworzyć zakrzywione rogi i nie tylko.

Inną opcją jest otwarcie listy rozwijanej „Styl przycisku” i wybranie nowego stylu z listy.

Większość ustawień nie wymaga wyjaśnień, więc warto je przejrzeć, aby zobaczyć, jakie różne rodzaje efektów można stworzyć.

Kolejną importowaną sekcją jest blok kart danych produktu. Pokazuje on kupującym szczegółowe informacje, takie jak tagi produktów, atrybuty i kategorie.

Mając to na uwadze, warto kliknąć, aby wybrać blok, a następnie zobaczyć, jakie zmiany można wprowadzić w menu po lewej stronie. Można na przykład zmienić kolor tła, kolor tekstu, zwiększyć dopełnienie i nie tylko.

Aby usunąć dowolny z domyślnych bloków, po prostu najedź kursorem myszy na ten blok.

Następnie kliknij ikonkę kosza, gdy się pojawi.

Można również przenosić bloki na stronie za pomocą funkcji przeciągnij i upuść w edytorze.

Krok 4: Dostosuj twoją własną stronę produktu WooCommerce

Wbudowane bloki szablonu to świetny początek, ale aby zapewnić najlepsze wyniki na twoich stronach produktów, musisz je zoptymalizować.

SeedProd ma wiele bloków WooCommerce, których można użyć do stworzenia wysoko konwertującego rynku internetowego lub sklepu. Aby Ci pomóc, oto kilka bloków, które możesz chcieć dodać do swojej strony produktu WooCommerce.

Pokaż powiązane produkty WooCommerce

Możesz być w stanie uzyskać większą sprzedaż i zwiększyć średnią wartość zamówienia, pokazując powiązane produkty na twoich stronach produktów. Mogą to być produkty, które kupujący często kupują razem lub produkty, które się wzajemnie uzupełniają.

Na przykład, jeśli klient kupuje laptopa, może być również zainteresowany torbą na laptopa.

SeedProd jest dostarczany z gotowym blokiem powiązanych produktów. Aby jednak w pełni wykorzystać możliwości tego bloku, należy skonfigurować powiązane produkty we wtyczce WooCommerce, jak widać na poniższym obrazku.

Aby uzyskać instrukcje krok po kroku dotyczące dodawania odnośników do produktów, zapoznaj się z naszym przewodnikiem na temat upsellingu produktów w WooCommerce.

Po wykonaniu tej czynności wystarczy znaleźć blok Products Related w edytorze SeedProd, a następnie przeciągnąć go na twój układ.

Domyślnie blok pokazuje jeden powiązany produkt w jednej kolumnie.

Możesz wyświetlić więcej produktów, wpisując nowe liczby w polach „Kolumny” i „Wpisy na stronę” lub klikając przyciski strzałek.

Jeśli wyświetlasz wiele produktów, możesz zmienić sposób ich ułożenia za pomocą pola „Zamów według”. Na przykład, w pierwszej kolejności można wyświetlić produkty o najwyższej ocenie, ponieważ klienci wydają się najbardziej zadowoleni z tych produktów.

Można również otworzyć listę rozwijaną „Kolejność” i wybrać, czy powiązane elementy mają być wyświetlane w kolejności rosnącej (ASC) czy malejącej (DESC).

Dodaj ocenę gwiazdkową

Wyświetlanie oceny gwiazdkowej dla każdego produktu może pomóc upewnić kupujących, że twoje produkty są dobrej jakości. W tym celu warto przeciągnąć blok oceny gwiazdkowej na twój projekt.

Aby uzyskać najlepsze wyniki, zalecamy wyświetlanie oceny gwiazdkowej w górnej części ekranu, gdzie klienci mogą ją łatwo zauważyć. Może to pomóc kupującym w szybszym podejmowaniu decyzji o zakupie, ponieważ od razu widzą, czy inni kupujący polecają dany produkt.

Wykorzystaj FOMO, pokazując stany magazynowe produktów

FOMO, czyli „strach przed przegapieniem”, zachęca kupujących do podjęcia działań już teraz.

Jeśli sprzedajesz produkty z limitowanej edycji lub regularnie masz niewielką ilość zapasów, możesz pokazać liczbę pozostałych produktów. Może to przekonać kupujących do zakupu teraz, zamiast czekać i ryzykować, że produkt się wyprzeda.

Aby wyświetlić te informacje, przeciągnij blok Product Stock na twój projekt.

Domyślnie blok wyświetla liczbę pozostałych artykułów, a następnie „w magazynie”. Możesz dodać swój własny komunikat do tego domyślnego tekstu.

Aby to zrobić, wystarczy wpisać rodzaj tekstu w małym edytorze tekstowym w menu po lewej stronie. Jeśli dodasz jakiś tekst, uważaj, aby nie edytować tagu „[sp_product_stock]”, ponieważ pozwala to SeedProd pokazać całkowitą liczbę pozostałych pozycji.

Zastąpienie obrazka wyróżniającego produktem

Wyróżniający się obrazek produktu pozwala kupującym zobaczyć, co kupują w sklepie internetowym.

Czasami jednak warto zastąpić pojedynczy wyróżniający się obrazek galerią produktów. Można na przykład pokazać ten sam produkt pod różnymi kątami. Niektóre sklepy używają nawet interaktywnych obrazków 360 stopni, aby kupujący mogli zapoznać się z produktem bardziej szczegółowo.

Jeśli dodałeś galerię do swoich produktów WooCommerce, warto zastąpić domyślny blok obrazków wyróżniających Twój produkt blokiem galerii.

Aby to zrobić, po prostu najedź kursorem na blok funkcji produktu, a następnie kliknij ikonkę kosza, gdy się pojawi.

Następnie możesz znaleźć blok Product Gallery Image w menu po lewej stronie i przeciągnąć go na twój układ strony.

Zalecamy dodanie tego bloku w górnej części strony, aby odwiedzający mogli od razu zobaczyć, co kupują.

Kupujący mogą powiększyć obraz ek, najeżdżając kursorem myszy na galerię produktu.

Domyślnie ikonka powiększenia pojawia się w prawym górnym rogu obecnego, wyróżniającego się obrazka, ale można to zmienić za pomocą suwaków „Position Top” i „Position Right”.

Można również powiększyć lub pomniejszyć ikonkę lupy za pomocą suwaka „Wielkość litery” lub zmienić kolor ikonki i kolor tła.

Możliwe jest również dodanie obramowania wokół różnych obrazków za pomocą ustawień obramowania „Image Border” i „Thumbnails”.

Stwórz szum w mediach społecznościowych za pomocą przycisków udostępniania

Jeśli kupujący udostępni twój produkt w mediach społecznościowych, może to przyciągnąć więcej osób do twojego sklepu internetowego. Mając to na uwadze, dobrym pomysłem jest dodanie przycisków udostępniania społeczności owego na twoich stronach produktów.

SeedProd posiada blok Social Sharing, który zapewnia pomoc techniczną dla Facebooka, Twittera, LinkedIn i Pinteresta. Wystarczy przeciągnąć i upuścić ten blok na twoją stronę, a przyciski udostępniania na Facebooku i Twitterze zostaną dodane automatycznie.

Aby dodać więcej mediów społecznościowych, wystarczy kliknąć przycisk „Dodaj nowy udział”.

Następnie można wybrać witrynę mediów społecznościowych z menu rozwijanego.

Po dodaniu wszystkich sieci, z których chcesz korzystać, możesz zmienić rozmiar przycisków udostępniania za pomocą menu rozwijanego „Rozmiar”.

Większe przyciski udostępniania społecznościowego będą się bardziej wyróżniać, choć mogą odwracać uwagę od innych treści strony, w tym wezwania do działania Dodaj do koszyka.

Wyświetlanie opinii klientów i recenzji biznesowych

WooCommerce pozwala klientom recenzować twoje poszczególne produkty, ale możesz także chcieć pokazać opinie klientów. Mogą to być cytaty z twoich najlepszych recenzji, komentarze na temat doskonałej obsługi klienta lub inne treści, które chcesz podkreślić.

Blok Testimonials SeedProd pozwala na tworzenie obrotowych referencji, co jest świetnym sposobem na pokazanie wielu informacji na niewielkiej przestrzeni.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania obrotowych referencji w WordPress.

Podświetl ostatnio zobaczone produkty w WooCommerce

Sekcja „ostatnio oglądane” zachęca klientów do ponownego odwiedzenia produktów, które niedawno zobaczyli, ale nie dodali do koszyka. Pomaga to klientom porównać produkty i znaleźć produkt, który jest dla nich odpowiedni.

Daje im to również szansę na zmianę zdania i zakup produktu, który niedawno przeszedł na stronę, ale nie został dodany do koszyka.

Mając to na uwadze, warto dodać blok Ostatnie produkty SeedProd do twojego projektu.

Po dodaniu bloku można zmienić liczbę kolumn, korzystając z ustawień w menu po lewej stronie.

Jeśli chcesz wyświetlić wiele różnych produktów, możesz dodać paginację, włączając przełącznik „Paginacja”.

Jeśli włączysz opcję „Paginacja”, uzyskasz dostęp do dodatkowych ustawień.

Na początek można wyświetlić całkowitą liczbę wyników w górnej części bloku Ostatnie produkty, włączając przełącznik „Pokaż liczbę elementów”.

Warto również włączyć suwak „Pokaż kolejność według”, ponieważ umożliwia on odwiedzającym sortowanie ostatnich produktów.

Jak widać na poniższym obrazku, dodaje to menu rozwijane „Domyślne sortowanie” do obszaru.

Pokaż swoje najpopularniejsze produkty WooCommerce

Możesz chcieć pokazać najlepiej sprzedające się lub najwyżej oceniane produkty na twoich stronach produktów. Ponieważ te produkty już osiągają dobre wyniki, pokazanie ich większej liczbie osób może być łatwym sposobem na zwiększenie sprzedaży.

Inną opcją jest pokazanie produktów, które są obecnie w sprzedaży. Może to zmotywować kupujących do zakupu tych produktów teraz, aby uzyskać najlepszą ofertę.

SeedProd ma kilka bloków, które mogą automatycznie pobierać te produkty. Jeśli chcesz pokazać twoje najlepiej sprzedające się produkty, dodaj blok Najlepiej sprzedające się produkty do swojego projektu.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat wyświetlania popularnych produktów na stronach produktów WooCommerce.

Jeśli chcesz wyświetlić produkty, które mają najwyższą ocenę w gwiazdkach, możesz przeciągnąć blok Najwyżej oceniane produkty na stronę.

Wreszcie, istnieje blok Produkty wyprzedażowe, który pokazuje wszystkie produkty, które są obecnie w sprzedaży.

Bez względu na to, jaki blok dodasz, kliknij, aby go zaznaczyć, a następnie spójrz na ustawienia w menu po lewej stronie. Wszystkie te ustawienia są proste, więc warto je przejrzeć, aby zobaczyć, jakie różne efekty można stworzyć.

Krok 5: Opublikuj własną stronę produktu WooCommerce

Kiedy będziesz zadowolony z wyglądu twojej strony produktu, nadszedł czas, aby zapisać zmiany. Wystarczy kliknąć strzałkę rozwijaną obok opcji „Zapisz”, a następnie wybrać opcję „Opublikuj”.

Niestandardowa strona produktu nie pojawi się w twoim sklepie internetowym, dopóki nie włączysz całego własnego konfiguratora motywu WooCommerce. Daje to możliwość przejrzenia innych projektów w twoim zestawie motywów, a następnie wprowadzenia wszelkich zmian za pomocą kreatora przeciągnij i upuść SeedProd.

Na przykład, zazwyczaj będziesz chciał edytować szablony nagłówka i stopki, aby pełnić funkcję własnego menu nawigacyjnego, niestandardowego logo twojego sklepu i innych treści. Aby uzyskać inspirację, zapoznaj się z naszą listą kontrolną rzeczy, które warto dodać do stopki twojej witryny WordPress.

Aby edytować dowolny inny szablon, przejdź do SeedProd ” Kreator motywów. Następnie najedź kursorem na szablon, który chcesz dostosować.

Następnie możesz kliknąć odnośnik „Edytuj projekt”, gdy się pojawi.

Teraz wystarczy zmienić wygląd, dodając więcej bloków, a następnie dostosowując je za pomocą ustawień w menu po lewej stronie.

Powtarzaj te kroki, aż będziesz zadowolony z konfiguracji wszystkich szablonów.

Gdy będziesz gotowy do uruchomienia własnego konfiguratora motywu WooCommerce, przejdź do SeedProd ” Theme Builder. Następnie kliknij przełącznik „Włącz motyw SeedProd”, aby wyświetlić „Tak”.

Teraz, jeśli przejdziesz na swój sklep internetowy, zobaczysz własną stronę produktu WooCommerce na żywo.

Dodatkowa wskazówka: Dodaj powiadomienia o sprzedaży na żywo, aby zachęcić do większej liczby zakupów

Oprócz optymalizacji twoich stron produktowych, innym sposobem na zwiększenie sprzedaży są powiadomienia o sprzedaży w czasie rzeczywistym. Są to małe wiadomości, które wyskakują z informacją, że klient kupił określony produkt, gdy jesteś na witrynie internetowej.

Dzięki tym powiadomieniom użytkownicy widzą, że rzeczywiste osoby kupują od Ciebie produkt. Może to sprawić, że ci potencjalni klienci poczują się pewniej składając zamówienie, co jest ważne, gdy prowadzisz małą firmę.

Jeśli chcesz dodać powiadomienia o sprzedaży na żywo do twojego sklepu, możesz użyć TrustPulse. Ta wtyczka jest najlepszą opcją do dodawania powiadomień o dowodach społecznych w czasie rzeczywistym na twojej witrynie internetowej.

Dowiedz się więcej o TrustPulse w naszej pełnej recenzji TrustPulse. Jeśli chcesz poznać więcej rekomendacji wtyczek Social Proof, sprawdź naszą listę najlepszych wtyczek Social Proof dla WordPress i WooCommerce.

Mamy nadzieję, że ten artykuł pomógł ci dostosować twoje strony produktów WooCommerce bez kodowania. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia wyskakujących okienek WooCommerce w celu zwiększenia sprzedaży lub z naszą ekspercką listą najlepszych wtyczek WooCommerce dla twojego sklepu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.