Kompletny przewodnik po niestandardowych polach płatności w WooCommerce: od podstaw do praktycznego zastosowania.

Czemu potrzebne są pola do samodzielnego dokonania płatności?

Standardowa strona płatności w WooCommerce zawiera pola podstawowe, takie jak imię, adres i adres e-mail, ale w wielu specyficznych scenariach biznesowych tych informacji jest zbyt mało. Na przykład sklep sprzedający ciastka na zamówienie może potrzebować informacji o życzeniach umieszczonech na ciastku, witryna handlu hurtowego typu B2B może wymagać numeru ubezpieczenia firmy, a witryna sprzedająca bilety na wydarzenia może potrzebować numerów identyfikacyjnych uczestników do weryfikacji. W takich przypadkach programiści muszą rozszerzyć funkcjonalność aplikacji poprzez dodanie własnych pola płatności, aby zrealizować wymagania dotyczące zbierania specyficznych danych biznesowych.

Pola dostosowane nie tylko poprawiają doświadczenie użytkownika i sprawiają, że proces dokonania płatności lepiej odpowiada specyfice biznesu, ale także dostarczają kluczowych danych do dalszego zarządzania klientami, obsługi zamówień oraz realizacji kampanii marketingowych. Poprzez poprawne wyświetlanie tych pola na stronie serwera i w wiadomościach e-mail można zapewnić integralność informacji w całym procesie zamówienia.

Detaljowe wyjaśnienie kluczowych metod i „hooków”

WooCommerce oferuje potężny i elastyczny system hooków, który umożliwia dokładną personalizację strony dokonania płatności bez konieczności modyfikacji kodu źródłowego. Aby implementować własne pola, należy wykonać trzy podstawowe kroki: dodanie pola, sprawdzenie jego zawartości oraz zapisanie i wyświetlenie danych z tego pola. Każdy z tych kroków odpowiada określonemu hookowi akcji lub hookowi filtru w frameworku WooCommerce.

Filtry używane do dodawania pola

Dodawanie pola odbywa się głównie poprzez… woocommerce_checkout_fields Można to zrealizować za pomocą filtrów. Dzięki tym filtrom możemy dodawać nowe pola wpisywania, rozwijane menu lub pola wyboru do różnych części formularza do płatności – np. do sekcji “Rachunek”, “Dostawa” lub do dowolnej kustomizowanej sekcji “Dodatkowe informacje o zamówieniu”.

Programiści muszą napisać funkcję typu „callback”, która przyjmuje dostępny array poli, zmienia je i po powrocie zwraca nowy array. Wewnątrz tej funkcji można dokładnie określić typ każdego nowego pola, jego nazwę, tekst do wpisania („placeholder”), wymóg obowiązkowego wypełnienia, priorytet (wykorzystywany do sortowania) oraz inne atrybuty, np. klasy CSS.

UltaHost – hostingu dla stron WordPress

Gwarancja zwrotu pieniędzy w ciągu 30 dni, nieograniczony przepustowość sieci i dostęp do bazy danych, bezpłatna ochrona przed atakami typu DDoS. Promocja: 50% przy zakupie na 3 lata.

strona dostępu

Hooky element używany do weryfikacji pola

Gdy użytkownik wysyła formularz do opłacenia, musimy upewnić się, że dane w polach dostosowanych do potrzeb użytkownika spełniają wymagania. W tym przypadku konieczne jest użycie odpowiednich procedur kontroli. woocommerce_checkout_process Aktywny „hook” (zawieszka). W funkcji powrotnej tego „hooka” możemy uzyskać dostęp do informacji przesłanych poprzez… $_POST Dane przesłane za pomocą globalnych zmienn są sprawdzane pod kątem poprawności.

Na przykład można sprawdzić, czy jakieś pola obowiązkowe są puste, lub czy numer telefonu ma poprawny format. Jeśli sprawdzenie nie powiedzie się, można wtedy użyć odpowiednich procedur korekcyjnych. wc_add_notice() Funkcja wyświetla użytkownikowi informację o błędzie, która blokuje dalszy przepływ procedury dokonania płatności.

Hooky elementy służą do zapisywania i wyświetlania danych.

