Podnieś swoje strony produktów WooCommerce za pomocą pól niestandardowych

Jeśli chcesz ulepszyć swój sklep WooCommerce, nauka korzystania z niestandardowych pól WooCommerce to świetne narzędzie, które możesz mieć w swoim pasku narzędzi.

Pola niestandardowe pozwalają zbierać i wyświetlać dodatkowe informacje o produktach WooCommerce, co jest naprawdę przydatne w dostosowywaniu sklepu.

Dzięki odpowiednim narzędziom niestandardowe pola WooCommerce również nie muszą być skomplikowane. Chociaż z pewnością możesz użyć kodu do wstawiania pól niestandardowych, Elementor oferuje łatwiejszy sposób pracy z polami niestandardowymi, który pozwala zrobić wszystko z interfejsu wizualnego Elementora.

W tym poście omówimy wszystko, co musisz wiedzieć o niestandardowych polach WooCommerce, w tym:

• Dokładniejsze spojrzenie na to, czym są niestandardowe pola WooCommerce i jak pomagają ulepszyć Twój sklep.
• Różne typy pól niestandardowych, które możesz dodać do WooCommerce.
• Kiedy używać pól niestandardowych WooCommerce a atrybutów/taksonomii produktu.
• Jak tworzyć niestandardowe pola WooCommerce na zapleczu.
• Jak wyświetlić niestandardowe pola na interfejsie sklepu za pomocą Elementor Pro lub niestandardowego kodu.

Zacznijmy!

Pola niestandardowe WooCommerce umożliwiają przechowywanie i wyświetlanie dodatkowych informacji o produktach w Twojej witrynie. Są jak zwykłe niestandardowe pola WordPress, ale zbierają informacje o Twoich produktach WooCommerce.

Domyślnie WooCommerce oferuje pola wysokiego poziomu, które dotyczą większości produktów, takie jak ceny i opisy produktów. Ale nie daje Ci możliwości tworzenia pól, które są unikalne dla Twojego sklepu.

W tym przypadku przydatne mogą być pola niestandardowe.

W zapleczu niestandardowe pola ułatwiają przechowywanie unikalnych szczegółów i informacji o Twoich produktach. Zamiast próbować umieszczać niestandardowe informacje w nieustrukturyzowanym polu opisu produktu, możesz utworzyć dedykowane pola dla wszystkich ważnych szczegółów, co ułatwia zarządzanie i aktualizowanie produktów.

W interfejsie użytkownika niestandardowe pola pomagają wyświetlać wszystkie te informacje w uporządkowany sposób. W razie potrzeby dają również możliwość zebrania dodatkowych informacji od kupujących, takich jak umożliwienie im wpisania niestandardowej wiadomości do grawerowania, która zostanie umieszczona na biżuterii, którą kupują w Twoim sklepie.

Jeśli nadal nie jesteś pewien, jak to wszystko się łączy – nie martw się! W następnej sekcji podamy kilka prawdziwych przykładów wykorzystania pól niestandardowych, aby ulepszyć swój sklep.

Istnieją dwa popularne typy pól niestandardowych, które zobaczysz w sklepach WooCommerce:

• Pola danych produktu – umożliwiają przechowywanie dodatkowych informacji o produkcie. Jako administrator sklepu będziesz wprowadzać te dane z pulpitu WordPress zaplecza. Następnie wyświetlisz dane na stronach swoich produktów.
• Niestandardowe pola wejściowe – pozwalają zebrać dodatkowe informacje o produkcie od kupujących. Zazwyczaj ma to pomóc w stworzeniu pewnego rodzaju produktu, który można dostosować. Kluczową różnicą jest to, że Twoi kupujący wprowadzają dane z interfejsu Twojej witryny.

W zależności od sytuacji Twojego sklepu możesz użyć tylko jednego typu pól niestandardowych WooCommerce. Możesz też użyć obu typów, aby wyświetlać dodatkowe informacje i zbierać dodatkowe informacje od kupujących.

Przyjrzyjmy się im bardziej szczegółowo.

Najczęstszym zastosowaniem pól niestandardowych WooCommerce jest wyświetlanie dodatkowych informacji o produkcie. Pola wejściowe backendu WooCommerce są „jeden rozmiar dla wszystkich”, ale możesz mieć sytuacje, w których chcesz wyświetlać unikalne informacje o swoich produktach w ustrukturyzowany sposób.

