Jak edytować i dostosowywać strony produktów WooCommerce

Strona produktowa jest kluczowa w procesie sprzedaży. To tam kupujący decyduje się kontynuować i kupić przedmiot lub odejść bez gwarancji zwrotu. Twoim celem jako właściciela sklepu internetowego jest przyciągnięcie odwiedzających witrynę do stron produktów, a następnie wykonanie przez nich końcowych kroków, takich jak dodanie do koszyka i przejście do kasy.

W tym celu ważne jest, aby strony produktów jak najlepiej promowały sprzedawany produkt. Domyślny szablon produktu WooCommerce jest przejrzysty i profesjonalny, zapewniając solidne podstawy dla Twojej strony, na których możesz budować, korzystając z poniższych metod.

Jak zoptymalizować szablon strony produktu WooCommerce

Istnieje wiele sposobów dostosowywania stron lub szablonów produktów WooCommerce. Niektóre metody są zawarte w WooCommerce. W przypadku innych będziesz potrzebować rozszerzenia. Możesz także skorzystać z Edytora witryny lub ręcznie dostosować ustawienia. Przyjrzyjmy się bliżej każdej opcji.

Jak dostosować stronę produktu WooCommerce za pomocą wbudowanych funkcji

Wiele optymalizacji strony produktu można wykonać bez żadnych dodatków lub kodowania. Wysokiej jakości zdjęcia, pouczające opisy i kluczowe informacje o produkcie ułatwiają odwiedzającemu poczucie komfortu przy zakupie produktu.

Włącz recenzje i oceny, aby budować zaufanie. Skonfiguruj powiązane produkty, sprzedaż krzyżową i dodatkową, aby zwiększyć średni rozmiar zamówienia i ułatwić klientom odkrywanie nowych produktów. Dołącz referencje klientów do opisów produktów lub zakładek, aby uzyskać społeczny dowód słuszności.

Po zoptymalizowaniu zawartości strony możesz dalej ulepszać strony produktów, korzystając z rozszerzeń WooCommerce, edytując szablon strony produktu za pomocą Edytora witryny i ręcznie dostosowując je za pomocą kodu i haków.

Jak dostosować stronę produktu za pomocą rozszerzeń WooCommerce

Rozszerzenie to wtyczka WordPress stworzona specjalnie w celu zapewnienia dodatkowej funkcjonalności sklepom WooCommerce. Poniżej znajduje się kilka rozszerzeń WooCommerce, których możesz użyć, aby zapewnić dodatkowe informacje o produkcie, ulepszyć zakupy i rozszerzyć swoją stronę poza jej domyślne funkcje. Jeszcze więcej rozszerzeń do dalszego dostosowywania można znaleźć w oficjalnej bibliotece rozszerzeń WooCommerce.

1. Zaawansowana odmiana produktu dla WooCommerce

Produkty zmienne to produkty z opcjami, takimi jak rozmiar i kolor — wyborów, których dokonuje kupujący przed finalizacją zakupu. Na froncie WooCommerce wyświetla listę rozwijaną dla każdego atrybutu (takiego jak rozmiar lub kolor) z listą dostępnych odmian poniżej (takich jak Mały, Średni lub Duży).

Aby uzyskać bardziej wizualne podejście, Zaawansowana odmiana produktu dla WooCommerce umożliwia prezentację odmian produktu za pomocą próbek (kolorów, obrazów i tekstu), galerii i tabel. Możesz nawet dołączyć filmy do swoich próbek.

Próbki odmian są wyświetlane na stronie produktu lub na stronie głównej Sklepu w zależności od skonfigurowanych ustawień. Możesz tworzyć próbki, wykorzystując istniejące obrazy produktów i polecane obrazy.

Możesz także dostosować układ galerii produktów, przesuwając ją z domyślnej pozycji pod wyróżnionym obrazem na lewą stronę.

Dowiedz się więcej o zaawansowanych odmianach produktów dla WooCommerce.

2. Menedżer zakładek WooCommerce

Zakładki strony produktu WooCommerce pojawiają się pod przyciskiem Dodaj do koszyka i umożliwiają zaprezentowanie dodatkowych informacji przy jednoczesnym zachowaniu kluczowych elementów, takich jak tytuł i cena, nad zakładką.

Te dodatkowe informacje mogą obejmować materiały i składniki produktu, wagę i wymiary, tabele rozmiarów, tabele cen, czas dostawy, opłaty za wysyłkę, filmy instruktażowe — wszystko. które pomogą klientowi czuć się pewnie podczas dokonywania zakupu.