Po złożeniu zamówienia przez użytkownika dane z pola dostosowanego muszą zostać bezpiecznie zapisane do metadanych zamówienia. To jest realizowane poprzez… woocommerce_checkout_update_order_meta Aby to zrealizować, należy skorzystać z „hooków akcji” (action hooks). W funkcji wywołanej w ramach tego hooka można użyć odpowiednich instrukcji lub kodu. update_post_meta() Funkcja umożliwia zapisanie wartości formularza, które przeszły sprawdzenie, do odpowiedniego zamówienia. wp_postmeta W tabeli bazy danych.

Po zapisaniu danych często konieczne jest ich wyświetlenie w trzech miejscach: na stronie szczegółów zamówienia w panelu administracyjnym, w wiadomości potwierdzającej zamówienie wysłanej do użytkownika oraz w witrynie konta klienta. To wymaga dostosowania interfejsu administracyjnego, szablonów wiadomości e-mail oraz witryn kont użytkowników.

Praktyka: Dodanie pola “Wiadomość do prezentu”

Poniżej pokazujemy, w jaki sposób można dodać pola tekstowe do wpisów od klientów jako “wiadomości do prezentu” dla internetowego sklepu z kwiatami. To pole będzie znajdować się w obszarze informacji o zamówieniu; jest to pole opcjonalne, a jego zawartość zostanie zapisana i wyświetlona w tle systemu, a także w wysłanej do klienta wiadomości e-mail.

Krok pierwszy: Dodaj pola na stronę dokonania płatności.

Najpierw musimy użyć… woocommerce_checkout_fields Aby zarejestrować to nowe pole, należy użyć filtrów. Dodamy je po polu “Uwagi do zamówienia”. Poniżej znajduje się kod, który należy włączyć do odpowiedniej części kodu źródłowego. functions.php Dodaje się do pliku lub za pomocą wtyczek z dowolnymi funkcjami.

add_filter( 'woocommerce_checkout_fields', 'add_custom_checkout_field' );
function add_custom_checkout_field( $fields ) {
    $fields['order']['gift_message'] = array(
        'type'        => 'textarea',
        'class'       => array('form-row-wide'),
        'label'       => __('礼品祝福留言', 'your-text-domain'),
        'placeholder' => __('请输入您想写在贺卡上的祝福语（可选）', 'your-text-domain'),
        'required'    => false,
        'priority'    => 25, // 显示在订单备注（priority 21）之后
    );
    return $fields;
}

Ten kod tworzy… textarea Pola tego typu mają etykietę “Podarunkowy tekst życzeń” oraz włączone odpowiednie placeholdery i klasy CSS.priority Parametry kontrolują lokalizację ich wyświetlania.

Krok drugi: Zapisanie danych z pola do zamówienia

Następnie musimy zachować wiadomości, które użytkownik wpisuje podczas tworzenia zamówienia. Do tego użyjemy… woocommerce_checkout_update_order_meta Zrealizowanie tego można za pomocą „haków” (ang. hooks).

hosting.com Hosting współdzielony

Wysoka wydajność dzięki procesorom AMD EPYC, pamięci masowej NVMe SSD i LiteSpeed, wewnętrzne wsparcie ekspertów 24/7, zaawansowane środki bezpieczeństwa, w tym SSL, brute force, ochrona przed złośliwym oprogramowaniem i DDoS, oszczędność do 73%

strona dostępu

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );
function save_custom_checkout_field( $order_id ) {
    if ( ! empty( $_POST['gift_message'] ) ) {
        update_post_meta( $order_id, '_gift_message', sanitize_textarea_field( $_POST['gift_message'] ) );
    }
}

Tu sprawdzamy… $_POST['gift_message'] Czy istnieje jakiś wartość? Jeśli tak, to ją użyj. sanitize_textarea_field() Po bezpiecznym usunięciu niepotrzebnych elementów, funkcja może dalej wykonywać swoje zadania. update_post_meta() Zbierz to jako metadane zamówienia, a nazwą klucza metadanych będzie… _gift_message。

Krok trzeci: Wyświetlanie danych w tle aplikacji oraz w wiadomościach e-mail.

Po zapisaniu danych musimy je udostępnić do widzenia. Poniższy kod pokazuje, jak wyświetlić to pole na stronie szczegółów zamówienia w administracji oraz w wiadomościach wysłanych do klienta.

