Szczegółowa analiza niestandardowych pól płatności w WooCommerce: od ich tworzenia po przetwarzanie danych — kompletny przewodnik.

Podczas budowy sklepu online doświadczenie klienta podczas procesu płatności ma kluczowe znaczenie. Standardowe formularze do płatności w WooCommerce mogą nie spełniać wszystkich wymagań biznesowych – na przykład nie umożliwiają zbierania informacji o adresie faktury, życzeń urodzinowych czy specjalnych wymagań dotyczących dostawy. W takich przypadkach dostosowane pola do płatności stają się potężnym narzędziem rozszerzającym funkcjonalność platformy. Dzięki nim można nie tylko zwiększyć personalizację doświadczenia klienta, ale także uzyskać istotne dane biznesowe, które pomogą w poprawieniu usług i strategii marketingowych.

Za pomocą systemu hooków w WordPress oraz bogatej API dostępnej w WooCommerce programiści mogą względnie łatwo dodawać różne typy poli – pola tekstowe, listy rozwijane, pola wyboru, pola zaznaczania itd. – w dowolnych miejscach na stronie dokonania płatności (po obszarach “Adresa faktury” i “Adresa dostawy” lub nawet w nowych blokach). Proces ten nie ogranicza się wyłącznie do wyglądu strony frontend; równie istotna jest obroba danych na stronie backend: należy zapewnić, że wprowadzone przez użytkownika informacje są poprawnie i bezpiecznie zapisywane do zamówienia, a potem wyświetlone w interfejsie administracyjnym, na stronie konta użytkownika oraz w wiadomościach o zamówieniu.

Metody implementacji pola do samodzielnego dokonania płatności

WooCommerce oferuje dwa główne typy hooków do obsługi pola płatności:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaPierwszy element służy do definiowania i renderowania pola, drugi do zapisywania danych w tym polu.

Polecamy lekturę. Rozwój pluginów dla WordPress – od początków do mistrzostwa: pokazujemy ci, jak stworzyć własną, unikalną funkcję.。

Użyj haczyków do dodawania pola.

Najważniejszy krok to… woocommerce_checkout_fields Filtry hooki umożliwiają dodawanie własnych poli do arrayu poli stosowanych przy dokonaniu płatności. Struktura tego arrayu jest jasna, co sprawia, że można swobodnie organizować te pola w zależności od potrzeb, np. umieszczać je w sekcji “Rachunek”.billing“Dostawa” (Delivery)shipping“Uwagi do zamówienia”orderW istniejących partiach, takich jak te, można edytować zawartość, a także tworzyć nowe, dostosowane do potrzeb użytkownika.custom）。

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

Poniższy przykład kodu pokazuje, jak dodać pola tekstowe “Numer podatkowy firmy” oraz pola wyboru “Czy potrzebny jest faktura” na dno obszaru informacji o rachunku.

/**
 * 在结账页面添加自定义字段
 */
add_filter( 'woocommerce_checkout_fields', 'custom_add_checkout_fields' );
function custom_add_checkout_fields( $fields ) {

// 在“账单”字段组中添加一个“公司税号”文本字段
    $fields['billing']['billing_vat_number'] = array(
        'label'        => __( '公司税号 / VAT Number', 'your-text-domain' ),
        'placeholder'  => _x( '请输入您的公司税号', 'placeholder', 'your-text-domain' ),
        'required'     => false, // 非必填
        'class'        => array( 'form-row-wide' ), // 宽度样式
        'clear'        => true, // 清除浮动
        'priority'     => 25, // 显示顺序，数字越小越靠前
    );

// 在“账单”字段组中添加一个“是否需要发票”单选框
    $fields['billing']['billing_invoice_needed'] = array(
        'type'         => 'radio',
        'label'        => __( '是否需要纸质发票？', 'your-text-domain' ),
        'required'     => true,
        'class'        => array( 'form-row-wide' ),
        'clear'        => true,
        'priority'     => 30,
        'options'      => array(
            'yes' => __( '是，需要纸质发票', 'your-text-domain' ),
            'no'  => __( '否，不需要', 'your-text-domain' )
        )
    );

return $fields;
}

