ACF WooCommerce: własne pola produktu krok po kroku (wymiary, materiał, plik do pobrania)

Opis produktu w WooCommerce to jeden blok tekstu. Jeśli przy każdym produkcie chcesz mieć te same „rubryki” w tym samym miejscu, np. wymiary, materiał, czas realizacji i instrukcję w PDF, wygodniej jest dodać do produktów własne pola. Ten poradnik pokazuje, jak zrobić to w Advanced Custom Fields (ACF): utworzysz grupę pól, wypełnisz ją w edycji produktu i pokażesz na stronie produktu w kreatorze stron albo krótkim kodem. Dowiesz się też, kiedy wystarczy darmowe ACF, a kiedy przyda się ACF PRO.

Dokumentacja producenta ACF jest po angielsku. Paczka ACF PRO zawiera polskie tłumaczenie panelu, więc napisy u Ciebie mogą brzmieć trochę inaczej niż nasze opisy. Dlatego przy każdej opcji podajemy opis po polsku i angielską nazwę z dokumentacji w nawiasie, żebyś łatwo ją znalazł.

Pole ACF, atrybut czy pole dla klienta?

Zanim dodasz pole, sprawdź, czy WooCommerce nie robi tego już sam:

• Cecha do filtrowania albo do wariantów (rozmiar, kolor) — użyj atrybutu WooCommerce. Atrybut z zaznaczoną opcją widoczności na stronie produktu (Visible on the product page) pokazuje się w zakładce „Dodatkowe informacje” bez żadnego kodu. Jak ustawić atrybuty i warianty, opisaliśmy w poradniku jak dodać pierwszy produkt w WooCommerce i ustawić warianty.
• Waga i wymiary do wysyłki — wpisujesz je w zakładce Wysyłka w danych produktu. Zakładka „Dodatkowe informacje” pokazuje się, gdy produkt ma atrybuty, wagę lub wymiary, więc nie musisz ich dublować polem ACF.
• Informacja tylko do pokazania (materiał, czas realizacji, gwarancja, plik do pobrania) — to zadanie dla pola ACF. Tak wynika z porównania obu funkcji: atrybuty służą do filtrowania i wariantów, pole ACF do opisu.
• Pole, które wypełnia klient przy zakupie (grawer, napis, wybór opcji za dopłatą) — to inny temat. Pola w ACF wypełniasz Ty w panelu. Pola dla kupującego daje np. WooCommerce Product Add-Ons.

WooCommerce ma też wbudowane „Własne pola” (Custom Fields), które włączasz w Opcjach ekranu. Przyjmują tylko prosty tekst, a do wyświetlenia ich na stronie i tak potrzebny jest kod. ACF daje gotowe typy pól (plik, lista wyboru, liczba) i wygodny formularz w edycji produktu.

Darmowe ACF czy ACF PRO: co jest potrzebne do pól produktu

ACF ma wersję darmową w katalogu WordPress.org (ponad 30 typów pól) i wersję PRO. Do prostych pól produktu PRO nie jest potrzebne. Różnicę widać dopiero przy polach powtarzalnych, galeriach i blokach edytora.

Prosty przykład z praktyki: sklep z meblami, który przy każdym produkcie podaje materiał, wymiary, czas realizacji i jedną instrukcję montażu w PDF, zrobi to w darmowym ACF. Jeśli przy produkcie ma być kilka plików (instrukcja, deklaracja, karta techniczna) albo lista elementów zestawu o różnej długości, potrzebny jest Repeater, czyli ACF PRO.

Krok 1. Zainstaluj ACF i utwórz grupę pól dla produktów

ACF PRO to samodzielna wtyczka: darmowe ACF nie jest do niej potrzebne, więc nie instaluj obu. Plik wtyczki pobierasz z „Moje konto” w naszym sklepie, a w WordPressie wybierasz kolejno: Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer → wskazujesz pobrany plik → Zainstaluj → Włącz.

Teraz grupa pól, czyli zestaw pól, który pojawi się przy produktach:

