Jak korzystać z dostępnych w WooCommerce polów do personalizowania procesu płatności: pełny przewodnik od ich tworzenia do weryfikacji

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

Standardowy proces płatności w WooCommerce zbiera podstawowe i ogólne informacje, takie jak imię, adres, numer telefonu i adres e-mail. Jeśli Twoja firma ma specjalne wymagania, tego rodzaju danych może okazać się zbyt niewystarczających. Dzięki dodaniu polów dostosowanych możesz zaoferować klientom bardziej wygodne i dokładniejsze doświadczenie zakupowe.

Na przykład sklep sprzedający ciągle przygotowywane torty może potrzebować, by klienci podali życzenia umieszczone na tortach lub wskazali, czy chcą, by na nich były świeczki; biznes typu B2B może wymagać rejestracji numerów podatkowych klientów lub numerów zamówień; natomiast sklep sprzedający bilety na imprezy może potrzebować zbierać informacje o tożsamości uczestników w celach weryfikacji. Pola dostosowwalne umożliwiają gromadzenie kluczowych danych poza standardowymi procedurami, które mogą być wykorzystane do obsługi zamówień, grupowania klientów, personalizowanego marketingu oraz zapewnienia zgodności z obowiązującymi przepisami prawnymi.

Z punktu widzenia technicznego strona dokonania płatności w systemie WooCommerce jest formularzem składającym się z serii standardowych poli, a jej struktura jest definiowana za pomocą “haków działań” (Action Hooks) i „haków filtrów” (Filter Hooks). To oznacza, że za pomocą pluginów lub plików z funkcjami w tematach (themes) możemy „włączyć” się do procesu dokonania płatności, by dodawać, usuwać lub modyfikować pola. Zrozumienie tego kluczowego mechanizmu stanowi podstawę dla realizacji dowolnych dostosowań.

Polecamy lekturę. Pełny przewodnik po tworzeniu stron internetowych handlowych na platformie WooCommerce: od ich uruchomienia po implementację zaawansowanych funkcji。

Trzy sposoby na stworzenie własnych pola do płatności:

WooCommerce oferuje elastyczne możliwości dodawania własnych poli, więc możesz wybrać najbardziej odpowiednią metodę według swojego poziomu zaawansowania technicznego i potrzeb.

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

Używanie wtyczek do szybkiego dodawania elementów bez pisania kodu

Dla administratorów stron internetowych, którzy nie znają się na programowaniu, lub dla projektów, które wymagają szybkiego uruchomienia, najwygodniejszym rozwiązaniem jest używanie specjalnych pluginów. Na rynku dostępne są doskonałe narzędzia takie jak “Checkout Field Editor for WooCommerce” lub “WooCommerce Checkout Manager”.

Te dodatki zwykle oferują intuicyjny interfejs w tle, który umożliwia dodawanie nowych pola poprzez klikanie i wybieranie. Można określić typ pola (np. pola tekstowe, menu rozwijane, pola wyboru, przyciski typu „Tak”/„Nie”), opisy, teksty zawierające znaki zastępcze, a także ustalić, czy pole jest obowiązkowe, oraz jego położenie na stronie zamówienia (w sekcji rachunku lub informacji o dostawie). Aby korzystać z funkcji dodatków, nie trzeba pisania żadnego kodu, co znacząco zmniejsza poziom trudności technicznych i sprawia, że są przydatne dla większości standardowych potrzeb. Jednak należy pamiętać, że dodatki mogą zwiększyć obciążenie witryny, a w przypadku bardzo złożonej logiki dostosowawczej mogą okazać się niewystarczająco elastyczne.

Dodanie pola dostosowanego za pomocą kodu

To najpotężniejszy i najzgodniejszy z wymaganiami sposób – poprzez edycję tematów… functions.php Można tworzyć pliki lub własne dodatki (pluginy) aby to zrealizować. Kluczowym elementem jest tu używanie odpowiednich technologii lub narzędzi. woocommerce_checkout_fields Filtrowe hooki.