Załóżmy na przykład, że prowadzisz księgarnię internetową i chcesz dołączyć fragmenty pozytywnych recenzji od krytyków na temat sprzedawanych przez Ciebie książek. Oczywiście, możesz umieścić je bezpośrednio w opisie produktu, ale użycie pól niestandardowych pozwoliłoby ci nadać tym cytatom dedykowane pola wejściowe i mieć większą kontrolę nad tym, gdzie je umieszczasz.

A może sprzedajesz koszulki z grafiką i chcesz zebrać i wyświetlić informacje o autorze każdej koszuli.

Oto przykład dodawania pól niestandardowych na backendzie:

A potem możesz wyświetlać te informacje w dowolnym miejscu na stronach produktów w taki sposób:

Zasadniczo, jeśli kiedykolwiek chcesz wyświetlić jakiekolwiek dodatkowe informacje o produkcie, umieszczenie tych informacji w polach niestandardowych może być naprawdę przydatne z następujących powodów. Możesz…

1. Twórz dedykowane pola wejściowe, co ułatwia dodawanie informacji i aktualizowanie informacji w przyszłości.
2. Wyświetlaj informacje dokładnie tam, gdzie chcesz je umieścić. Możesz umieścić go w dowolnym miejscu na stronach produktów. A dzięki Elementorowi nie musisz nawet znać żadnego kodu, aby to zrobić.
3. Sformatuj informacje tak, jak chcesz. Na przykład możesz dodać kolory, aby przyciągnąć uwagę, obramowania itp.

Inną opcją korzystania z niestandardowych pól WooCommerce jest utworzenie niestandardowych pól wejściowych na stronach pojedynczych produktów, aby kupujący mogli dostosować produkt lub podać dodatkowe informacje.

Na przykład, być może sprzedajesz określony rodzaj biżuterii i chcesz dać swoim kupującym możliwość wykonania niestandardowego graweru na zakupionym przedmiocie. A może chcesz, aby kupujący wpisywali niestandardową wiadomość do sitodruku na koszulce.

Aby zrealizować te przypadki użycia, możesz dodać pole tekstowe do strony produktu frontendu.

Oto przykład, który dodaje takie pole wejściowe oprócz niestandardowych pól danych z poprzedniej sekcji:

Jeśli chcesz zebrać dodatkowe dane o produktach, inną popularną opcją są atrybuty i taksonomie WooCommerce. Zobaczysz je po prostu jako „atrybuty” podczas dostosowywania produktu, ale to, co robi WooCommerce na zapleczu, to tworzenie nowej taksonomii niestandardowej dla każdego tworzonego atrybutu.

Atrybuty i taksonomie są również bardzo przydatnym sposobem przechowywania informacji o produkcie, ale pełnią inną funkcję, dlatego ważne jest, aby zrozumieć różnicę:

• Atrybuty/taksonomie – używasz ich do grupowania produktów, coś w rodzaju kategorii. Twoi kupujący mogą wykorzystać te informacje do odfiltrowania wszystkich produktów z określonym atrybutem. WooCommerce zawiera już domyślnie dwie taksonomie – kategorie produktów i tagi – ale możesz użyć atrybutów, aby dodać nieograniczoną liczbę niestandardowych taksonomii.
• Pola niestandardowe — używasz ich do przechowywania informacji, które są unikalne dla każdego produktu. Produkty nie są grupowane według informacji z pól niestandardowych.

Spójrzmy na kilka przykładów, kiedy używać każdego…

Po pierwsze, załóżmy, że sprzedajesz różne wzory koszulek w różnych kolorach. Potrzebujesz sposobu na przechowywanie informacji o kolorze każdej koszulki, aby kupujący mogli odfiltrować wszystkie koszule w interesujących ich kolorach.

W tym przypadku użycia warto użyć atrybutu produktu (taksonomii). Spowoduje to zgrupowanie różnych produktów według przypisanego koloru i umożliwi kupującym ich filtrowanie. Na przykład przeglądanie wszystkich zielonych koszulek.

Ale załóżmy, że chcesz również dodać notatkę o tym, jak produkt pasuje. Na przykład, czy pasuje do rozmiaru, czy jest nieco ciaśniejszy lub luźniejszy niż normalnie. Te informacje są unikalne dla każdej koszulki i nie są czymś, według czego większość kupujących będzie chciała filtrować, więc lepiej byłoby umieścić je w polu niestandardowym.

