Jak dostosować strony produktów WooCommerce?

Twoje produkty są wyjątkowe — strony produktów, które je prezentują, również powinny być takie. Domyślny szablon strony produktu WooCommerce doskonale pasuje do wielu sklepów internetowych, ale możesz potrzebować czegoś, co odzwierciedla indywidualny styl i zalety Twoich produktów.

Nie musisz być programistą, aby umieścić własną pieczęć na stronach produktów dzięki kilku rozszerzeniom z WooCommerce (i jednej podstawowej funkcji WooCommerce).

Dodatki do produktów

Rozszerzenie Product Add-Ons dodaje więcej pól do stron produktów, dzięki czemu kupujący mogą dostosowywać swoje zakupy. Rozmieszczaj opcje za pomocą pól tekstowych, pól wyboru lub list rozwijanych i dodawaj warianty z przykładowymi obrazami — uwzględnij je dla poszczególnych produktów lub całego katalogu.

Idealny dla: sklepów eCommerce, które oferują dodatkowe opcje, takie jak pakowanie prezentów i monogramy.

• Jeśli prowadzisz sklep odzieżowy oferujący haft, pozwól klientom wpisać tekst, który chcą wyhaftować, zanim zdecydują się na zakup, aby nie trzeba było sięgać po zakupy.
• Jeśli sprzedajesz poduszki akcentujące, zaoferuj opcje dotyczące tkaniny, rozmiaru lub stylu.
• Jeśli sprzedajesz biżuterię, pozwól klientom wybrać wycenę, którą chcieliby wygrawerować na elemencie.
• Jeśli oferujesz produkty na prezent, dołącz opcje pakowania prezentów lub listu z podziękowaniami.
• Jeśli sprzedajesz elektronikę, zezwól kupującym na zakup gwarancji chroniącej ich przedmiot.
• Jeśli reprezentujesz organizację non-profit, pozwól osobom, które Cię wspierają, dołączyć darowiznę do zakupu towarów.

Wybierz opłatę za każdy dodatek lub zaoferuj dostosowania za darmo. To elastyczny sposób na zapewnienie kupującym opcji, których potrzebują.

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

Próbki wariacji i zdjęcia

Jeśli Twój produkt ma różne kolory lub wzory, kupujący chcą zobaczyć je w akcji. Rozszerzenie Variation Swatches and Photos wyświetla wariacje — style, rozmiary, wzory, kolory itp. — z obrazem lub próbką koloru, aby dać klientom lepsze wyobrażenie o tym, co dokładnie kupują, i ulepszyć projekt stron produktów.

Idealne dla: sklepów eCommerce ze zmiennymi produktami.

• Jeśli sprzedajesz koszulki, wyświetlaj opcje kolorystyczne.
• Jeśli sprzedajesz okulary, pokaż wszystkie opcje oprawek.
• Jeśli sprzedajesz biżuterię, podkreśl wisiorki, z których klienci mogą wybierać.
• Jeśli sprzedajesz deskorolki, dołącz zdjęcia wzorów, które oferujesz.

Dowiedz się więcej o próbkach wariacji i zdjęciach i zobacz je w akcji.

Obraz WooCommerce 360

Dzięki WooCommerce 360 ​​Image możesz dodać dynamiczną, niestandardową rotację obrazu 360 do stron produktów, aby kupujący mogli doskonalić szczegóły produktu. Dodaj grupę obrazów do galerii produktów, a wyróżniony obraz zostanie zastąpiony pięknym zdjęciem 360, które klienci mogą obracać, aby zobaczyć wszystkie aspekty produktu. Jest również całkowicie responsywny, więc kupujący na urządzeniach mobilnych mają takie same wrażenia.

Idealny dla: sklepów eCommerce, które chcą zapewnić klientom doświadczenie, takie jak fizyczne trzymanie produktu.

• Jeśli sprzedajesz meble, klienci mogą zrozumieć ich styl ze wszystkich stron.
• Jeśli sprzedajesz części samochodowe, klienci mogą przyjrzeć się szczegółom, które są dla nich ważne.
• Jeśli sprzedajesz zegarki, klienci mogą przybliżyć każdy niuans, grawerunek i funkcję.

Dowiedz się więcej o obrazie WooCommerce 360.

Wideo produktu dla WooCommerce

Filmy to doskonały sposób na zaprezentowanie swoich produktów w akcji. Użyj rozszerzenia Product Video for WooCommerce, aby dodać filmy do galerii obrazów produktów lub zastąpić polecane obrazy filmami. Prześlij filmy do swojej biblioteki multimediów WordPress lub osadź je z usług innych firm, takich jak Vimeo lub YouTube.

Idealne dla: sklepów eCommerce z produktami najlepiej prezentującymi się w akcji