Ten “hook” umożliwia modyfikację arrayu poli stosowanych przy dokonaniu płatności. Na przykład, jeśli chcesz dodać pole do wpisywania nazwy firmy w sekcji „Informacje o rachunku”, możesz napisać następujący kod:

Polecamy lekturę. Jak dodać pola dostosowane oraz metadane na stronach produktów w WooCommerce?。

add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_field' );
function custom_add_checkout_field( $fields ) {
    $fields['billing']['billing_company_custom'] = array(
        'label'       => __('公司名称（自定义）', 'woocommerce'),
        'placeholder' => _x('请输入您的完整公司名', 'placeholder', 'woocommerce'),
        'required'    => true,
        'class'       => array('form-row-wide'),
        'clear'       => true,
        'priority'    => 25, // 控制显示顺序，数字越小越靠前
    );
    return $fields;
}

Ten kod dodaje pola tekstowe, które są obowiązkowe do wypełnienia, do sekcji obejmującej informacje o rachunkach. Kluczowym elementem jest nazwa klucza w polu arrayu, np. „billingFieldName”. billing_company_custom…) oraz zbiór poli, w którym się znajdują (…)['billing'] 或 ['shipping']、['order']）。

Używanie funkcji logiki warunkowej w WooCommerce

Czasami chcesz, aby dane w jakimś polu były wyświetlone tylko pod określonymi warunkami. Na przykład, pola z wiadomością do kartki podarunkowej miało by być widoczne tylko wtedy, gdy klient wybrał usługę “Opakowanie prezentu”. To można zrealizować za pomocą JavaScriptu lub pluginów obsługujących logikę warunkową.

Aby zrealizować coś w formie czystego kodu, zwykle potrzebny jest pomoc innych elementów lub narzędzi. woocommerce_after_checkout_billing_form 或 woocommerce_after_checkout_shipping_form Można użyć „haków” (ang. hooks) do wygenerowania struktury HTML dla poszczególnych pola, a także napisać skrypty w języku jQuery, które będą monitorować zmiany w innych polach (np. w polach wyborowych), aby kontrolować wyświetlanie lub ukrywanie celowego pola. Ten sposób jednak wymaga odpowiednich umiejętności programowania w JavaScript. Prostszym rozwiązaniem jest korzystanie z zaawansowanych pluginów do zarządzania polami, które oferują możliwość ustawiania logicznych warunków wizualnych.

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

Weryfikuj i zapisz dane z pola dostosowanego.

Nie wystarczy tylko wyświetlić pola na stronie – kluczowymi krokami są sprawdzenie poprawności danych oraz ich bezpieczne zapisanie do bazy danych.

Weryfikacja danych na stronie klienta (front end) i na serwerze (back end)

Aby zapobiec wysyłaniu nieuprawomocnionych lub złośliwych danych, konieczna jest weryfikacja na stronie serwera (na backendzie). To jest realizowane poprzez… woocommerce_checkout_process Zrealizowano to za pomocą aktywnych hooków (ang. action hooks).

Continuując z poprzednim przykładem, jeśli dodamy… billing_company_custom To pola obowiązkowe, dlatego musimy upewnić się, że klienci nie pozostawili ich puste.

Polecamy lekturę. Praktyczne programowanie w WooCommerce: budowanie profesjonalnych stron e-handlu od zera。

add_action('woocommerce_checkout_process', 'custom_validate_checkout_field');
function custom_validate_checkout_field() {
    if ( isset($_POST['billing_company_custom']) && empty($_POST['billing_company_custom']) ) {
        wc_add_notice( __( '请填写“公司名称（自定义）”。', 'woocommerce' ), 'error' );
    }
}

wc_add_notice() Funkcja wyświetla informację o błędzie na górnym polu strony dokonania płatności, co blokuje wysłanie zamówienia, dopóki użytkownik nie poprawi błędu. Można w niej zaimplementować bardziej złożoną logikę sprawdzania, np. sprawdzanie formatu adresu e-mail, przedziałów liczbowych lub odpowiadania wzorców regularnych.