Istnieją sytuacje, w których zarówno atrybut, jak i pole niestandardowe mogą pasować i możesz wybrać inne podejście w zależności od konkretnych potrzeb.

Załóżmy na przykład, że chcesz dodać informacje o grafiku, który stworzył każdą sprzedawaną przez Ciebie koszulkę. Oto różne scenariusze, w których możesz chcieć użyć każdej opcji:

• Atrybut — użyjesz tego, jeśli sprzedajesz wiele koszul od każdego artysty i chcesz dać kupującym możliwość odfiltrowania wszystkich koszul danego artysty.
• Pole niestandardowe — użyjesz tego, jeśli chcesz przechowywać i wyświetlać artystę, ale nie musisz umożliwiać filtrowania. Na przykład, może artysta tak naprawdę nie jest tym, co interesuje kupujących, a może sprzedajesz tylko jedną koszulę od każdego artysty.

Praca z niestandardowymi polami WooCommerce składa się z dwóch części:

1. Musisz utworzyć niestandardowe pola na zapleczu, aby móc dodać więcej informacji do swoich produktów.
2. Musisz wyświetlić informacje z tych niestandardowych pól na interfejsie swojego sklepu.

W tej pierwszej sekcji pokażemy, jak utworzyć niestandardowe pola WooCommerce w backendzie. Następnie w następnej sekcji omówimy, jak je wyświetlić.

Sposób tworzenia pól niestandardowych zależy od tego, czy chcesz wyświetlić dodatkowe pola danych produktu, czy chcesz wyświetlić niestandardowe pola wejściowe. Przejdźmy przez oba…

Aby zbierać i przechowywać dodatkowe dane o produktach WooCommerce, możesz użyć dowolnej wtyczki pól niestandardowych. Popularne opcje integrujące się z Elementorem obejmują:

• Zaawansowane pola niestandardowe (ACF)
• Zestaw narzędzi
• Pody
• Meta Box

Jeśli chcesz dowiedzieć się więcej o tych ofertach, mamy szczegółowe porównanie ACF z zestawem narzędzi i kapsułami, ale w tym przykładzie użyjemy ACF, ponieważ jest popularny, bezpłatny i elastyczny. Ta sama podstawowa idea będzie jednak obowiązywać dla wszystkich wtyczek.

Aby rozpocząć, zainstaluj i aktywuj darmową wtyczkę Advanced Custom Fields z WordPress.org. Następnie przejdź do Pola niestandardowe → Dodaj nowe, aby utworzyć nową „Grupę pól”.

Grupa pól to dokładnie to, co mówi nazwa — grupa jednego lub więcej pól niestandardowych, które chcesz dodać do niektórych lub wszystkich produktów WooCommerce.

Aby rozpocząć, użyj reguł lokalizacji , aby określić, do których produktów chcesz dodać pola niestandardowe.

Najpierw ustaw Typ posta równy Product . Jeśli chcesz wyświetlać te pola niestandardowe we wszystkich swoich produktach, to wszystko, co musisz zrobić:

Jeśli chcesz wyświetlać te niestandardowe pola tylko na niektórych produktach (np. produktach z określonej kategorii), możesz dodać więcej reguł w razie potrzeby. Na przykład, jak wygląda kierowanie produktów na kategorie „Odzież” lub „Wystrój”:

Następnie możesz dodać własne pola za pomocą przycisku + Dodaj pole u góry interfejsu. Dla każdego pola możesz wybierać spośród różnych typów pól (np. liczba, krótki tekst, długi tekst itp.) i skonfigurować inne szczegóły dotyczące tego pola.

Na przykład, oto trzy pola niestandardowe do zebrania…

1. Nazwisko projektanta.
2. Rok, w którym projektant stworzył projekt.
3. Oświadczenie projektanta o projekcie.

Gdy będziesz zadowolony z tego, jak wszystko wygląda, opublikuj swoją grupę terenową.

Teraz, gdy edytujesz produkt, zobaczysz te nowe pola niestandardowe w interfejsie edycji produktu:

W następnej sekcji pokażemy, jak pobrać informacje z tych niestandardowych pól i wyświetlić je na interfejsie Twojego sklepu WooCommerce.

Ale najpierw – porozmawiajmy o innym typie niestandardowych pól WooCommerce – niestandardowych polach wejściowych produktu.