Za pomocą Menedżera kart WooCommerce możesz zmieniać nazwy, zmieniać kolejność i usuwać domyślne zakładki — Długi opis, Dodatkowe informacje i Recenzje — oraz dostosowywać tę sekcję, tworząc własne zakładki globalne, obejmujące całą kategorię i specyficzne dla produktu.

Użyj wtyczki, aby ustawić domyślną kolejność zakładek, którą można zmienić na poziomie produktu. Dzięki interfejsowi typu „przeciągnij i upuść” nie musisz modyfikować plików motywu ani wchodzić do kodu.

Jeśli masz już niestandardowe karty za pośrednictwem innych wtyczek, WooCommerce Tab Manager wykrywa je, dając ci możliwość ich pokazania lub ukrycia. Główną zaletą tej wtyczki jest to, że zawartość Twoich zakładek jest uwzględniana w wynikach wyszukiwania Twojej witryny.

Dowiedz się więcej o Menedżerze zakładek WooCommerce.

3. Często zadawane pytania dotyczące produktów

Często zadawane pytania (FAQ) to przyjazny dla użytkownika sposób organizowania i prezentowania informacji o produktach odwiedzającym. Dzięki rozszerzeniu Często zadawane pytania dotyczące produktów możesz dodać dedykowaną kartę FAQ dla każdego produktu z nieograniczoną liczbą pytań i odpowiedzi.

Wtyczka działa ze wszystkimi typami produktów i dodaje sekcję FAQ podczas tworzenia lub edytowania strony produktu.

Na froncie często zadawane pytania są wyświetlane w stylu akordeonu z animacją.

Dowiedz się więcej o często zadawanych pytaniach dotyczących produktów.

4. Produkty złożone

Dzięki produktom złożonym Twoi klienci mogą tworzyć zestawy lub konfigurowalne produkty.

W przypadku każdego produktu złożonego umożliwisz klientom wybór spośród wcześniej określonych opcji z istniejących zapasów. Możesz przypisać dodatkowe opłaty do określonych wyborów i zezwolić na to, aby niektóre kategorie były opcjonalne.

Na przykład naszyjnik może zawierać opcje łańcuszka (srebrny, złoty), kamień (rubin, granat, szmaragd) i opcjonalny urok (wiele kształtów do wyboru).

Dla każdego elementu składowego zestawu — łańcuszka, kamienia i zawieszki — możesz wybrać SKU, spośród których klient może wybierać, lub pozwolić mu wybrać dowolną opcję z całej kategorii produktów.

Logika warunkowa pozwala wyświetlać lub ukrywać opcje na podstawie wcześniejszych wyborów (np. czerwona koszulka nie jest dostępna w określonych rozmiarach), a śledzenie na poziomie komponentów wspiera zaawansowane zarządzanie zapasami. Jeśli masz ogromną liczbę opcji, możesz tworzyć widoki z sortowaniem, filtrowaniem i podziałem na strony, aby ułatwić zakupy.

Dowiedz się więcej o produktach kompozytowych.

5. Dodatki do produktów

Rozszerzenie Dodatki do produktów umożliwia kupującym dostosowywanie i ulepszanie zakupów za pomocą bezpłatnych i płatnych dodatków.

Dodatki mogą obejmować gwarancje, materiały wyższej jakości, priorytetowe opcje wysyłki lub personalizacje, takie jak niestandardowe monogramy i grawerowanie. Jeśli ludzie często kupują Twoje produkty jako prezenty, możesz dodać opcję pakowania lub pole wiadomości dotyczącej prezentu.

Organizacje non-profit mogą zezwolić kupującym na dołączenie darowizny do zakupu i przekazanie darowizny na cześć innej osoby, dodając imię i nazwisko oraz wiadomość.

Jeśli masz rezerwacje WooCommerce, Dodatki do produktów pozwalają tworzyć opcje dodatkowych usług (płukanie włosów po strzyżeniu) lub ulepszenia VIP w celu uzyskania specjalnych miejsc i dostępu. Działa również z subskrypcjami WooCommerce, dzięki czemu możesz oferować dodatki do swoich produktów subskrypcyjnych.

Twoje dodatki mogą zawierać niestandardowe pola wyświetlane jako pola tekstowe, listy rozwijane, pola wyboru, wybory oparte na obrazach i niestandardowe dane wejściowe cen dla elementów, takich jak napiwki i darowizny. Pola te można zastosować do całego katalogu lub przypisać do konkretnych produktów.

Po skonfigurowaniu dodatków pojawiają się one na stronach produktów nad przyciskiem Dodaj do koszyka w wybranej przez Ciebie kolejności.