Weryfikacja i zapisanie danych z pola

Po dodaniu pola należy upewnić się, że dane wprowadzone przez użytkownika są zapisane w odpowiednich metadanych zamówienia. To wymaga realizacji odpowiednich procedur programowych. woocommerce_checkout_update_order_meta Aby to osiągnąć, użyjemy „hooków akcji” (action hooks). Gdy użytkownik wysyła zamówienie, WooCommerce aktywuje ten hook, więc w tym momencie możemy uzyskać i zapisać wartości zdefiniowanych polów.

/**
 * 保存自定义结账字段的值到订单元数据
 */
add_action( 'woocommerce_checkout_update_order_meta', 'custom_save_checkout_fields' );
function custom_save_checkout_fields( $order_id ) {

if ( ! empty( $_POST['billing_vat_number'] ) ) {
        // 使用 sanitize_text_field 进行清洁处理，防止恶意代码
        update_post_meta( $order_id, '_billing_vat_number', sanitize_text_field( $_POST['billing_vat_number'] ) );
    }

if ( ! empty( $_POST['billing_invoice_needed'] ) ) {
        update_post_meta( $order_id, '_billing_invoice_needed', sanitize_text_field( $_POST['billing_invoice_needed'] ) );
    }
}

Wyświetlać dane z pola w tle aplikacji oraz w wiadomościach e-mail.

Nie wystarczy tylko przechowywać danych – sprzedawcy muszą mieć dostęp do tych informacji podczas zarządzania zamówieniami w tle, a klienci powinni móc zobaczyć swoje wpisy w wiadomościach potwierdzających zamówienie oraz na stronie “Moje konto”.

Wyświetla się na stronie edycji zamówienia w tle.

Można to zrobić. woocommerce_admin_order_data_after_billing_address Podobnie do innych “hooków” wartości zdefiniowanych polów są wyświetlone po kolumnach “Adresa faktury” lub „Adresa dostawy” na stronie szczegółów zamówienia w systemie backend.

Polecamy lekturę. Przewodnik po rozwoju pluginów dla WordPressa: jak stworzyć swoje pierwsze rozszerzenie funkcjonalne od zera。

/**
 * 在后台订单详情页显示自定义字段
 */
add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_display_admin_order_meta', 10, 1 );
function custom_display_admin_order_meta( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    $invoice_needed = $order->get_meta( '_billing_invoice_needed' );

if ( $vat_number ) {
        echo '<p><strong>' . __( '公司税号:', 'your-text-domain' ) . '</strong> '`.esc_html($vat_number)`.'</p>';
    }
    if ( $invoice_needed ) {
        $display_text = ( $invoice_needed == 'yes' ) ? __( '是', 'your-text-domain' ) : __( '否', 'your-text-domain' );
        echo '<p><strong>' . __( '需要纸质发票:', 'your-text-domain' ) . '</strong> '`.esc_html($display_text)`.'</p>';
    }
}

Wyświetlić to w e-mailu z zamówieniem oraz na stronie podziękowania.

Aby klienci także mogli oglądać te informacje, musimy je dodać do e-maila z zamówieniem oraz do strony potwierdzenia zamówienia (z podziękowaniami). woocommerce_email_order_meta_keys Filtry mogą automatycznie dodawać określone klucze metadanych do wszystkich wiadomości powiadomieniowych. woocommerce_order_details_after_order_table Aktywnie używane „hooki” mogą być wyświetlone w szczegółach zamówienia na stronie klienta.

/**
 * 将自定义字段添加到订单邮件中
 */
add_filter( 'woocommerce_email_order_meta_keys', 'custom_add_order_meta_to_email' );
function custom_add_order_meta_to_email( $keys ) {
    $keys[] = '_billing_vat_number';
    $keys[] = '_billing_invoice_needed'; // 邮件中会以键的格式显示，通常需要进一步美化
    return $keys;
}

/**
 * 在前台订单详情（感谢页面、我的账户-订单详情）中显示自定义字段
 */