1. W menu ACF otwórz grupy pól (Field Groups) i dodaj nową (Add New).
2. Wpisz tytuł grupy, np. „Dane produktu”. Bez tytułu grupy nie zapiszesz.
3. Przejdź do reguł lokalizacji (zakładka Location) i ustaw warunek: typ wpisu (Post Type) jest równy (is equal to) Produkt (Product). Od tej chwili grupa pojawi się w edycji każdego produktu.
4. W ustawieniach grupy (Group Settings) sprawdź, czy przełącznik aktywności grupy (Active) jest włączony. Jest włączony domyślnie, a wyłączenie ukrywa grupę. Możesz też dopisać krótki opis grupy.

Reguły lokalizacji można łączyć warunkami „i” oraz „lub” (and / or), więc grupę da się zawęzić dodatkowymi warunkami, jeśli nie wszystkie produkty jej potrzebują.

Krok 2. Dodaj pola: wymiary, materiał, czas realizacji, plik PDF

Nowa grupa startuje z jednym polem typu tekst (Text). Typ pola zmieniasz w ustawieniu typu pola (Field Type), z listy albo przez przeglądanie typów (Browse Fields). Kolejne pole dodajesz przyciskiem dodawania pola (Add Field), a kolejność pól zmieniasz przeciąganiem.

Przykładowy zestaw dla sklepu z produktami fizycznymi (wszystkie typy są w darmowym ACF):

Przy każdym polu zwróć uwagę na dwie nazwy:

• Etykieta pola (Field Label) to nazwa, którą widzisz w edycji produktu, np. „Czas realizacji”.
• Nazwa pola (Field Name) to nazwa techniczna. ACF tworzy ją sam z etykiety: małe litery, bez spacji, np. czas_realizacji. Zapisz ją, bo użyjesz jej w kreatorze stron albo w kodzie.

Przy polu Plik (File) ustaw:

• Zwracaną wartość (Return Value) na adres pliku (File URL). Do pokazania linku to najprostsza opcja.
• Bibliotekę (Library): pliki wgrane tylko do tego produktu albo cała biblioteka mediów.
• Dozwolone typy plików (Allowed File Types): wpisz pdf. Możesz też ustawić minimalny i maksymalny rozmiar pliku w MB.

Krok 3. Wypełnij pola w edycji produktu

Otwórz Produkty, a w nich edycję produktu (albo dodaj nowy). Grupa „Dane produktu” jest bezpośrednio pod edytorem opisu. Wpisz wartości, wgraj PDF albo wybierz go z biblioteki mediów i kliknij Aktualizuj.

Po zapisaniu na stronie produktu nic się jeszcze nie zmieni. To normalne: ACF tylko zapisuje dane, a sposób ich pokazania ustawisz w kroku 4 lub 5. Puste pole niczego nie wyświetli.

Dużo produktów? Uzupełnij pola z pliku

Wypełnianie pól ręcznie w setkach produktów zajmie sporo czasu. WP All Import Pro z dodatkiem do ACF importuje wartości pól z pliku CSV lub XML do produktów WooCommerce, także pola Repeater i Gallery. W naszej paczce WP All Import Pro jest dodatek do importu pól ACF i dodatek do ich eksportu (ACF Export Pro). Jak przygotować plik i zrobić import krok po kroku, pokazujemy w poradniku o imporcie produktów z hurtowni do WooCommerce.

Krok 4. Pokaż pola na stronie produktu bez kodu

Producent ACF mówi wprost: pola ACF nigdy nie pokazują się same (ACF fields never render on their own). Trzeba wybrać sposób wyświetlenia: kreator stron, bloki w motywie blokowym albo kod w motywie. Najpierw drogi bez kodu.

W Elementorze Pro krok po kroku

Wyświetlanie pól ACF to treści dynamiczne, czyli funkcja dostępna w Elementor Pro. Potrzebujesz też WooCommerce.