Dowiedz się więcej o Dodatkach do produktów.

Dostosuj stronę produktu za pomocą Edytora witryny

Dzięki motywom blokowym możesz dostosować wygląd strony produktu, edytując szablon strony pojedynczego produktu w Edytorze witryny. W panelu administracyjnym WordPress przejdź do Wygląd → Edytor .  

Wybierz „Przeglądaj wszystkie szablony” z menu rozwijanego w górnej środkowej części strony. Wybierz szablon Pojedynczy produkt z wyświetlonej listy.

Domyślny układ strony zawiera nagłówek, stopkę i blok pojedynczego produktu WooCommerce, który wyświetla informacje o produkcie, cenę i elementy obrazu.

Przed wprowadzeniem zmian w szablonie strony produktu wykonaj kopię zapasową witryny. Pewne zmiany — na przykład przypadkowe usunięcie i zapisanie bloku Pojedynczy produkt — uniemożliwią odwiedzającym robienie zakupów.

Jak edytować szablony nagłówka i stopki strony pojedynczego produktu

Karta Szablon w Ustawieniach (ikona koła zębatego w prawym górnym rogu) zawiera łącza do zarządzania nagłówkiem i stopką. Kliknij dowolną opcję, aby zarządzać tą częścią szablonu strony. Możesz także kliknąć obszar szablonu bezpośrednio, aby rozpocząć edycję. Pamiętaj, że wszelkie zmiany wprowadzone tutaj zostaną zastosowane do wszystkich produktów korzystających z szablonu.

W nagłówku możesz edytować tytuł witryny i linki w głównym menu nawigacyjnym, a nawet dodawać nowe bloki, aby specjalnie dostosować stronę produktu. Użyj tego miejsca, aby dodać obrazy, tekst i inne elementy, aby zwiększyć siłę sprzedaży swojej strony produktu. Możesz dodać informację lub baner promocyjny lub informacyjny, aby poinformować kupujących o aktualnej wyprzedaży lub o tym, jak uzyskać bezpłatną wysyłkę przy zamówieniach powyżej określonej kwoty.

Możesz zrobić coś podobnego ze stopką strony produktu. Na przykład dodaj opinię klienta lub informację o zasadach gwarancji satysfakcji.

Jak dostosować treść pojedynczego produktu

Blok pojedynczego produktu wyświetla pogrubione ostrzeżenie u góry: „Nie usuwaj tego bloku! Usunięcie tej blokady spowoduje niezamierzone skutki dla Twojego sklepu”. Potraktuj tę wiadomość poważnie!

Możesz jednak dodać nowe bloki wokół bloku Pojedynczy produkt, aby całkowicie dostosować projekt strony produktu.

Użyj ikony + , aby dodać elementy powyżej lub poniżej bloku Pojedynczy produkt, a następnie dołącz dowolne bloki, które chcesz dostosować do strony.

Użyj bloku akapitu, aby uwzględnić aktualne oferty („Wydaj co najmniej 100 USD na bezpłatną wysyłkę”), gwarancję satysfakcji lub cokolwiek, co pomoże odwiedzającym podjąć decyzję o zakupie. Dodaj blok wideo, który daje wgląd za kulisy Twoich procesów. Możesz też podać konkretne polecane produkty, które chcesz promować. Tu niebo jest granicą!

Dla każdego bloku możesz edytować ustawienia, takie jak kolor tła, typografia i odstępy, aby dostosować go do własnych potrzeb.

Dostosuj stronę produktu ręcznie (za pomocą kodu i hooków)

Aby uzyskać zaawansowane opcje — bez kosztów i konserwacji wtyczek — możesz edytować i dostosowywać stronę produktu ręcznie za pomocą kodu i haków.

Przed wprowadzeniem jakichkolwiek zmian w plikach ważne jest, aby poświęcić trochę czasu na utworzenie kopii zapasowej WooCommerce. Jeśli korzystasz z Jetpack VaultPress Backup, jest to wykonywane automatycznie w czasie rzeczywistym. Jeśli więc jakakolwiek zmiana spowoduje awarię witryny, możesz przywrócić kopię zapasową za pomocą zaledwie kilku kliknięć, nawet jeśli nie masz dostępu do pulpitu nawigacyjnego WordPress.

Będziesz także chciał użyć motywu potomnego, aby wprowadzić te zmiany. W przeciwnym razie, gdy zaktualizujesz motyw lub WooCommerce w przyszłości, możesz utracić wszystkie dostosowania. Inną opcją jest użycie wtyczki, takiej jak Code Snippets, która pozwala dodawać do witryny niestandardowy kod we fragmentach, które można włączać i wyłączać w razie potrzeby.