Powyższe wtyczki są świetne, jeśli chcesz zebrać dodatkowe informacje o produkcie i wyświetlić je w interfejsie witryny. Nie nadają się jednak do zbierania niestandardowych danych wejściowych od kupujących w interfejsie użytkownika. Na przykład umożliwienie kupującym wpisania niestandardowej wiadomości do grawerowania, która zostanie dodana do produktu.

W tym przypadku użycia zwykle potrzebujesz wtyczki dodatków do produktu WooCommerce. Te wtyczki są specjalnie zaprojektowane do przyjmowania danych produktów od kupujących w interfejsie Twojego sklepu.

Możesz znaleźć wiele wtyczek, aby zaspokoić tę potrzebę, ale dwa dobre miejsca na początek to:

• Oficjalna wtyczka WooCommerce Product Add-Ons – $49
• Zaawansowane pola produktów – freemium

Pokażemy Ci, jak to działa, korzystając z oficjalnej wtyczki Product Add-Ons od zespołu WooCommerce, ale podstawowa idea będzie taka sama w przypadku wszystkich wtyczek dodatków do produktów.

Po zainstalowaniu wtyczki możesz przejść do Produkty → Dodatki, aby utworzyć niestandardowe pola wejściowe, które chcesz wyświetlić na niektórych/wszystkich produktach.

Podobnie jak w przypadku konfiguracji ACF, możesz kierować swoje pola na wszystkie produkty lub tylko na określone kategorie produktów.

Możesz również dodać dowolną liczbę pól i wybierać spośród różnych typów pól.

Jedyną kluczową różnicą jest to, że masz również możliwość dostosowania ceny produktu na podstawie wyborów dokonywanych przez kupującego.

Na przykład możesz pobrać dodatkowe 5 USD, jeśli kupujący chce dodać niestandardowy grawer/wiadomość:

Masz również możliwość dodawania niestandardowych pól wejściowych bezpośrednio do produktów podczas pracy w edytorze produktów. Możesz to zrobić na nowej karcie Dodatki w polu Dane produktu :

Wtyczka Product Add-Ons automatycznie wyświetli te niestandardowe pola na interfejsie Twojego sklepu. Ale w następnej sekcji pokażemy, jak ręcznie kontrolować ich rozmieszczenie za pomocą Elementora.

Teraz, po utworzeniu pól niestandardowych i dodaniu do nich informacji, możesz wyświetlić te informacje w interfejsie witryny.

Tutaj pokażemy dwie opcje:

1. Elementor
2. Niestandardowy kod za pośrednictwem pliku functions.php

Najłatwiejszym sposobem wyświetlenia niestandardowych pól WooCommerce jest Elementor Pro i Elementor WooCommerce Builder. Korzystając z wizualnego interfejsu przeciągania i upuszczania Elementora, możesz utworzyć jeden lub więcej szablonów produktów, które zawierają dane z niestandardowych pól.

Aby rozpocząć, przejdź do Szablony → Kreator motywów i utwórz nowy szablon pojedynczego produktu.

Następnie możesz wybrać jeden z gotowych szablonów lub stworzyć własny projekt produktu od podstaw. Jeśli potrzebujesz tutaj pomocy, możesz zapoznać się z naszym pełnym przewodnikiem na temat dostosowywania projektu strony produktu WooCommerce.

Kiedy będziesz gotowy do wstawienia niestandardowych pól WooCommerce, dodaj zwykły widżet Edytora tekstu, a następnie wybierz opcję wypełnienia go tagami dynamicznymi. Z menu tagów dynamicznych wybierz ACF Field :

Na następnym ekranie kliknij ikonę klucza i użyj menu rozwijanego Klucz , aby wybrać dokładnie pole niestandardowe, które chcesz wyświetlić:

Możesz również użyć opcji Zaawansowane, aby dodać tekst statyczny przed/po informacjach z pola niestandardowego.

I to wszystko! Elementor będzie teraz dynamicznie pobierał dane pola niestandardowego dla produktu, którego podgląd wyświetlasz.

Możesz także użyć niestandardowych pól do wypełnienia więcej niż tylko tekstu. Na przykład, jeśli dodałeś niestandardowe pole liczbowe, możesz użyć tego numeru do wypełnienia ocen w postaci gwiazdek, liczników i nie tylko.

Możesz też dynamicznie wypełniać łącza. Na przykład możesz utworzyć pole niestandardowe zawierające łącze do dokumentacji produktu i użyć tego łącza do wypełnienia przycisku na stronie pojedynczego produktu.