1. W menu Elementora otwórz kreator motywu (Theme Builder), wybierz szablon pojedynczego produktu (Single Product) i dodaj nowy (Add New). Nadaj szablonowi nazwę i utwórz go (Create).
2. Zaprojektuj układ strony produktu. Możesz zacząć od pustego szablonu i ułożyć go sam.
3. Dodaj widżet, który obsługuje treści dynamiczne, np. Nagłówek albo Tekst. Kliknij ikonę treści dynamicznych (Dynamic) i wybierz „ACF Field”, a potem pole, np. „Czas realizacji”.
4. W ustawieniach zaawansowanych tej treści (Advanced) dopisz tekst przed wartością, np. „Czas realizacji: ”, i wartość zastępczą (Fallback) na wypadek pustego pola.
5. Plik PDF pokażesz jako przycisk: widżet Przycisk, a w jego linku dynamiczny adres z pola ACF typu Plik.
6. Opublikuj szablon (Publish) i ustaw warunek wyświetlania (Condition), np. wszystkie produkty.

Elementor obsługuje pola tekstowe (tekst, obszar tekstu, liczba, lista wyboru, przyciski opcji, pola wyboru, tak/nie, edytor treści), adresy (m.in. plik, URL, obraz) i obrazy (obraz, galeria). Nie obsługuje pola Repeater.

Inne kreatory: Dynamic Content for Elementor, JetEngine, Divi

• Dynamic Content for Elementor to dodatek do Elementora z osobnymi widżetami do ACF: pojedynczych pól, pola Repeater, galerii, Flexible Content i powiązań (Relationship). Pokaże więc także listę z Repeatera, której sam Elementor nie wyświetli.
• JetEngine z zestawu Crocoblock Jet plugins według dokumentacji producenta ma widżet Dynamic Field, który pobiera wartość z pola ACF. Przy listach wyboru pokazuje zapisaną wartość, a nie etykietę.
• Divi według producenta ACF także wyświetla pola ACF bez kodu.

Dlaczego nie polecamy shortcode’u [acf]

Shortcode [acf field="nazwa_pola"] wklejony w opis produktu może wyglądać na najprostszy sposób bez kodu. Producent ACF podaje jednak trzy powody ostrożności: w nowych instalacjach ten shortcode jest domyślnie wyłączony i włącza się go kodem; działa tylko z prostymi wartościami tekstowymi; każdy, kto może publikować wpisy, odczyta nim dane z pól ACF. Producent zaleca wyłączyć go, gdy nie jest używany. Dlatego go nie polecamy.

Motyw blokowy: pola w blokach edytora (tylko ACF PRO)

Jeśli Twój motyw jest blokowy, szablon „Pojedynczy produkt” (Single Product) edytujesz w Wygląd → Edytor → Szablony. W ACF PRO możesz w blokach Akapit, Nagłówek, Obraz i Przycisk wybrać wartość z pola ACF w panelu bloku. Warunki producenta:

• ACF PRO i WordPress 6.7 lub nowszy;
• włączona funkcja ACF „datastore”, którą uruchamiasz jedną linijką kodu (opis w dokumentacji ACF);
• w ustawieniach pola zaznaczona opcja „Allow Access to Value in Editor UI”.

Tak nie pokażesz pól Repeater, Gallery ani pól wyboru (Checkbox). To droga „prawie bez kodu”, a producent nie opisuje wprost, jak działa w szablonie produktu, dlatego sprawdź efekt najpierw na kopii strony, na kilku produktach. Jeśli nie chcesz tego robić sam, skorzystaj z naszej usługi instalacji i konfiguracji wtyczek.

Krok 5. Albo krótki kod w motywie potomnym

Jeśli nie masz kreatora stron, pola pokażesz kilkoma linijkami kodu. ACF ma funkcję get_field(), która odczytuje wartość pola bieżącego produktu, a WooCommerce ma w szablonie strony produktu miejsce zaraz po cenie.

Zanim zaczniesz:

• Zrób kopię strony.
• Kod wklej w motywie potomnym (plik functions.php) albo we własnej małej wtyczce. Nigdy w motywie nadrzędnym, bo jego aktualizacja nadpisze Twoje zmiany.