Dostosuj strony produktów WooCommerce za pomocą haków

Haki pozwalają właścicielom witryn dodawać kod i dostosowywać strony bez niebezpieczeństw związanych z edycją podstawowych plików. Istnieją dwa rodzaje haków: akcje i filtry. Akcje umożliwiają wstawianie kodu w określonych punktach, a filtry pozwalają manipulować i zwracać zmienną.

Możesz na przykład użyć akcji, aby dodać nowe pole kasy, a następnie użyć filtrów, aby zmienić etykiety lub symbole zastępcze istniejących pól kasy. Listę dostępnych haków WooCommerce znajdziesz tutaj.

Oto kilka innych przykładów zmian, które możesz wprowadzić na stronach produktów za pomocą haków:

• Zmień tekst przycisku Dodaj do koszyka. Zamiast tego możesz na przykład powiedzieć „Przekaż darowiznę”.
• Dostosuj bułkę tartą WooCommerce. Zmień separator bułki tartej, całkowicie usuń bułkę tartą itp.
• Usuń, zmień nazwę i zmień kolejność kart produktów. Na przykład dodaj kartę Składniki lub umieść wideo na jednej z kart.

Dostosuj strony produktów WooCommerce za pomocą CSS

CSS to język kodowania używany do kontrolowania elementów projektu (w przeciwieństwie do JavaScript, który kontroluje działania). Możesz go użyć do modyfikacji projektu stron produktów. Gdy poznasz podstawy CSS, możesz dostosować wszystko, od kolorów i czcionek po rozmiary poszczególnych elementów.