Zapisz dane z pola do zamówienia.

Po zweryfikacji konieczne jest zapisanie wartości pola dostosowanego do metadanych zamówienia (Order Meta), aby można je później oglądać w backendzie oraz w wiadomościach e-mail. Do tego potrzebny jest odpowiedni kod. woocommerce_checkout_update_order_meta Aktywny hook.

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

add_action('woocommerce_checkout_update_order_meta', 'custom_save_checkout_field');
function custom_save_checkout_field( $order_id ) {
    if ( ! empty($_POST['billing_company_custom']) ) {
        update_post_meta( $order_id, '_billing_company_custom', sanitize_text_field($_POST['billing_company_custom']) );
    }
}

update_post_meta() Funkcja zapisuje przygotowane wartości pola w formie par klucza-wartości. wp_postmeta W tabeli nazwy kluczy zwykle zaczynają się od kreski podkreslającej (np. _billing_company_customTo umożliwia uważanie tego za “skryte” metadane w niektórych interfejsach typu backend.

Wyświetlanie danych z pola na stronie klienta (frontend) i na serwerze (backend).

Po zapisaniu danych należy upewnić się, że będą dostępne i można je edytować w kilku kluczowych miejscach.

Wyświetlić w szczegółach zamówienia oraz w e-maile.

Aby informacje zostały widoczne zarówno dla właściciela sklepu, jak i dla klientów, musimy je wyświetlić na stronie szczegółów zamówienia w panelu administracyjnym, a także umieścić w wiadomości e-mail wysłanych do klientów i administratorów.

Aby zmienić szczegóły zamówienia w panelu administracyjnym, można użyć odpowiednich funkcji dostępnych w tym panelu. woocommerce_admin_order_data_after_billing_address Haki:

add_action('woocommerce_admin_order_data_after_billing_address', 'custom_display_field_in_admin', 10, 1);
function custom_display_field_in_admin($order){
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<p><strong>'.__('自定义公司名').':</strong> '.$company_custom.'</p>';
    }
}

Podobnie, używając… woocommerce_email_order_meta_fields Filtry mogą umożliwić dodanie tego pola do treści e-maila z zamówieniem.

Wyświetlić w widoku zamówień w “Moim koncie”.

Klienti, patrząc na szczegóły swoich wcześniejszych zamówień na swojej stronie konta, powinni też móc zobaczyć informacje, które wtedy wpisali. To jest realizowane poprzez… woocommerce_order_details_after_order_table Implementacja aktywnych hooków (action hooks):

add_action('woocommerce_order_details_after_order_table', 'custom_display_field_in_order_view', 10, 1);
function custom_display_field_in_order_view( $order ) {
    $company_custom = get_post_meta( $order->get_id(), '_billing_company_custom', true );
    if ( $company_custom ) {
        echo '<h2>'.__('额外信息').'</h2>'echo '<table class="woocommerce-table shop_table extra_info"><tbody>'echo '<tr><th>'.__('自定义公司名').':</th><td>'.$company_custom.'</td></tr>'echo '</tbody></table>';
    }
}

Podsumowanie.

Dodanie pola dostosowanego do procesu płatności w WooCommerce to proces obejmujący analizę wymagań, implementację kodu oraz zarządzanie danymi. Kluczowym elementem jest zrozumienie i skuteczne wykorzystanie systemu „hooków” w tym frameworku. woocommerce_checkout_fields Dodawanie pola do filtra, wykorzystanie tego pola w procesie filtrowania. woocommerce_checkout_process Akcja została zweryfikowana i przyjęta. woocommerce_checkout_update_order_meta Dane są zapisywane w wyniku wykonywanych działań, a potem są prezentowane w tle systemu, w wiadomościach e-mail oraz na ekranie użytkownika za pomocą różnych narzędzi do wyświetlania informacji. Początkujący mogą zacząć od używania zaufanych dodatków (plug-inów), natomiast programiści, którzy szukają możliwości większej personalizacji i lepszej wydajności, najskuteczniejszym sposobem będzie napisanie własnego kodu. W obu przypadkach kluczowymi elementami są jasno zaprojektowany przepływ danych oraz dokładna weryfikacja wszystkich informacji, co gwarantuje stabilność funkcji i poprawę doświadczenia użytkownika.