Kod poniżej pokazuje pole „Czas realizacji” zaraz po cenie:

add_action( 'woocommerce_single_product_summary', 'pokaz_czas_realizacji', 25 );

function pokaz_czas_realizacji() {
    $czas = get_field( 'czas_realizacji' );

    if ( ! empty( $czas ) ) {
        echo '<p class="czas-realizacji"><strong>Czas realizacji:</strong> ' . esc_html( $czas ) . '</p>';
    }
}

Co robi ten kod:

• woocommerce_single_product_summary z liczbą 25 to miejsce na stronie produktu zaraz po cenie;
• get_field( 'czas_realizacji' ) odczytuje wartość pola. czas_realizacji to nazwa pola (Field Name) z kroku 2. Jeśli Twoje pole nazywa się inaczej, zmień ją w kodzie;
• if ( ! empty( $czas ) ) sprawdza, czy pole jest wypełnione, więc przy pustym polu nic się nie pokaże;
• esc_html() zabezpiecza wartość przed wypisaniem na stronie. Producent ACF zaleca zabezpieczać każdą wartość pola, zanim pokażesz ją na stronie.

Funkcję get_field() opisuje dokumentacja ACF (po angielsku).

Link do pliku PDF pokażesz w ten sam sposób, a producent ACF ma na to przykład w dokumentacji pola Plik. Jeśli parametrów jest dużo, zamiast linijek pod ceną lepiej sprawdzi się osobna zakładka na stronie produktu. To jednak dłuższy kod, którego w tym poradniku nie opisujemy.

Jeśli kiedyś wyłączysz ACF, najpierw usuń ten fragment kodu, a dopiero potem wyłącz wtyczkę. Kod używający funkcji ACF bez włączonej wtyczki może zepsuć stronę.

Pole nie pokazuje się na stronie produktu: najczęstsze przyczyny

1. Nie ustawiłeś sposobu wyświetlenia. Samo wypełnienie pola w produkcie nic nie zmienia na stronie. Potrzebny jest szablon w kreatorze, blok albo kod (kroki 4 i 5).
2. Inna nazwa pola w kodzie lub kreatorze. W kodzie liczy się nazwa pola (Field Name), np. czas_realizacji, a nie etykieta „Czas realizacji”.
3. Pole w tym produkcie jest puste. Kod z kroku 5 celowo nic nie wyświetla, gdy wartości brak. W Elementorze ustaw wartość zastępczą (Fallback).
4. Pole Repeater w Elementorze. Sam Elementor go nie obsługuje. Potrzebny jest widżet z Dynamic Content for Elementor albo kod.
5. Grupa pól jest wyłączona albo ma złą regułę. Sprawdź przełącznik aktywności grupy (Active) i regułę „typ wpisu = Produkt” (Post Type is equal to Product). Jeśli grupy nie ma w edycji produktu, przyczyna jest tutaj.
6. Shortcode [acf] w opisie nie działa. W nowych instalacjach jest domyślnie wyłączony (patrz krok 4).

ACF PRO w WPHocus

ACF PRO przyda się, gdy potrzebujesz pól powtarzalnych (kilka plików, lista „w zestawie”), galerii w polu, sekcji z klocków albo pól w blokach edytora. U nas kosztuje 123 zł. To samodzielna wtyczka, bez darmowego ACF.

• Pliki i aktualizacje masz przez 365 dni w „Moje konto”.
• Paczki aktualizujemy do najnowszych wersji producenta, zwykle raz–dwa razy w tygodniu. Aktualizujesz ręcznie: pobierasz nową wersję i wgrywasz ją, a ustawienia zostają.
• Bez wsparcia autora wtyczki.

Zobacz ACF PRO w sklepie

Wolisz, żeby ktoś ustawił pola i ich wyświetlanie za Ciebie? Pomożemy w ramach usługi instalacji i konfiguracji wtyczek: 250 zł netto (307,50 zł brutto) za godzinę pracy.