Jak dostosować stronę produktu WooCommerce?
Opublikowany: 2021-02-11Szukasz sposobów na dostosowanie swojego sklepu i poprawienie doświadczenia klientów? Mamy dla Ciebie odpowiedni artykuł! W tym przewodniku pokażemy, jak dostosować stronę produktu WooCommerce, aby pomóc Ci zwiększyć współczynniki konwersji i zwiększyć sprzedaż.
Po co dostosowywać stronę produktu WooCommerce?
Projekt strony Twojego produktu jest integralną częścią doświadczeń zakupowych Twojego klienta w Twoim sklepie internetowym. Twoje produkty to najbardziej wyjątkowa i wyróżniająca się część Twojego sklepu WooCommerce. Dlatego powinieneś dostosować swoją stronę produktu i upewnić się, że wyróżnia ona Twoje produkty i usługi. Obejmuje to wygodne sekcje strony produktu, takie jak dodatkowe sekcje szczegółów, tabele rozmiarów, podglądy różnych obrazów dla odmian produktów, dodatkowe opcje zamawiania i wiele innych. A to tylko dodaje więcej treści. Możesz także zmienić kolejność tych sekcji, usunąć domyślne, przeprojektować je i wiele więcej.
Niezależnie od tego, co robisz, Twoim głównym celem powinna być poprawa doświadczenia klienta w Twoim sklepie WooCommerce. To w naturalny sposób pomoże Ci zwiększyć sprzedaż. Jeśli nawigacja po Twojej witrynie jest łatwa, a użytkownicy mogą łatwo znaleźć to, czego szukają, są bardziej skłonni do zakupu, powrotu i polecania Twojego sklepu. Na przykład możesz dodać przyciski bezpośredniej kasy, aby pomóc im szybko kupować, dołączyć wykresy porównawcze, aby pomóc im wybrać odpowiedni produkt, lub dodać unikalne karuzele odmian, aby wyświetlić wszystkie opcje dla odmian pojedynczego produktu.
Istnieją również fajne elementy do generowania leadów, które możesz dodać, aby poprawić sprzedaż swojego produktu, dostosowując stronę produktu. Obejmuje to dodawanie powiązanych produktów w celu uzyskania dodatkowej sprzedaży, przedmiotów związanych z up-sellingiem/down-sellem i nie tylko.
Przyjrzyjmy się teraz różnym opcjom edycji strony produktu w WooCommerce.
Jak dostosować stronę produktu WooCommerce?
Istnieją 3 główne sposoby dostosowania strony produktu WooCommerce :
- Z wtyczkami
- Programowo
- Z kreatorami stron
Wszystkie te metody mają wady i zalety. W tym przewodniku pokażemy Ci je wszystkie, abyś mógł wybrać najbardziej odpowiedni dla siebie.
1. Jak dostosować stronę produktu WooCommerce za pomocą wtyczek?
Istnieje kilka wtyczek do edycji strony produktu w WooCommerce. Przyjrzyjmy się niektórym z najlepszych.
1) Bezpośrednia kasa w WooCommerce
Direct Checkout to idealna wtyczka do uproszczenia procesu zakupu i ułatwienia zakupów klientom. Zawiera wiele opcji dostosowywania strony produktu, dodając przyciski szybkiego zakupu i sprytne przekierowania do koszyka.
W ten sposób możesz pozwolić kupującym szybko kupować Twoje produkty i zwiększyć współczynniki konwersacji. To narzędzie pozwala również dostosować produkt i stronę kasy, dodając opcje szybkiego podglądu do kategorii produktów i stron archiwum, dzięki czemu proces przeglądania i kupowania przedmiotów jest wygodniejszy dla klientów.
Dodatkowo, Direct Checkout zawiera sprytne dostosowywanie przycisku AJAX dodawania do koszyka, aby przyspieszyć proces zakupu i wyeliminować potrzebę ponownego ładowania strony, gdy użytkownicy dodają przedmiot do koszyka. Ponadto możesz jednym kliknięciem pominąć stronę koszyka i przekierować klientów ze strony produktu do kasy.
Kluczowe cechy
- To świetne narzędzie do uproszczenia procesu zakupu i zwiększenia współczynników konwersji
- Zawiera wiele opcji dostosowywania zarówno produktu, jak i strony kasy
- Wygodne przyciski szybkiego zakupu jednym kliknięciem, które można dodać do stron produktów
- Przyciski Dodaj do koszyka z obsługą AJAX i przekierowania do koszyka
- Możliwość dostosowania pól kasy, a także dodania opcji szybkiego podglądu do archiwów i kategorii produktów
Cena £
To jest wtyczka freemium. Ma darmową wersję i trzy plany premium, które zaczynają się od promocyjnej ceny 19 USD (płatność jednorazowa). Możesz jednak użyć poniższego kodu i uzyskać 10% zniżki :
direct_ck10
2) WooKciuki
WooThumbs to kolejne doskonałe narzędzie, które pozwala wyświetlać produkty WooCommerce w najbardziej ekscytujący sposób. Wtyczka zapewnia alternatywny sposób konfigurowania galerii produktów i obrazów oraz umożliwia zupełnie inną sferę dostosowywania stron produktów.
Dodatkowo możesz dodać wygodne opcje, które ułatwią przeglądanie zdjęć produktów i poprawią sprzedaż w Twoim sklepie. Obejmuje to dodawanie przesuwanych miniatur, unikalne projekty galerii, które możesz dostosować do swojego motywu, zintegrowane opcje powiększania obrazów i mnóstwo dodatkowych opcji galerii obrazów. Na koniec możesz również dołączyć unikalne galerie zdjęć dla odmian produktów, a także osadzać filmy w swoich galeriach produktów, aby uzyskać więcej konwersji sprzedaży.
Kluczowe cechy
- Mnóstwo rozszerzonych opcji dostosowywania galerii zdjęć produktów
- Opcje przesuwania miniatur oraz opcje powiększania zdjęć produktów
- Elastyczne galerie zdjęć dla odmian produktów, aby dodać unikalne galerie zdjęć dla każdej odmiany produktu
Cena £
WooThumbs to wtyczka premium, która zaczyna się od 79 USD rocznie i ma 14-dniowy bezpłatny okres próbny.
3) Dodatki do produktów
Dodatki do produktów są niezbędną wtyczką, jeśli szukasz sposobów na zarządzanie doświadczeniami zakupowymi klienta za pośrednictwem stron produktów. To narzędzie zostało zaprojektowane, aby pomóc Ci poprawić konwersje sprzedaży, zapewniając jednocześnie więcej opcji Twoim klientom. Umożliwia dodawanie unikalnych opcji strony produktu, takich jak wybory produktów oparte na obrazach, dodatkowe pola wyboru produktów, a także niestandardowe teksty dla większej personalizacji produktu.
Co więcej, możesz uwzględnić unikalne niestandardowe opcje cenowe, aby Twoja strona produktu była bardziej wszechstronna. Na koniec możesz również dodać opcję pobierania opłat zryczałtowanych lub opłat procentowych za więcej opcji usług dla Twojego sklepu WooCommerce. Więcej informacji na temat dodawania opłat do Twojego sklepu znajdziesz w tym przewodniku.
Kluczowe cechy
- Dodatkowe dodatki do strony produktu, takie jak wybory oparte na obrazach, niestandardowy tekst, przykładowe obrazy i inne.
- Dodatkowe opcje rozszerzeń produktów, takie jak niestandardowe pola wyboru i wprowadzanie tekstu.
- Opcje dodawania opłat zryczałtowanych, opłat procentowych, a nawet dodawania niestandardowych cen dla dodatkowych opcji, takich jak darowizny, napiwki i nie tylko
Cena £
Product Add-Ons to wtyczka premium, która pozwoli Ci zaoszczędzić 49 USD rocznie.
4) Ceny specyficzne dla klienta WISDM
Jeśli szukasz sposobów, aby Twój sklep i jego opcje cenowe były inteligentniejsze i bardziej przyjazne, to ta wtyczka jest z pewnością tą, którą powinieneś sprawdzić. WisdmLABS przedstawia unikalną wtyczkę cenową, która pozwala ustawić spersonalizowane ceny dla różnych klientów, użytkowników i grup. Oznacza to, że możesz ustawić spersonalizowane ceny dla użytkowników o różnych rolach, określonych klientów lub subskrybentów.
Ale to nie wszystko. WISDM Customer Specific Pricing oferuje inne inteligentne opcje cenowe, takie jak dostarczanie kodów rabatowych i ofert dla kategorii lub ilości produktów, a nawet dodawanie rabatów hurtowych dla określonych poziomów dla wielu zakupów.
Oprócz tego możesz również ustawić zasady rabatu koszyka dla określonych kwot. W ten sposób możesz zintegrować członkostwo swojej witryny i zachęcić użytkowników do większych wydatków na Twój sklep, dostarczając im spersonalizowane oferty.
Kluczowe cechy
- Opcje ustalania konkretnych cen dla poszczególnych klientów, subskrybentów i ról użytkowników.
- Oferuj rabaty i oferty sprzedaży hurtowym kupującym i kupującym
- Ustal reguły cenowe dla kategorii produktów, a także rabaty i promocje dla całego sklepu
Cena £
Jest to narzędzie premium, które zaczyna się od 80 USD rocznie.
5) Elex WooCommerce Poproś o wycenę
Jeśli prowadzisz sklep WooCommerce, w którym sprzedajesz produkty hurtowo lub chcesz oferować różne ceny w zależności od tego, czego chcą klienci, ta wtyczka może zaoszczędzić Ci dużo czasu. WooCommerce Poproś o wycenę dodaje fajny przycisk „Poproś o wycenę”, za pomocą którego Twoi klienci mogą przesłać zapytanie o wycenę.
Następnie możesz odpowiedzieć na dowolne zapytanie o wycenę z dobrym oszacowaniem cen i zadowolić swoich klientów bez żadnych kłopotów. Dzięki temu proces wnioskowania i przyjmowania ofert jest łatwiejszy i bardziej elastyczny.
Wreszcie, możesz również bez problemu przyjmować zamówienia na produkty, których nie ma w magazynie, i dodawać korekty cen dla użytkowników, którzy mogą kupować Twoje produkty w różnych rozmiarach hurtowych.
Kluczowe cechy
- Przycisk Poproś o wycenę do użycia przy składaniu zamówienia
- Weryfikacja płatności i powiadomienia administracyjne
- Łatwe opcje odpowiadania, akceptowania lub odrzucania ofert klientów
- Opcje włączania zapytań ofertowych z określonych ról
Cena £
WooCommerce Request a Quote to wtyczka premium, która zaczyna się od 59 USD (płatność jednorazowa).
Jeśli szukasz więcej wtyczek do edycji strony produktu, zajrzyj do tego posta.
Dostosuj stronę produktu za pomocą Direct Checkout
Przyjrzyjmy się teraz, jak możesz edytować stronę produktu w WooCommerce za pomocą Direct Checkout. To narzędzie freemium ma ponad 60 000 pobrań w repozytorium WordPress i pomoże Ci zwiększyć liczbę konwersji. Darmowa wersja ma podstawowe funkcje, więc aby przenieść stronę produktu na wyższy poziom, polecamy jeden z planów premium, które zaczynają się już od 19 USD (płatność jednorazowa).
Przyjrzyjmy się kilku czynnościom, które możesz wykonać za pomocą funkcji Direct Checkout, aby dostosować stronę produktu.
1. Dodaj przycisk szybkiego zakupu
Jedną z najciekawszych opcji, jakie oferuje to narzędzie, jest możliwość dodania przycisku szybkiego zakupu. W ten sposób proces realizacji transakcji jest znacznie szybszy.
Zamiast dodawać produkt do koszyka, przejdź do strony koszyka, a następnie do strony kasy, Twoi klienci będą mogli dokonać zakupu za pomocą kilku kliknięć. A najlepsze jest to, że konfiguracja jest bardzo łatwa.
Po zainstalowaniu i aktywacji wtyczki przejdź do WooCommerce > Direct Checkout > General , włącz przekierowanie i ustaw następujące opcje:
- Dodane do koszyka przekierowanie : Tak
- Dodano do koszyka przekierowanie do : Kasa
Zapisz zmiany i gotowe! Teraz, gdy użytkownicy nacisną przycisk szybkiego zakupu, pominą stronę koszyka i przejdą bezpośrednio do strony kasy.
Aby uzyskać więcej informacji na temat szybkich zakupów, zapoznaj się z naszym przewodnikiem, jak dodać przycisk szybkiego zakupu do swojego sklepu.
2. AJAX dodaj do koszyka
Dodaj do koszyka AJAX to kolejna doskonała funkcja WooCommerce Direct Checkout. Funkcja dodawania do koszyka AJAX umożliwia klientom dodawanie produktów do koszyka bez konieczności ponownego ładowania całej witryny. Poprawia to wrażenia użytkownika i pomaga zwiększyć sprzedaż. Ponadto, ponieważ strony nie muszą być wielokrotnie przeładowywane, zmniejsza to przepustowość i obciążenie serwera.
Aby aktywować funkcję dodawania AJAX do koszyka, przejdź do WooCommerce > Bezpośrednia kasa > Produkty i włącz opcję Dodaj AJAX do koszyka .
Jeśli nie chcesz instalować w swojej witrynie żadnych wtyczek innych firm i masz umiejętności kodowania, możesz również programowo dostosować stronę produktu WooCommerce. Zobaczmy, jak to zrobić.
2. Jak programowo dostosować stronę produktu WooCommerce?
Inną alternatywą jest programowa edycja strony produktu w WooCommerce. Nie zalecamy tej metody początkującym użytkownikom, ale jeśli wiesz, co robisz i chcesz dodać niestandardowe funkcje do swojej strony produktu bez dodatkowego narzędzia, jest to doskonała opcja.
W tym celu użyjemy sprytnych kodów zbudowanych wokół haków WooCommerce . Jeśli ich nie znasz, zapoznaj się z tym pełnym przewodnikiem o tym, jak korzystać z haków WooCommerce. Przewodnik zawiera również informacje o tym, jak dostosować pliki szablonów WooCommerce , co jest świetną opcją, jeśli chcesz edytować swój sklep.
Jest wiele rzeczy, które możesz zrobić, jeśli umiesz kodować. W tej demonstracji skupimy się na tym, jak usunąć lub zmienić kolejność elementów ze strony produktu WooCommerce. Jeśli chcesz więcej przykładów rzeczy, które możesz zrobić, możesz zapoznać się z naszym dedykowanym przewodnikiem, jak programowo edytować stronę produktu WooCommerce.
UWAGA : ponieważ przed rozpoczęciem będziemy edytować niektóre podstawowe pliki, upewnij się, że utworzyłeś pełną kopię zapasową swojej witryny. Dodatkowo zalecamy użycie motywu potomnego. Aby to zrobić, możesz go utworzyć lub użyć dowolnej z tych wtyczek.
Usuwanie elementów ze strony produktu WooCommerce
Aby dodać te kody, otwórz edytor motywów WordPress na pulpicie nawigacyjnym WordPress , przechodząc do Motywy > Edytor motywów . Następnie kliknij plik Functions.php na liście plików w skrajnej prawej kolumnie. Tutaj możesz dodać własne skrypty WooCommerce, aby rozpocząć dostosowywanie swojego sklepu.
WooCommerce udostępnia kilka haczyków do dostosowania dowolnego elementu w Twoim sklepie. Te haki działają z określonymi elementami, więc aby usunąć lub zmienić kolejność tych elementów, musisz użyć odpowiedniego haka z odpowiednią funkcją i odpowiednią wartością priorytetu. Możesz wyświetlić wszystkie zaczepy i powiązane z nimi parametry na tej stronie lub w pliku content-single-product.php wtyczki WooCommerce.
Przyjrzyjmy się teraz, jak dodać skrypt, aby usunąć meta, opis i gwiazdki oceny produktu ze strony produktu WooCommerce.
W tym celu po prostu wklej następujący kod do pliku functions.php :
// usuń gwiazdki oceny remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); // usuń meta produktu remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); // usuń opis remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
Następnie kliknij plik aktualizacji , a strona produktu WooCommerce powinna mieć usunięte te elementy.
Ponowne zamawianie elementów strony produktu WooCommerce
Możesz również zmienić kolejność elementów strony produktu WooCommerce za pomocą haków. Domyślnie elementy WooCommerce mają własną kolejność priorytetów. Jeśli ich nie znasz, możesz sprawdzić tę stronę.
Teraz, aby zmienić kolejność elementów, możesz po prostu usunąć element i dodać je z powrotem za pomocą haka add_action . Następnie możesz dodać własną kolejność priorytetów na haczyku, aby elementy pojawiały się w preferowanej kolejności.
Na przykład, jeśli chcemy, aby sekcja opisu pojawiała się zaraz po tytule, możemy nadać jej niestandardową kolejność priorytetu wynoszącą 6. Ponieważ tytuł ma kolejność 5, opis zostanie dodany tuż pod nim.
Aby to zrobić, dodaj ten skrypt do pliku functions.php i kliknij Aktualizuj plik .
// zmień kolejność opisu remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );
To tylko kilka przykładów tego, co możesz zrobić, aby programowo dostosować stronę produktu WooCommerce . Jest jednak wiele innych rzeczy, które możesz zrobić. Jeśli szukasz inspiracji, zapoznaj się z naszym dedykowanym poradnikiem jak edytować stronę produktu za pomocą kodu.
3. Edytuj stronę produktu WooCommerce za pomocą Kreatora Stron
Kreatory stron to uniwersalna odpowiedź na dostosowywanie stron WooCommerce. Obejmuje to nie tylko stronę produktu, ale każdą inną stronę w Twojej witrynie. Kreatory stron WordPress mają dodatkową możliwość ustawiania i używania szablonów stron WooCommerce. W ten sposób możesz nie tylko korzystać z szerokiej gamy niestandardowych elementów, aby dostosować strony produktów, ale także korzystać z gotowych szablonów i stron, aby ułatwić sobie życie.
Istnieje wiele różnych kreatorów stron kompatybilnych z WooCommerce, których możesz użyć. Chociaż działają one podobnie, mają pewne różnice, dlatego zalecamy zapoznanie się z naszymi dedykowanymi przewodnikami, które pomogą Ci dostosować strony produktów.
- Jak dostosować stronę produktu WooCommerce w Divi
- Jak dostosować stronę produktu WooCommerce w Elementorze
Bonus: Dostosowywanie elementów WooCommerce za pomocą CSS
Możesz także zapoznać się z opcją dostosowania elementów WooCommerce, dodając fragmenty CSS do motywu WordPress. Dzięki temu możesz zapoznać się z pomysłami, takimi jak dostosowywanie rozmiarów czcionek w tytułach, kolory przycisków Kup teraz i wiele innych.
Aby dodać fragmenty CSS do motywu WordPress, przejdź do Wygląd > Dostosuj i kliknij Dodatkowy CSS.
Tutaj możesz dodać fragmenty CSS i dostosować dowolny element. Istnieje wiele rzeczy, które możesz edytować, ale aby dać ci kilka pomysłów, poniżej zostawimy kilka fragmentów. Co więcej, możesz użyć tego selektora kolorów HTML, aby znaleźć odpowiedni kod szesnastkowy, który możesz dodać do swoich kodów CSS koloru.
Zmień tytuł produktu Rozmiar czcionki .woocommerce div.product .product_title { rozmiar czcionki: 42px; }
Zmień kolor tytułu produktu
.woocommerce div.product .product_title {
kolor: #AAb733;
}
Zmień kolor przycisku Kup teraz .woocommerce div.product .button { tło: #000000; }
Po dodaniu fragmentów pamiętaj, aby kliknąć Opublikuj , aby sfinalizować zmiany.
Wniosek
Podsumowując, edytowanie strony produktu jest kluczem do poprawy satysfakcji klienta z zakupów i zwiększenia sprzedaży. W tym przewodniku widzieliśmy różne sposoby dostosowywania strony produktu w WooCommerce:
- Korzystanie z dedykowanych wtyczek
- Programowo za pomocą haków i szablonów WooCommerce
- Korzystanie z kreatorów stron, takich jak Divi i Elementor
Każda z tych metod ma swoje wady i zalety, więc wybierz tę, która najlepiej odpowiada Twoim umiejętnościom i potrzebom. Jeśli nie masz umiejętności kodowania, najlepszym wyborem jest użycie wtyczki. Istnieje kilka narzędzi, ale jeśli potrzebujesz czegoś łatwego w użyciu, wydajnego i niedrogiego, Direct Checkout jest właśnie dla Ciebie.
Z drugiej strony, jeśli lubisz kodować i chcesz stworzyć niestandardowe rozwiązanie, możesz programowo dostosować swój sklep za pomocą niektórych skryptów. Możliwości są nieskończone i możesz zrobić praktycznie wszystko, więc zainspiruj się naszymi skryptami i stwórz własne rozwiązania.
Jeśli szukasz więcej przewodników, jak dostosować swój sklep, zapoznaj się z następującymi postami:
- Jak dostosować stronę sklepu WooCommerce?
- Jak edytować stronę Moje konto
- Pełny przewodnik po dostosowywaniu przycisku Dodaj do koszyka w WooCommerce
- Jak dodawać opłaty do kasy
- Jak ukryć powiązane produkty w WooCommerce
Jakiej metody użyłeś do edycji strony produktu? Czy podczas korzystania z tego przewodnika napotkałeś jakieś problemy? Daj nam znać w komentarzach poniżej, a dołożymy wszelkich starań, aby Ci pomóc.