// 在管理员订单详情页显示
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_field_admin' );
function display_custom_field_admin( $order ) {
    $gift_message = get_post_meta( $order->get_id(), '_gift_message', true );
    if ( $gift_message ) {
        echo '<p><strong>' . __( '礼品留言:', 'your-text-domain' ) . '</strong><br />'`. esc_html($gift_message).`'</p>';
    }
}

// 在订单确认邮件中显示
add_filter( 'woocommerce_email_order_meta_fields', 'display_custom_field_in_email', 10, 3 );
function display_custom_field_in_email( $fields, $sent_to_admin, $order ) {
    $gift_message = get_post_meta( $order-&gt;get_id(), '_gift_message', true );
    if ( $gift_message ) {
        $fields['gift_message'] = array(
            'label' =&gt; __( '礼品留言', 'your-text-domain' ),
            'value' =&gt; wptexturize( $gift_message ),
        );
    }
    return $fields;
}

Pierwsza funkcja wyświetla komentarze pod adresem faktury zamówienia w tle (w obszarze nie widzialnym przez użytkownika). Druga funkcja dodaje komentarze jako nową linię danych do wiadomości potwierdzającej zamówienie wysłanej przez platformę WooCommerce.

Wysokiej jakości techniki i zasady bezpieczeństwa

Po opanowaniu podstawowych metod możemy eksplorować bardziej złożone scenarii aplikacyjne oraz metody ich optymalizacji, aby ulepszyć funkcjonalność i używalność polów dostosowanych przez użytkownika.

Utworzenie warunków do wyświetlania pola

Czasami to, czy dane z jednego pola będą wyświetlone, zależy od wartości z innego pola. Na przykład, pola “Nasze dane” będzie wyświetlone tylko wtedy, gdy użytkownik wybierze opcję “Konieczna jest faktura”. Aby to umożliwić, potrzebny jest JavaScript do realizacji interakcji na stronie użytkownika. Możemy dodać do pola, które uruchamia tę akcję (np. pola wyboru), odpowiednie elementy interfejsu, aby kontrolować zachowanie aplikacji. change Event listener, który pozwala dynamicznie kontrolować wyświetlanie lub ukrywanie celowego pola. Podobne działanie należy uwzględnić również w logice sprawdzania na stronie serwera.

Bezpieczeństwo i czyszczenie danych w polach

Bезpieczeństwo jest niezbyt ważne. Podczas obsługi wprowadzanych przez użytkowników danych konieczne jest zawsze ich sprawdzanie i czyszczenie. W przypadku tekstowych polów należy używać odpowiednich metod bezpieczeństwa, aby zapobiec atakom zewnętrznych zagrożzeń. sanitize_text_field() 或 sanitize_textarea_field()Jeśli chodzi o adres e-mail, należy użyć… sanitize_email()Przed wysyłaniem danych na frontend konieczne jest użycie odpowiednich procedur i formatów, aby zapewnić poprawne wyświetlenie i interpretację informacji przez użytkownika. esc_html() 或 wp_kses_post() Funkcje takie jak escape są używane do zapobiegania atakom typu XSS (Cross-Site Scripting).

Hosting współdzielony InterServer

Hosting współdzielony $2.50 USD miesięcznie, pierwszy miesiąc $0.1 USD kod promocyjny tryinterserver, 461 skryptów aplikacji w chmurze, instalacja jednym kliknięciem.

strona dostępu

Kompatybilność z dodatkowymi modułami (plug-inami) i tematami (tematykami) dostarczonymi przez third parties

Podczas dodawania pola dostosowanych może dojść do konfliktów z wyglądem lub skryptami niektórych tematów lub innych dodatków (zwłaszcza tych usprawiających proces płatności). Zaleca się robić wszystkie zmiany w podtematach i przypisywać elementom, które zawierają te pola, unikalne nazwy klas CSS. Przed oficjalnym wdrożeniem konieczne jest sprawdzenie funkcjonalności w różnych scenariach, w tym z różnymi tematami oraz z włączonymi najpopularniejszymi dodatkami. Korzystanie z narzędzi deweloperskich w przeglądaczach do sprawdzania błędów w elementach i skryptach jest istotnym sposobem na wykrycie problemów z kompatybilnością.

