Jak dodać pola niestandardowe do stron produktów WooCommerce
Szukasz sposobu na dodanie pól niestandardowych do stron produktów WooCommerce?
Czy chcesz dodać szczegółowe specyfikacje na stronie produktu WooCommerce, czy jesteś zainteresowany pokazaniem alternatywnych wariantów produktu za pomocą kliknięcia przycisku, dodanie pól niestandardowych w WooCommerce zajmuje tylko kilka chwil twojego czasu.
Po tym, jesteś w stanie dostosować wszystkie części pulpitu nawigacyjnego WooCommerce i szybko włączyć informacje o witrynie, które zwykle wymagałyby ręcznego wprowadzania danych.
W tym artykule pokażemy ci krok po kroku, jak dodać pola niestandardowe do produktów WooCommerce za pomocą bezpłatnej wtyczki Advanced Custom Fields (ACF).
Przykłady użycia pól niestandardowych dla WooCommerce
Kiedy pola niestandardowe w WooCommerce mogą być przydatne?
- Do dodawania dodatkowych informacji o produkcie dla rzeczy takich jak komputery, gdzie pokazałbyś specyfikacje techniczne, takie jak pamięć RAM i moc obliczeniowa.
- Wiadomości promocyjne, które możesz szybko zmienić na coś innego.
- Unikalne elementy multimedialne, których nie można wstawić za pomocą standardowych funkcji WooCommerce, takich jak dodatkowe wideo.
- Daty i godziny, gdy masz odliczanie, aukcję lub datę premiery produktu.
- Dodatkowe opcje produktu, oprócz wariantów, które klienci mogą przeglądać.
- Akapity wyjaśniające szczegółowe instrukcje dotyczące korzystania z produktu.
- Oferty dodatkowe, w których użytkownik otrzymuje kilka produktów uzupełniających, które uzupełniają bieżący produkt. Przykłady obejmują przystawki do elektronicznych szczoteczek do zębów lub różne charmsy do bransoletki.
- Wszelkie nietypowe lub dodatkowe dane, które chciałbyś zawrzeć na stronie produktu, które albo nie są obsługiwane przez WooCommerce, albo są łatwiejsze do uzupełnienia za pomocą pól niestandardowych.
Jak dodać pola niestandardowe na stronach produktów WooCommerce
W tym przykładzie stworzymy przykładowy sklep komputerowy, który sprzedaje laptopy. Wpisanie specyfikacji komputera dla każdego nowego laptopa zajęłoby dużo czasu, więc zamiast tego uwzględnimy pola do wyboru tych specyfikacji w oparciu o typy komputerów, które sprzedajemy.
Aby dodać pola niestandardowe do produktów WooCommerce, musisz zainstalować bezpłatną wtyczkę Advanced Custom Fields w swojej witrynie WordPress. Następnie, oto jak ją skonfigurować…
Zaawansowane pola niestandardowe
Tutaj jak dodać pola niestandardowe na stronach produktów WooCommerce krok po kroku:
- Utwórz nową grupę pól
- Dodaj swoje niestandardowe pole (pola)
- Konfiguruj dodatkowe ustawienia grupy pól
- Dodaj informacje do produktów
- Wyświetl informacje o polu niestandardowym na front-end
Utwórz nową grupę pól
W swoim pulpicie nawigacyjnym WordPress przejdź do nowej karty Pola niestandardowe. Następnie kliknij Dodaj nowy obok Grupy pól.
Nadaj nazwę grupie pól. Na przykład „Pola komputerowe”. Grupa pól to zbiór pól, które będziesz mieć dla jednego produktu lub sekcji witryny, jak np. lista specyfikacji, które chcesz wyświetlić na wszystkich stronach produktów laptopów.
Dodaj swoje niestandardowe pole(a)
Kliknij przycisk Dodaj pole, aby dodać pole do tej grupy.
Utwórz:
- Etykieta pola – głównie dla własnego odniesienia.
- Nazwa pola – służy jako litery, które umieścisz w swoim własnym niestandardowym kodzie lub shortcode w naszym przypadku. Możesz pozostawić to jako domyślne, które generuje wtyczka.
- Typ pola – format, który tworzysz dla tego pola. Możesz wybrać spośród opcji takich jak selektory daty, pola wyboru, rozwijane i przyciski radiowe.
Możesz również umieścić pewne instrukcje dla siebie lub dewelopera, wraz z określeniem, czy to pole jest wymagane, czy nie.
Jeśli pracujesz z polem, które ma wiele opcji (jak przyciski radiowe), będziesz musiał dodać opcje wyboru pola. Są to opcje wyboru, które chcesz wyświetlić na stronie produktu, takie jak różne procesory.
Reszta ustawień jest zazwyczaj opcjonalna, jak wartość domyślna, układ i czy chcesz pokazać wartość lub etykietę.
Kiedy skończysz pracę z polem lub grupą, kliknij przycisk Publikuj lub Aktualizuj, aby je zapisać.
Aby dodać więcej pól do grupy, kliknij ponownie przycisk Dodaj pole.
Tak to wygląda z czterema polami w tej grupie dla:
- CPU
- Memory
- Operating System
- Release Date
Konfiguracja dodatkowych ustawień grupy pól
Gdy grupa pól jest już gotowa, przewiń do modułu Location. To tutaj określasz, gdzie chcesz, aby grupa pól pojawiła się w pulpicie nawigacyjnym WordPress.
Ustaw typ postu równy Produkt. Lub, jeśli chcesz być bardziej szczegółowy, możesz również wybrać określoną kategorię produktów.
Under Ustawienia, upewnij się, że Grupa pól jest Aktywna. To pozwoli Ci zobaczyć ją na tych stronach produktów i potencjalnie pokazać wybór pola swoim klientom.
Styl zależy od Twoich własnych preferencji. To samo można powiedzieć o pozycji, rozmieszczeniu etykiet i rozmieszczeniu instrukcji. To wszystko są osobiste preferencje i sposób, w jaki chcesz sformatować swój backend. Jeśli masz wątpliwości, po prostu zostaw je jako domyślne.
Ustaw Numer Zamówienia, jeśli masz wiele grup pól pokazujących się na stronach produktów. To kontroluje kolejność wyświetlania różnych grup pól.
Możesz także ustawić opis i ukryć pewne szczegóły na ekranie.
Dodawanie informacji do produktów
Następnie przejdź do edytora produktu, w którym chcesz dodać pola niestandardowe.
Jeśli wszystkie ustawienia są skonfigurowane prawidłowo, powinieneś zobaczyć pola niestandardowe poniżej pola danych produktu.
Dla naszego przykładu, jeśli miałbyś dodać nową stronę produktu laptopa, możesz wybrać CPU, Pamięć, System operacyjny i Datę wydania.
Wyświetl informacje pola niestandardowego na front-end
Aby zakończyć, musisz wyświetlić informacje z pól niestandardowych na front-end pojedynczej strony produktu. Możesz dodać te informacje w dowolnym miejscu, ale dobre miejsca startowe znajdują się w długim lub krótkim opisie produktu.
Aby wyświetlić informacje o polu na front-end, użyj shortcode. Dodaj nazwę pola między cudzysłowami:
Możesz znaleźć nazwę pola dla każdego pola w interfejsie edytora grup pól:
Aby zakończyć, naciśnij przycisk Publikuj lub Aktualizuj.
Gdy otworzysz swój produkt na front-end, powinieneś zobaczyć swoje pola niestandardowe, do których dodałeś shortcodes:
Czy masz pytania dotyczące dodawania pól niestandardowych?
Przewagą korzystania z Advanced Custom Fields nad alternatywnymi wtyczkami do tworzenia pól jest to, że możesz umieścić swoje nowe pola w dowolnym miejscu w witrynie, w tym na stronach produktów, postach i modułach koszyka – dostosowując swój pulpit nawigacyjny i przyspieszając proces tworzenia treści.
Jest to wspaniała opcja rozszerzenia kreatywności i uczynienia żmudnego zadania budowania stron produktów nieco prostszym.
Rozumiemy, że wtyczka Advanced Custom Fields ma trochę krzywej uczenia się, więc jeśli masz jakieś myśli lub pytania dotyczące dodawania pól niestandardowych w WooCommerce, daj nam znać w komentarzach poniżej!
Możesz również sprawdzić nasz pełny samouczek ACF, aby dowiedzieć się więcej o tym, jak korzystać z tej elastycznej wtyczki.
Darmowy przewodnik
5 Essential Tips to Speed Up Your WordPress Site
Reduce your loading time by even 50-80%
just by following simple tips.
.