ACF i WooCommerce – rozszerz możliwości swoich produktów

Tworząc nowoczesny sklep internetowy oparty na WordPressie, wielu twórców prędzej czy później napotyka ograniczenia domyślnych ustawień WooCommerce. Jednym z częstszych problemów jest zbyt mała liczba dostępnych pól, które można wykorzystać przy tworzeniu produktu.

Chodzi np. o sytuacje, gdy chcemy, by klient miał możliwość wyboru dodatkowej opcji (np. zapakowania produktu na prezent), podania spersonalizowanego tekstu (np. do graweru), albo wybrania kilku powiązanych cech czy wariantów, które niekoniecznie pasują do standardowych atrybutów WooCommerce.

Na szczęście WordPress daje nam tutaj całkiem dużą swobodę. Z pomocą przychodzą niestandardowe pola, które możemy dodawać ręcznie, programistycznie – albo w znacznie prostszy sposób, korzystając z jednej z najpopularniejszych wtyczek: Advanced Custom Fields (ACF). Czym jest Advanced Custom Fields? ACF to potężne, ale przy tym bardzo przyjazne narzędzie, które pozwala na dodawanie różnego rodzaju pól do wpisów, stron, produktów i innych typów treści w WordPressie.

Dzięki ACF możemy te wszystkie elementy wprowadzić bez potrzeby pisania własnych metaboxów czy tworzenia rozbudowanych wtyczek.

Jak dodać własne pola do produktów WooCommerce za pomocą ACF?

Dodanie niestandardowych pól do produktów WooCommerce może wydawać się na początku skomplikowane, ale z pomocą wtyczki Advanced Custom Fields proces ten jest naprawdę intuicyjny. W tej części pokażę krok po kroku, jak zbudować własne pola i wyświetlić je na stronie produktu.

Po instalacji i aktywacji wtyczki w panelu WordPress pojawi się nowa sekcja: Custom Fields.

Wchodzimy w „Custom Fields” i klikamy „Add New”, by stworzyć nową grupę pól. Dla porządku możemy ją nazwać np. Dodatkowe informacje o produkcie.

W sekcji Location Rules wybieramy:

Post Type → is equal to → Product

Dzięki temu grupa pól pojawi się tylko na stronach edycji produktów WooCommerce, a nie np. wpisów blogowych.

Teraz możemy dodawać tyle pól, ile potrzebujemy. Do wyboru mamy m.in.:

• pole tekstowe – np. na krótki opis lub dodatkową etykietę,
• pole liczby – np. do podania liczby sztuk w zestawie,
• true/false (checkbox) – idealne do zaznaczania dodatkowych opcji,
• select – rozwijane menu wyboru,
• pole obrazu lub cała galeria – np. do pokazania alternatywnych wersji produktu,
• pole WYSIWYG – jeśli chcesz dodać więcej sformatowanego tekstu.

Każdemu polu nadajemy nazwę (Field Label) oraz unikalną nazwę systemową (Field Name) – to właśnie tej będziemy później używać w kodzie, żeby wyświetlić wartość pola.

Wyświetlanie niestandardowych informacji o produkcie w WooCommerce

Dodanie własnych pól do produktu to dopiero pierwszy krok. Aby niestandardowe dane były naprawdę użyteczne, trzeba je również prawidłowo wyświetlić w interfejsie sklepu – najlepiej w miejscu, które ma sens zarówno dla użytkownika, jak i pod kątem UX.

W tej części pokażę, jak za pomocą funkcji z ACF, tworzyć shortcody, które możemy używać w trybie wizualnej edycji na przykład w szablonie Divi. Poruszymy również kwestię hooków WooCommerce wyświetlać spersonalizowane informacje o produkcie w jego karcie produktowej.

Pierwszym krokiem jest zlokalizowanie pliku odpowiedzialnego za wyświetlanie pojedynczego produktu. Szukamy: wp-content/themes/twoj-motyw/woocommerce/single-product.php – ale nie możemy edytować tego pliku, należy go skopiować to posiadanego motywu potomnego – a co to jest omawialiśmy już w przeszłości.

WooCommerce korzysta z systemu nadpisywania szablonów, więc odpowiednie skopiowanie plików jest kluczowe, by nie tracić zmian przy aktualizacjach wtyczki.