Podsumowanie.

Poprzez poradę zawartą w tym tekście rozpoczęliśmy od zrozumienia wymagań klientów i stopniowo przeszliśmy do procesu tworzenia własnych poli płatności w systemie WooCommerce. Nauczyliśmy się, jak wykorzystać dostępne funkcje i narzędzia, aby dostosować interfejs płatności do potrzeb naszych klientów. woocommerce_checkout_fields、woocommerce_checkout_process 和 woocommerce_checkout_update_order_meta Te trzy kluczowe elementy umożliwiają dodawanie, sprawdzanie oraz zapisywanie pola. Przykład z praktycznego przypadku “wiadomości od darczyńcy” pokazuje w pełni cały proces od tworzenia pola do wyświetlania danych. Na koniec rozpatrzono zaawansowane tematy, takie jak pola warunkowe, bezpieczne obsługiwanie danych oraz kompatybilność systemów.

Opanowanie tych umiejętności pozwoli ci elastycznie radzić sobie z specyficznymi wymaganiami dotyczącymi zbierania danych w różnych biznesach e-commerce, a także stworzyć bardziej profesjonalny i personalizowany sklep na platformie WooCommerce. To przyczyni się do zwiększenia konwersji i zadowolenia klientów.

FAQ – najczęściej zadawane pytania.

Gdzie są przechowywane dane z pola dostosowanego?

Dane z pola dostosowanego zwykle są przechowywane w bazie danych WordPress jako “metadane zamówienia”. wp_postmeta W tabeli. Każdy rekord zawiera odpowiedni ID zamówienia.post_idMetaklucze, które sam określiłeś (np. _gift_messageMożna uzyskać informacje o elementach zamówienia oraz ich metadanych za pomocą metod dostępnych w obiekcie zamówienia w WooCommerce. $order->get_meta(‘_gift_message’) lub funkcje WordPress get_post_meta() Aby uzyskać te dane.

Jak dodawać weryfikację na stronie klienta (np. weryfikację formatu) do własnych poli?

Oprócz tego… woocommerce_checkout_process Poza weryfikacją na stronie serwera za pomocą „hooków”, możesz też dodać do pola atrytywy pochodzące z standardu HTML5, aby wykonać podstawowe kontrole. Na przykład: pattern Wykorzystywane w regularnych wyrażeniach.type=”email” Znaczek ten jest używany do formatowania adresów e-mail. Aby uzyskać bardziej złożoną funkcję weryfikacji w czasie rzeczywistym, konieczne jest napisanie kodu w JavaScript/jQuery, który będzie monitorować zmiany w wartościach pol. blur 或 input Wydarzenie: sprawdza, czy wartość odpowiada określonym zasadom, i natychmiast podaje informację o wyniku sprawdzenia.

Czy można dodać pola dostosowane (custom fields) na stronie rejestracji użytkowników?

Możliwe, ale procedura jest nieco inna. Hooki dotyczące poli płatności w WooCommerce są przeznaczone wyłącznie dla strony dokonania płatności. Jeśli chcesz dodać pola na stronie rejestracji w “Moim koncie”, musisz użyć innych hooków dostępnych w WordPress i WooCommerce. woocommerce_register_form Dodajmy pola.woocommerce_created_customer Można użyć tej funkcji do zapisu danych z pola w metadanych użytkownika. Zasada działania jest podobna do przypadku pola stosowanego podczas procesu płatności, ale różni się celem (zapisem w metadanych użytkownika) oraz miejscem przechowywania danych.

Dlaczego moje ustawione pola nie są wyświetlone?

Najpierw sprawdź, czy twój kod został poprawnie dodany. functions.php Nie ma żadnych błędów gramatycznych. Następnie sprawdź, czy klucze w polu array są poprawne – na przykład, czy zostały prawidłowo dodane. $fields[‘order’] Albo $fields[‘billing’] Część problemów może wynikać z tego, że kod innych wtyczek lub tematów może zakrywać lub usuwać twoje pola. Ponownie sprawdź, czy nie doszło do takiego zdarzenia. Na koniec spróbuj usunąć cache z witryny i przeglądarki – stare pliki CSS/JS mogą wpływać na prawidłowe wyświetlenie treści.