Aby dowiedzieć się więcej o tej funkcji, możesz przeczytać nasz pełny przewodnik po dynamicznych treściach w Elementor Pro.

Lub, aby uzyskać inny sposób wyświetlania tych informacji w Elementorze, możesz również utworzyć tabelę produktów zawierającą niestandardowe dane pola.

Jeśli utworzyłeś niestandardowe pola wprowadzania produktów za pomocą jednej z powyższych wtyczek (takich jak wspomniana oficjalna wtyczka dodatków do produktu), te wtyczki zwykle automatycznie wyświetlają te pola w interfejsie Twojego sklepu, więc nie będziesz musisz ręcznie uwzględnić je w szablonach Elementora.

W Elementorze te dodatkowe pola są zwykle wyświetlane w każdym miejscu, w którym dodasz widżet Dodaj do koszyka w swoich projektach. Jeśli więc chcesz je przenieść, możesz dostosować położenie widżetu Dodaj do koszyka .

Jeśli znasz się na kodzie, możesz również dodać niestandardowe pola WooCommerce do strony produktu, używając pliku functions.php motywu podrzędnego lub wtyczki, takiej jak Fragmenty kodu. Jednak nie zalecamy tej metody większości ludzi, ponieważ jest ona złożona.

Nie tylko będziesz musiał zrozumieć kod, aby go skonfigurować, ale także nie otrzymasz wizualnego podglądu w czasie rzeczywistym i trudno będzie umieścić swoje pola. Właśnie dlatego Elementor stanowi lepszą opcję dla większości właścicieli sklepów.

Jeśli chcesz użyć ręcznej metody kodu, będziesz polegać na hakach WooCommerce, aby umieścić swoje niestandardowe informacje. Jeśli nie znasz się na „hakach”, w zasadzie pozwalają one na wstrzyknięcie kodu lub treści w niektórych częściach Twojego sklepu WooCommerce.

Na przykład możesz znaleźć różne haki do wstawiania treści nad tytułem produktu, pod tytułem produktu, pod przyciskiem dodawania do koszyka itp.

Na początek będziesz chciał wybrać haczyk dla lokalizacji, w której chcesz wstawić zawartość z pól niestandardowych. Aby ułatwić wizualizację tych lokalizacji, możesz skorzystać z doskonałego wizualnego przewodnika po haczykach WooCommerce firmy Business Bloomer.

Oprócz znalezienia haka, którego chcesz użyć, będziesz także potrzebować PHP do wyświetlenia pola z ACF. Jeśli nie jesteś pewien, jak to uzyskać, ACF ma bardzo szczegółową dokumentację.

Następnie możesz użyć fragmentu kodu, jak poniżej, aby wyświetlić pole, gdzie insert_hook_location to lokalizacja przechwytu, którego chcesz użyć, a nazwa_pola to slug nazwy pola z ACF:

Na przykład poniższy fragment kodu wyświetli niestandardowe pole oświadczenia artystycznego pod meta szczegółami produktu WooCommerce:

Oto, jak to może wyglądać na interfejsie Twojego sklepu:

Możesz powtórzyć ten proces, aby wyświetlić dodatkowe pola niestandardowe.

Zrozumienie, jak korzystać z niestandardowych pól WooCommerce, jest naprawdę przydatne do tworzenia niestandardowych, zoptymalizowanych sklepów WooCommerce.

Możesz ich użyć, aby zaoferować ustrukturyzowany sposób wprowadzania dodatkowych danych produktów w panelu zaplecza i wyświetlania tych informacji w witrynie frontendu. Możesz też utworzyć niestandardowe pola wprowadzania, aby kupujący mogli dostosować swoje produkty.

Aby utworzyć niestandardowe pola dla dodatkowych danych produktu, możesz użyć wtyczki, takiej jak Advanced Custom Fields (ACF), podczas gdy niestandardowe pola wejściowe wymagają dedykowanej wtyczki dodatków do produktu.

Następnie, aby najłatwiej wyświetlić te niestandardowe pola na interfejsie sklepu, możesz użyć Elementora i Elementor WooCommerce Builder. Dzięki Elementor możesz tworzyć własne niestandardowe szablony produktów, które zawierają nieograniczoną liczbę dynamicznych informacji z niestandardowych pól – nie jest wymagany kod.

Czy nadal masz pytania dotyczące korzystania z niestandardowych pól WooCommerce w swoim sklepie? Zostaw komentarz i daj nam znać!