add_action( 'woocommerce_order_details_after_order_table', 'custom_display_order_data_frontend', 10, 1 );
function custom_display_order_data_frontend( $order ) {
    $vat_number = $order->get_meta( '_billing_vat_number' );
    if ( $vat_number ) {
        echo '<h2>' . __( '附加信息', 'your-text-domain' ) . '</h2>'echo '<table class="shop_table shop_table_responsive additional_info">'echo '<tr><th>' . __( '公司税号:', 'your-text-domain' ) . '</th><td>'`.esc_html($vat_number)`.'</td></tr>'echo '</table>';
    }
}

Zarządzanie zaawansowanymi aplikacjami i logiką warunków poli (Advanced Application and Field Condition Logic)

Po dodaniu podstawowych poli bardziej złożone interakcje mogą znacząco poprawić użytkownicze doświadczenie, np. wyświetlanie pola w zależności od określonych warunków oraz sprawdzanie wartości na podstawie dostępnych danych.

Urealizowanie wyświetlania pola według określonych warunków

Za pomocą JavaScript/jQuery można dinamicznie wyświetlać lub ukrywać dane w zależności od wartości określonego pola (np. kraju, stanu lub wybranego opcji z rozwijanego menu). Na przykład tekstowe pole z informacjami o wymaganiach dotyczących wysyłki faktury będzie wyświetlone tylko wtedy, gdy użytkownik wybierze opcję “Konieczna faktura drukowana”.

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

Aby zrealizować tę funkcję, konieczne jest dodanie odpowiedniej logiki do pliku JavaScript w temacie lub korzystanie z innych dostępnych metod. wp_enqueue_script Umieszczenie skryptu w kolejce oraz monitorowanie zmian w polach na stronie dokonania płatności, w celu kontrolowania stanu wyświetlania wymaganych polów.

Dodaj własną walidację do pola.

Choć w WooCommerce znajduje się funkcja “obowiązkowe pola” („required fields”),required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Aktywnie wykorzystuj „hooki” do dodawania własnej logiki sprawdzania (custom validation logic).

/**
 * 在结账过程中验证自定义字段
 */
add_action( 'woocommerce_checkout_process', 'custom_validate_checkout_fields' );
function custom_validate_checkout_fields() {
    // 如果“公司税号”字段不为空，则检查其格式（示例：假设是15位数字）
    if ( ! empty( $_POST['billing_vat_number'] ) && ! preg_match( '/^d{15}$/', $_POST['billing_vat_number'] ) ) {
        wc_add_notice( __( '错误：公司税号格式不正确，应为15位数字。', 'your-text-domain' ), 'error' );
    }
}

Optymalizacja wydajności i najlepsze praktyki

Dodawanie zbyt wielu ustawionych przez użytkownika pola na stronie internetowej lub niewłaściwe ich zarządzanie może wpłynąć na szybkość ładowania strony dokonania płatności oraz na jakość doświadczenia użytkownika.

Polecamy lekturę. Zasady tworzenia i wyświetlania polów dostosowanych w systemie WooCommerce: poradnik dla zaawansowanych programistów。

Optymalizacja ładowania i renderowania pola

• Wymagany sposób ładowania skryptów: Na stronie dokonania płatności są ładowane tylko skrypty JavaScript potrzebne do wyświetlania poli, które są dostępne według określonych warunków.
• Ustalenie rozsądnego priorytetu: jak to zrobić? priority Parametry powinny być rozstawione tak, by ułatwić logiczne sortowanie poli, unikając niepotrzebnego przemieszczania elementów w układzie.
• Uproszczenie. class Array: Dodawaj tylko niezbędne klasy stylowe. form-row-wide 或 form-row-first。

Bezpieczeństwo i czyszczenie danych