Tworzenie shortcode

W sytuacji, gdy korzystasz z Divi lub innego buildera (np. Elementor, Bricks, Kadence), często chcesz po prostu wstawić dane z ACF w konkretnym miejscu w układzie strony – bez wchodzenia do kodu PHP.

Tutaj z pomocą przychodzą shortcody, które możemy stworzyć samodzielnie. Przykład prostego shortcode, który zwraca zawartość pola z ACF:

function acf_shortcode_dane( $atts ) {
$atts = shortcode_atts( array(
'pole' => '',
), $atts );
if( empty($atts['pole']) ) return '';
$wartosc = get_field( $atts['pole'] );
return $wartosc ? esc_html($wartosc) : '';
}
add_shortcode( 'acf_pole', 'acf_shortcode_dane' );

Dzięki temu w Divi możesz w dowolnym miejscu użyć:

[acf_pole field=”numer_katalogowy”]

I gotowe – dane pojawią się tam, gdzie je wstawisz. Taki shortcode możesz wrzucić do tekstowego modułu, nagłówka, opisu czy nawet dynamicznego pola.

Hooki WooCommerce

Drugi sposób to wykorzystanie hooków WooCommerce, by dane z ACF pojawiały się automatycznie w ustalonym miejscu karty produktowej – bez konieczności ręcznego wstawiania czegokolwiek.

Najczęściej używanym hookiem jest:
woocommerce_single_product_summary

Przykład:

add_action( 'woocommerce_single_product_summary', 'pokaz_informacje_dodatkowe', 25 );
function pokaz_informacje_dodatkowe() {
    $info = get_field('numer_katalogowy');
    if( $info ) {
        echo '

‘;    } }

Tutaj ponownie – 25 oznacza kolejność wyświetlania (im niższa liczba, tym wyżej zostanie wstrzyknięty kod). Ten sposób świetnie się sprawdza, jeśli chcesz, żeby dane z ACF zawsze pojawiały się w tym samym miejscu, bez ręcznej ingerencji.

Filtrowanie z wykorzystaniem wtyczki Filter Everything

Tworzenie własnych systemów filtrowania daje dużo kontroli, ale nie zawsze jest najlepszym rozwiązaniem – szczególnie w sklepach, gdzie liczy się czas wdrożenia, stabilność i kompatybilność z edytorami wizualnymi (np. Divi, Elementor, itp.). W takich przypadkach warto sięgnąć po dedykowane narzędzia, a jednym z najciekawszych jest właśnie:

Jak skonfigurować filtrowanie z Filter Everything?

• Zainstaluj i aktywuj wtyczkę (dostępna w wersji darmowej i PRO).
• Przejdź do Filters > Add New Filter Set.
• Wybierz typ postów: Product (dla WooCommerce).
• Dodaj filtry, wybierając z listy dostępne pola – znajdziesz tam również niestandardowe pola ACF, np. event_date, typ_materiału, kolor, itp.
• Ustaw sposób wyświetlania filtrów – checkboxy, rozwijane listy, przyciski, zakres dat itd.
• Umieść filtr w odpowiednim miejscu na stronie – jako widget, blok Gutenberg, shortcode, albo element Divi.

Przykład użycia shortcode w szablonie Divi: [fe_widget]

Podsumowanie

Jak widzisz, WooCommerce w połączeniu z ACF daje naprawdę ogromne możliwości rozbudowy standardowej funkcjonalności sklepu. Dzięki niestandardowym polom możemy dodać do produktów wszystko, czego tylko potrzebujemy – od dodatkowych opcji wyboru, przez personalizację, aż po specjalistyczne informacje techniczne.

Dzięki takiemu podejściu możemy stworzyć sklep, który nie tylko wygląda nowocześnie, ale przede wszystkim działa dokładnie tak, jak oczekują tego nasi klienci – oferując im realnie użyteczne funkcje, których próżno szukać w standardowej instalacji WooCommerce.

Jeżeli macie jeszcze inne pytania odnośnie tworzenia stron internetowych, administracji stron internetowych lub pozycjonowaniem stron to również śmiało pytajcie.