Jak dostosować stronę produktu WooCommerce?
Opublikowany: 2022-10-18Strony produktów w dowolnej witrynie eCommerce są wymagane jako najważniejsza część. Ponieważ zawiera wszystkie szczegóły dotyczące produktu w uporządkowany sposób z dodatkowymi informacjami, takimi jak powiązane produkty itp.
Domyślna strona produktu WooCommerce jest odpowiednia dla podstawowego szybkiego podglądu produktu , dodawania do koszyka i innych podstawowych funkcji, ale to po prostu nie wystarczy w nowoczesnym konkurencyjnym środowisku eCommerce. Strona produktu odgrywa kluczową funkcję w każdej platformie biznesowej opartej na WooCommerce jako jedna z najważniejszych stron. Jednak domyślna strona po prostu tego nie wycina.
Nie można przecenić znaczenia dostosowywania stron produktów.
Dostosowując strony produktów, zasadniczo zapewniasz swoim klientom wyjątkowe wrażenia z zakupów, co jest również ważne dla utrzymania odwiedzających i zwiększenia liczby sprzedaży.
W tym poście przeprowadzimy Cię przez proces korzystania z edytora stron produktów WooCommerce i niestandardowych widżetów WooCommerce do tworzenia atrakcyjnych stron produktów i nie tylko.
Spis treści
Narzędzia wymagane do dostosowania strony produktu WooCommerce?
Przede wszystkim musisz mieć zainstalowaną najnowszą wersję WordPressa na swoim serwerze, a ponadto musi być zainstalowana wtyczka WooCommerce, aby pomieścić wszystkie funkcje sklepu/sklepu.
Potrzebujesz również opartego na funkcjonalności motywu WordPress eCommerce i, co nie mniej ważne, potrzebujesz wtyczki WooCommerce Elementor Shop Builder . Dzięki wtyczce do tworzenia sklepów Elementor będziesz w stanie w pełni kontrolować i dostosowywać poszczególne strony sklepu oraz siatkę produktów na rynku, listę produktów, bloki porównywania produktów itp.
Jak dostosować stronę produktu WooCommerce?
Mamy nadzieję, że masz już działającą instalację WordPressa i działający motyw eCommerce na swoim serwerze. Przejdźmy teraz krok po kroku przez proces dostosowywania strony produktu, zaczynając od dodatkowych wymaganych zasobów i narzędzi WordPress.
Krok 1: Instalacja wtyczki do Elementor WooCommerce
W tym przykładzie na żywo dostosowywania strony produktu WooCommerce za pomocą różnych elementów i próbek odmian produktów WooCommerce, które powinny być prezentowane klientom, nowoczesna strona produktu, użyjemy czegoś podobnego do kreatora wizualnego kreatora stron produktów WooCommerce - zwanego ShopReady.
Kreator sklepów ShopReady Elementor to niesamowite, wszechstronne narzędzie do tworzenia solidnych witryn sklepów eCommerce. Wtyczka zawiera ponad 105 profesjonalnie przygotowanych widżetów z funkcjami i narzędziami dostosowanymi do konkretnego przypadku. Na przykład dzięki tej wtyczce eCommerce możesz utworzyć funkcjonalny filtr produktów WooCommerce, który jest w stanie filtrować produkty według ceny, rozmiaru, wagi, koloru, oceny, wysyłki itp.
Aby rozpocząć korzystanie z tej wtyczki WooCommerce, zacznij od jej pobrania. Aby to zrobić, zaloguj się do swojego pulpitu nawigacyjnego WordPress , przejdź do I kliknij przycisk Instaluj .
Poczekaj na pomyślną instalację wtyczki i kliknij Aktywuj .
Menu ShopReady pojawi się na Twoim pulpicie nawigacyjnym WordPress. Z tego miejsca będziesz mieć dostęp do wszystkich widżetów, modułów i wstępnie ustawionych treści dostarczanych przez wtyczkę dostosowywania strony Sklepu.
Z tego prostego menu możesz włączać/wyłączać widżety, tworzyć szablony i wstawiać klucze API dla różnych funkcji.
Kolejną świetną cechą tej wtyczki jest jej przełącznik walut dla możliwości WooCommerce. Aby włączyć tę funkcję, musisz postępować zgodnie z instrukcjami pokazanymi poniżej.
Aby dodać klucz API waluty utworzony przez Exchangerate , kliknij kartę API.
Zaloguj się do pulpitu nawigacyjnego konta Exchangerate i skopiuj klucz API, aby go uzyskać. Po wklejeniu klucza API przejdź do pulpitu WordPress > ShopReady > API i kliknij Krok 2: Użyj gotowego szablonu strony produktu lub utwórz go od podstaw
Następnym krokiem jest rozpoczęcie pracy nad stroną produktu, ale wcześniej musisz dodać produkty do swojej witryny WooCommerce. Jeśli nie wiesz, jak to zrobić, możesz skorzystać z tego przewodnika – Jak szybko dodać produkt WooCommerce .
Teraz, aby rozpocząć dostosowywanie strony do prezentacji produktu, użyj ShopReady – WooCommerce Builder, aby utworzyć prostą stronę produktu, przechodząc do pulpitu nawigacyjnego wtyczki i klikając kartę Szablony . Włącz kategorię Szablon produktu i poszukaj konfiguracji pojedynczego produktu. Teraz kliknij ikonę edycji.
Zostaniesz przekierowany do ekranu Edytora Elementor . Teraz, aby rozpocząć dostosowywanie strony, kliknij symbol plusa, aby dodać sekcje Elementora. Istnieją różne typy sekcji Elementora, które możesz dodać do swojej strony w zależności od tego, jak chcesz wyglądać i jakich widżetów chcesz użyć.
Krok 3: Dostosowywanie strony produktu WooCommerce za pomocą widżetów Elementor
- Dodawanie tytułu produktu
Teraz, ponieważ umieściłeś podstawową strukturę sekcji Elementora dla swojej strony produktu WooCommerce, możesz zacząć od dodania tytułu produktu. Aby to zrobić, musisz przeciągnąć i upuścić widżet Tytuł produktu na stronie produktu.
Aby wyświetlić odpowiedni tytuł produktu, kliknij kartę Treść , a pod nią znajdziesz opcje Odśwież edytora . Wybierz odpowiedni tytuł produktu z opcji Produkt demonstracyjny .
Musisz dodać lub edytować odpowiednie informacje o produkcie z pulpitu nawigacyjnego produktu WooCommerce , aby te dane wyświetlały odpowiedni tytuł produktu.
- Dodawanie wyróżnionego obrazu do strony produktu
Następnie będziesz potrzebować galerii obrazów produktu i obrazu funkcji dla swojego produktu. W tym celu możesz użyć jednego z wielu widżetów graficznych dostarczonych przez dodatek do Elementora „wszystko w jednym ” dla eCommerce.
W tym przykładzie użyjemy widżetu ShopReady Miniatura z powiększeniem, który robi to, co sugeruje jego tytuł. Za pomocą tego widżetu możesz pokazać klientom wersję powiększenia obrazu produktu WooCommerce po najechaniu kursorem na obraz produktu.
Tak jak poprzednio, możesz wybrać poprawny obraz produktu z opcji Produkt demonstracyjny , zakładka Treść .
- Dodawanie bloku do widżetu cen
Kolejnym ważnym elementem, który należy mieć na stronie produktu eCommerce, jest blok cenowy produktu. W tym celu musisz zaktualizować atrybuty produktu WooCommerce poprawnymi aktualizacjami i użyć widżetu ShopReady Price , który należy umieścić pod tytułem produktu.
Aby wyświetlić prawidłową cenę, wybierz tytuł produktu z opcji Produkt demonstracyjny , w zakładce Treść .
- Dodawanie opisu produktu
Masz również możliwość dodawania wysoce konfigurowalnych opisów produktów za pomocą tego widżetu Opis produktu z dodatkami do produktów WooCommerce . Na karcie stylów będziesz mieć możliwość dostosowania sposobu, w jaki opis produktu będzie wyglądał dla mas.
- Dodawanie funkcji Dodaj do koszyka
Dodaj do koszyka to kolejna bardzo ważna funkcja, która pozwala klientom mieć wiele produktów na stronie koszyka przed przejściem do strony kasy.
Aby mieć solidną funkcję Dodaj do koszyka na swojej stronie sklepu eCommerce, możesz skorzystać z widżetu Dodaj do koszyka ShopReady. Za pomocą tego widżetu możesz pozwolić swoim klientom zwiększać i zmniejszać ilość produktów w koszyku bezpośrednio z bloku Dodaj do koszyka.
Możesz także dostosować swój przycisk dodawania do koszyka Elementora z poziomu stylizacji produktu WooCommerce Typografia karty Styl Elementor , kolor, tło, margines, dopełnienie itp.
- Dodawanie metadanych do strony produktu
Aby zapewnić klientom lepsze wrażenia z zakupów, należy wdrożyć filtr produktów WooCommerce, korzystając z metadanych i atrybutów produktów dodanych podczas dodawania produktów do WooCommerce .
Aby zaprezentować te dane na stronie produktu, wyszukaj widżet ShopReady Meta i upuść go pod przyciskiem Dodaj do koszyka.
Twoje tagi i metadane produktów powinny wyświetlać się poprawnie po wybraniu prawidłowego tytułu produktu z opcji Produkt demonstracyjny na karcie Treść .
- Dodawanie przycisków udostępniania w mediach społecznościowych do strony produktu
Twoi klienci mogą również udostępniać Twoje posty o produktach w mediach społecznościowych bezpośrednio ze strony produktu WooCommerce, korzystając z prostego bloku przycisków udostępniania w mediach społecznościowych. Które możesz utworzyć, po prostu używając widżetu „przeciągnij i upuść” Elementor Social Share.
Blok można dostosować za pomocą dowolnych ikon mediów społecznościowych, tekstu i linków do udostępniania, bezpośrednio z karty Treść . Można również dostosować, aby zmienić wygląd bloków udostępniania społecznościowego na karcie Styl Elementora .
I skończysz z podstawami dostosowywania strony produktu WooCommerce.
Krok 4: Dodawanie powiązanych produktów do strony produktu WooCommerce
Świetnym sposobem na zwiększenie sprzedaży online jest zaprezentowanie powiązanych produktów na stronie produktu za pomocą widżetu dodatków do produktów WooCommerce. Za pomocą widżetu ShopReady Related Products możesz utworzyć w sekcjach oszałamiający blok suwaka produktu.
Aby użyć widżetu, wystarczy przeciągnąć i upuścić widżet pod blokiem pojedynczego produktu i wybrać indywidualnie każdy produkt, który chcesz zaprezentować pod swoją stroną pojedynczego produktu.
Na zakończenie
Mamy nadzieję, że ten informacyjny przewodnik pomógł Ci lepiej zrozumieć dostosowywanie szablonu strony produktu WooCommerce i jak możesz wykorzystać te niesamowite narzędzia, aby urozmaicić swoją witrynę eCommerce o lepsze funkcje.
Dzięki wyskakującym szczegółom produktu WooCommerce w tabeli porównawczej produktów, wszystkim, czego wymaga rynek eCommerce, ShopReady może dostarczyć. Jeśli masz jakiekolwiek pytania dotyczące tego tematu, skontaktuj się z sekcją komentarzy poniżej.