• Zawsze czystź i sprawdzaj: przed zapisem…update_post_meta) i wyświetlanie (echoPrzed używaniem danych użytkowników konieczne jest upewnienie się, że… sanitize_text_field(), esc_html(), wp_kses_post() Funkcje te są używane do przetwarzania danych, co jest kluczowym elementem w zapobieganiu atakom typu XSS (Cross-Site Scripting).
• Wybierz właściwy typ danych: w przypadku liczbowych lub danych w określonym formacie warto zastanowić się nad użyciem odpowiedniego typu. sanitize_key() Lub użyj własnego wyrażenia regularnego do weryfikacji i przygotowania danych.

Podsumowanie.

Dostosowanie polów podczas procesu płatności w WooCommerce to potężna funkcja, która umożliwia lepszą komunikację pomiędzy sprzedawcami a klientami w kluczowych momentach transakcji. woocommerce_checkout_fields Definicje „hooków” umożliwiają definiowanie pola na stronie frontowej ( frontend) oraz ich późniejsze wykorzystanie w aplikacji. woocommerce_checkout_update_order_meta Dane są bezpiecznie przechowywane za pomocą specjalnych „haków” (hooków), a potem prezentowane w tle systemu, w wiadomościach e-mail oraz na ekranach użytkowników za pośrednictwem różnych narzędzi do zarządzania i filtrów wiadomości. Cały ten proces tworzy zamykany cykl obsługi danych. Po opanowaniu tych podstawowych metod, w połączeniu z zaawansowanymi technikami, takimi jak wyświetlanie informacji według określonych warunków i samodzielna weryfikacja danych, programiści mogą stworzyć proces płatności, który jest wyjątkowo personalizowany, przyjazny użytkownikowi i bezpieczny pod względem przechowywania informacji. To umożliwia zaspokojenie różnych potrzeb e-commerce, a także podniesienie poziomu profesjonalizacji sklepu i zadowolenia klientów.

FAQ – najczęściej zadawane pytania.

Gdzie są przechowywane dane z pola dostosowanego?

Dane z pola dostosowanego są przechowywane jako “metadane zamówienia”. Gdy jest to używane… update_post_meta( $order_id, ‘_field_key’, $value ); Podczas zapisu dane są przechowywane w WordPress. wp_postmeta W tabeli bazy danych elementy powiązane z zamówieniami (które są rodzajem dostosowanego artykułu) są przedstawione w następujący sposób: post_id Powiązanie. Nazwy kluczy zwykle zaczynają się od kreski podkreslającej, co oznacza, że są to ukryte metadane.

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

Jak zapewnić, że ustawione przez użytkownika pola zostaną także zapisane w jego kontu podczas rejestracji?

Jeśli pozwolisz na utworzenie konta podczas płatności i chcesz, aby pola takie jak “nazwa firmy” zostały zapisane w danych użytkownika, konieczne jest aktualizowanie metadanych użytkownika wraz z zapisem metadanych zamówienia. Można to zrealizować za pomocą odpowiednich procedur programowych. update_user_meta( $customer_id, ‘billing_company’, $value );Uwaga: Zwykle konieczne jest uzyskanie poprawnego ID użytkownika w kontekście rejestracji lub logowania użytkownika.

Dlaczego moje ustawione pola nie są wyświetlone poprawnie w e-maile?

Jeśli wartość pola nie została wyświetlona w e-mailu, najczęściej jest to spowodowane zapomnieniem o dodaniu tej informacji podczas tworzenia wiadomości. woocommerce_email_order_meta_keys Filtr wykorzystuje nazwy kluczy do dodania ich do zmiennych zawartych w wiadomości e-mail. Ponadto może się zdarzyć, że szablon wiadomości nie zawiera elementów służących do wyświetlania ustawionych metadanych. Upewnij się, że nazwy Twoich pol zostały poprawnie dodane do arrayu filtrów, a także że szablon wiadomości (np.…) jest dostosowany do wymagań systemu. email-order-details.phpMożna wyświetlić standardowe metadane.

Czy można dodać bloki pola w różnych miejscach na stronie dokonania płatności?

Możliwe. Oprócz wersji standardowej… billing、shipping、order „Grupowanie” – możesz to zrobić w następujący sposób: woocommerce_checkout_fields Utworzyć w filtrze zupełnie nową grupę, na przykład… custom_sectionA potem, użyj… woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Aktywności typu „hook” w połączeniu z… do_action(‘woocommerce_checkout_’ . $section); Możesz renderować pola z nowego grupowania w dowolnym miejscu na stronie, jakie tylko chcesz. Aby to zrobić, konieczne jest posiadanie wiedzy o strukturze szablonu dokonania płatności w WooCommerce.