Możesz łatwo dodać kod CSS, przechodząc do Wygląd → Dostosuj → Dodatkowy CSS na pulpicie nawigacyjnym WordPress. Na przykład, jeśli chcesz zmienić kolor czcionki tytułów produktów, użyjesz następującego kodu, zastępując kod szesnastkowy koloru własnym kodem:

 .woocommerce div.product .product_title { color: #222222; }

Jeśli chcesz zmienić kolor przycisku Kup teraz, użyjesz tego kodu, ponownie zastępując kod szesnastkowy wybranym kolorem:

 .woocommerce div.product .button {   background: #000000; }

Możesz zobaczyć więcej przykładów w tym artykule z WooCommerce.

Jak przyspieszyć ładowanie strony produktu

Szybkie ładowanie witryn jest ważne zarówno dla odwiedzających, jak i wyszukiwarek. Ludzie nie chcą czekać, a wyszukiwarki nie chcą odsyłać ludzi do witryn o niskiej wydajności.

Liczy się dosłownie każda sekunda — jednosekundowe opóźnienie w ładowaniu może obniżyć współczynniki konwersji o 20%!

Jetpack Boost to najlepsze rozwiązanie do optymalizacji szybkości i wydajności witryny dla WordPress. Ma szybki i łatwy proces konfiguracji — nie wymaga programisty — i może pochwalić się wynikami, które pokonują pięć najlepszych wtyczek wydajnościowych w bezpośrednim teście.

Po zainstalowaniu bezpłatnej wtyczki możesz przeprowadzić audyt i uzyskać raport na temat bieżących wyników wydajności witryny. Posłużą one jako punkty odniesienia, których możesz użyć do mierzenia ulepszeń podstawowych wskaźników internetowych, czyli wskaźników, których Google używa do oceny wygody użytkowników i wydajności technicznej Twojej witryny.

Prosty pulpit nawigacyjny ułatwia konfigurowanie opcji optymalizacji za pomocą aktywacji jednym kliknięciem. Daje to możliwość indywidualnego testowania modułów wydajności i konfigurowania Jetpack Boost tak, aby idealnie pasował do każdego scenariusza.

Aby uzyskać więcej sposobów na przyspieszenie stron produktów, sprawdź Dziewięć sposobów na przyspieszenie sklepu WooCommerce.

Często zadawane pytania dotyczące dostosowywania stron produktów

Nadal masz pytania? Spójrz na odpowiedzi na niektóre z najczęstszych poniżej.

Jaki jest najlepszy sposób na dostosowanie strony produktu WooCommerce?

Nie ma jednego najlepszego sposobu. Najlepszy sposób zależy od poziomu komfortu przy różnych podejściach.

Edytor witryny oddaje całą moc w Twoje ręce, umożliwiając przeciąganie i upuszczanie elementów w celu stworzenia własnej, spersonalizowanej strony produktu bez konieczności edytowania jakiegokolwiek kodu. To doskonałe rozwiązanie zarówno dla początkujących, jak i zaawansowanych użytkowników!

Jeśli szukasz określonej dodatkowej funkcjonalności, rozszerzenia WooCommerce są świetną opcją. Są sprawdzone i zatwierdzone przez WooCommerce i zapewniają sprzedawcom zaawansowane opcje dostosowywania bez niestandardowego kodu.

Ręczne dostosowywanie i kodowanie zapewniają największą elastyczność, ale wymagają również największej wiedzy technicznej. W porównaniu z używaniem blokad lub rozszerzeń ta metoda ma największe szanse na spowodowanie problemu, a nawet uszkodzenie witryny.

Czy powinienem utworzyć kopię zapasową mojej witryny przed edycją szablonu strony produktu?

Tak. W przeciwieństwie do stron i postów szablony witryn nie mają historii zmian. Utwórz kopię zapasową swojej witryny przed wprowadzeniem jakichkolwiek aktualizacji szablonu strony produktu, aby móc szybko przywrócić ją w razie problemów.

Jetpack VaultPress Backup to wtyczka WordPress do tworzenia kopii zapasowych w czasie rzeczywistym, co oznacza, że ​​kopia zapasowa Twojej witryny nie jest tworzona tylko zgodnie z codziennym harmonogramem lub podczas ręcznego kopiowania. Zamiast tego jest zapisywany automatycznie za każdym razem, gdy wprowadzasz zmiany w swojej witrynie, klient składa zamówienie lub odwiedzający zostawia komentarz. Kiedykolwiek dzieje się coś ważnego? Jest zapisany!

Sklepy e-commerce nie mogą sobie pozwolić na utratę danych, zwłaszcza gdy dane te reprezentują rzeczywiste zamówienia klientów. Nie zadowalaj się rozwiązaniami, które zapisują witrynę tylko od czasu do czasu lub wymagają długiej interakcji z obsługą klienta w celu przywrócenia działania w przypadku wystąpienia problemu.

Dzięki Jetpack VaultPress Backup możesz przywrócić witrynę jednym kliknięciem i szybko wrócić do trybu online. Dzięki aplikacji mobilnej Jetpack możesz przywrócić dane w dowolnym miejscu i czasie, nawet jeśli witryna jest całkowicie wyłączona.

Najlepsza część dla właścicieli sklepów? Wszystkie dane i zamówienia Twoich klientów są chronione i pozostają aktualne.

Jakie są najlepsze praktyki dostosowywania strony produktu WooCommerce?

Niezależnie od metody, której używasz do edytowania i dostosowywania strony produktu WooCommerce, postępuj zgodnie z tymi najlepszymi praktykami, aby chronić siebie, swoją witrynę i swoich klientów.

Najpierw za każdym razem wykonaj kopię zapasową witryny . Podczas dodawania lub aktualizowania kodu witryny pojedynczy błąd może spowodować problemy. Musisz być gotowy do jak najszybszego przywrócenia witryny bez utraty ani jednego zamówienia. Jetpack VaultPress Backup to najlepsze rozwiązanie do automatycznego tworzenia kopii zapasowych w czasie rzeczywistym dla WordPress.

Zrobiliśmy to za Ciebie, więc nie musisz się nawet martwić o zapisanie witryny przed eksperymentowaniem ze zmianami.

Dokonaj zmian w kodzie poza nadrzędnymi plikami motywu . Gdy edytujesz plik motywu lub wtyczki, zmiany te zostaną nadpisane i cofnięte przy następnej aktualizacji motywu lub wtyczki.

Istnieje wiele sposobów dodawania kodu do witryny bez bezpośredniego edytowania motywu lub plików wtyczek. Możesz użyć wtyczki Code Snippets, aby dodawać, edytować lub usuwać elementy na stronie oraz stylizować swoją witrynę za pomocą pola Dodatkowe CSS w Dostosowaniu motywu. Możesz także utworzyć motyw potomny. Ważne jest, aby wprowadzić zmiany w miejscu, w którym nie będą miały na nie wpływu aktualizacje motywu ani wtyczek.

Miej oko na prędkość. Bez względu na to, jak dostosujesz strony produktów, chcesz mieć pewność, że szybkość witryny nie ucierpi. Dzięki Jetpack Boost możesz natychmiast ulepszyć kluczowe obszary, które poprawiają zarówno wygodę użytkowników, jak i postrzeganie przez Google jakości Twojej witryny. Szybsza strona oznacza, że ​​klienci chętniej pozostaną, a Google będzie częściej polecać Cię w wynikach wyszukiwania. Szybki impuls może przejść długą drogę.