• Jeśli sprzedajesz elektronarzędzia, zademonstruj rozmiar narzędzia i sposób jego działania.
• Jeśli sprzedajesz ubrania, pokaż, jak dany przedmiot pasuje do różnych typów ciała i łączy się z innymi częściami.
• Jeśli sprzedajesz zabawki, dołącz klipy przedstawiające dzieci bawiące się Twoimi produktami oraz referencje od szczęśliwych rodziców.

Dowiedz się więcej o wideo produktu dla WooCommerce.

Tabela rozmiarów dla WooCommerce

Jeśli sprzedajesz produkty w różnych rozmiarach, wykres pomaga klientom zrozumieć, który z nich kupić, i zmniejsza liczbę zwrotów. Rozszerzenie Tabela rozmiarów dla WooCommerce dodaje tabele rozmiarów do stron produktów — prześlij własne lub utwórz je na swoim pulpicie nawigacyjnym. Możesz zdecydować się na wyświetlanie wykresów w szczegółach produktu lub jako wyskakujące okienko.

Idealny dla: sklepów eCommerce, które sprzedają produkty w wielu rozmiarach

Przykłady:

• Jeśli sprzedajesz koszulki, dodaj tabelę rozmiarów z pomiarami ramion, klatki piersiowej i wzrostu.
• Jeśli sprzedajesz meble, dodaj tabelę rozmiarów z pomiarami długości, wysokości i głębokości.
• Jeśli sprzedajesz naklejki, dodaj tabelę rozmiarów z pomiarami wysokości i szerokości.

Dowiedz się więcej o tabeli rozmiarów dla WooCommerce.

Zalecenia dotyczące produktów

Sprzedaż dodatkowa i sprzedaż krzyżowa to skuteczne sposoby na zwiększenie rozmiarów koszyka klientów i ogólnej sprzedaży. Korzystaj z Rekomendacji Produktów, aby pokazać klientom więcej tego, co ich interesuje. Dodaj polecane produkty na podstawie tego, co jest popularne, nowości, co jest w sprzedaży, co uzupełnia stylizację i nie tylko. Lub wyświetlaj je na podstawie tego, co jest już w koszyku klienta.

Idealny dla: sklepów eCommerce z więcej niż jednym produktem

• Jeśli sprzedajesz buty, polecaj skarpetki lub sznurówki.
• Jeśli sprzedajesz kolczyki, polecaj bransoletki i naszyjniki z tej samej kolekcji.
• Jeśli sprzedajesz zabawki, poleć puzzle podobne do tych, które klient ma w koszyku.
• Jeśli sprzedajesz rośliny, polecaj inne popularne odmiany lub dodatki do gleby.

Dowiedz się więcej o rekomendacjach produktów.

Proste zmiany CSS, nie wymaga rozszerzenia

CSS to język kodowania, który kontroluje projekt Twojej witryny, od czcionek i kolorów po rozmiary przycisków i tła. Jeśli masz podstawową wiedzę na temat CSS, przejdź do Wygląd → Dostosuj → Dodatkowe CSS w swoim panelu i wprowadź następujące zmiany:

Zmień rozmiar czcionki tytułów produktów

Użyj poniższego kodu, aby zmienić rozmiar tytułów produktów na 36px. Zastąp „36” dowolną liczbą.

 .woocommerce div.product .product_title { font-size: 36px; }

Zmień kolor tytułów produktów

Kod szesnastkowy to sześciocyfrowy kod, który reprezentuje określony kolor w Internecie. Użyj poniższego kodu, aby zmienić kolor tytułu produktu na kod szesnastkowy #FF5733. Zamień kod szesnastkowy na cokolwiek chcesz; możesz użyć selektora kolorów HTML, aby uzyskać kod dla dowolnego koloru.

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

Pogrub etykiety odmian

Użyj poniższego kodu, aby wyświetlić tytuły odmian pogrubionym tekstem.

 .woocommerce div.product form.cart .variations label { font-weight: bold; }

Oznacz kursywą etykiety odmian

Użyj poniższego kodu, aby dodać kursywę do etykiet odmian.

 .woocommerce div.product form.cart .variations label { font-style: italic; }

Zmień kolory przycisku Kup teraz:

Użyj tego kodu, aby zmienić kolor tła przycisku Kup teraz. Ponownie użyj selektora kolorów HTML, aby uzyskać kod szesnastkowy dla koloru, którego chcesz użyć.

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

Zacznij dostosowywać swoje strony produktów

WooCommerce to przede wszystkim elastyczność i możliwość dostosowania, dlatego zapewnia wszystkie narzędzia potrzebne do edycji projektu i funkcjonalności stron produktów. Dodając pola, filmy, tabele rozmiarów i nie tylko, Twoje strony mogą być tak wyjątkowe, jak oferowane na nich produkty.

Zobacz naszą pełną bibliotekę rozszerzeń, aby uzyskać jeszcze więcej opcji.