FAQ – najczęściej zadawane pytania.

Dlaczego dodane pola dostosowane nie są wyświetlone na stronie dokonania płatności?

Proszę sprawdzić problem według następujących kroków: Najpierw upewnij się, że twój kod został poprawnie włączony do tematu. functions.php W pliku lub w ustawionym dodatku nie znajdują się żadne błędy gramatyczne. Następnie sprawdź, czy klucze w polu array są poprawnie włożone (zawansowane struktury hierarchiczne). $fields['billing']、$fields['shipping'] 或 $fields['order'] 之中。然后，查看浏览器控制台是否有 JavaScript 错误，这可能与字段的 class 或优先级设置冲突。最后，清空网站和浏览器的缓存后再次尝试。

Jak ustawić pola dostosowane jako opcjonalne lub obowiązkowe?

Gdy dodajesz pola za pomocą kodu, możesz ustawić je w arrykumie pol. 'required' => true 或 'required' => falseJeśli pole jest już obowiązkowe, a chcesz, aby stało się opcjonalne, wystarczy to zmienić w odpowiednich ustawieniach. woocommerce_checkout_fields W funkcji filtru ten polu jest uwzględniany (tj. wykorzystywany do realizacji wymaganych operacji). required Aby zmienić parametr na „false”, wystarczy to zrobić. Pamiętaj, że po tej zmianie konieczne jest również odpowiednie dostosowanie lub usunięcie innych elementów, które mogą być zależne od tego parametru. woocommerce_checkout_process W tym przypadku mowa o logice sprawdzania (validacji) zawartej w kodzie.

W jakim miejscu w bazie danych są przechowywane dane z pola dostosowanego (custom field)?

Wartości pola dostosowanego są przede wszystkim przechowywane w bazie danych WordPress. wp_postmeta W tabelach bazy danych (przeciwki tabel mogą się różnić) każdy rekord jest identyfikowany za pomocą unikalnego identyfikatora. post_id(Wiązane z ID zamówienia) i wp_posts Rejestracje zamówień w tabeli są powiązane ze sobą poprzez… meta_key(Tj. nazwa klawisza, którą użyłeś przy zapisywaniu, np.) _billing_company_custom) do oznaczenia.meta_value Wtedy jest przechowywana faktyczna wartość pola. Możesz to zrobić za pomocą narzędzi do zarządzania bazą danych lub w przypadku WordPressa za pomocą wewnętrznych funkcji platformy. get_post_meta() Funkcja sprawdza te dane.

Czy można wyświetlać różne pola dostosowane (custom fields) w zależności od produktu?

Można to zrobić, ale wymaga to bardziej złożonej logiki. Jednym z popularnych sposobów jest następny: najpierw dodaj do produktu własną klasę lub metapole, aby oznaczyć jego typ. Następnie na stronie dokonania płatności użyj tych informacji do odpowiedniego sortowania produktów. woocommerce_after_checkout_form Wygeneruj HTML zawierający wszystkie możliwe pola dostosowane według potrzeb, ale przy ustawieniu domyślnym CSS te pola powinny być ukryte. Następnie napisz skrypt w JavaScript, który będzie monitorować zmiany w zawartości koszyka zakupów lub wybór określonych produktów, a następnie dynamicznie wyświetlać lub ukrywać odpowiednie grupy pola w zależności od typu produktów znajdujących się w koszyku. Podczas weryfikacji i zapisu danych na stronie serwera również konieczne jest warunkowe obsługiwanie tych danych w zależności od typu produktów.