Podrobné vysvětlení vlastních polí pro pokladnu ve WooCommerce: úplný praktický návod od vytvoření po zpracování dat.

Při vytváření online obchodu je zážitek z procesu platby zákazníků velmi důležitý. Standardní formulář pro platbu v WooCommerce nemusí splňovat všechny požadavky podniků – například na shromažďování údajů o fakturačním adresáři, přání k narozeninám nebo specifických požadavcích na doručení. V takových případech se stávají vlastní pole pro platbu silným nástrojem pro rozšíření funkčnosti systému. Nejenže umožňují personalizovat zážitek zákazníků, ale také poskytují podnikům důležité obchodní data, která mohou pomoci optimalizovat služby a marketingové strategie.

Díky systému hooků v WordPressu a bohatému API poskytovanému WooCommerce mohou vývojáři poměrně snadno přidávat různé typy polí – textová pole, výběrová pole, políčka s možností výběru jedné odpovědi, políčka s možností výběru více odpovědí atd. – na různá místa na stránce pro dokončení objednávky (za oblastmi “Adresa faktury” a “Adresa doručení” nebo dokonce vytvořit zcela nové bloky). Celý proces nezahrnuje pouze vzhled stránky z pohledu uživatelského rozhraní, ale je důležitější také způsob zpracování dat na straně serveru: jak zajistit, aby data zadaná uživatelem byla správně a bezpečně uložena do objednávky, a aby byla tyto data zobrazena na stránce pro správu objednávek, na stránce uživatelského účtu a v e-mailových notifikacích o objednávkách.

Způsob implementace vlastních polí pro platbu

WooCommerce poskytuje dvě hlavní kategorie hooků určených k zpracování údajů potřebných při dokončení objednávky:woocommerce_checkout_fields 和 woocommerce_checkout_update_order_metaPrvní slouží k definování a zobrazení polí, druhý slouží k ukládání dat z těchto polí.

Doporučujeme k přečtení. Vývoj WordPress pluginů od základů až po pokročilé úrovně: Postupná příručka, jak vytvořit svou vlastní funkci。

Použitím hooků přidáte pole.

Nejzásadnějším krokem je prostřednictvím… woocommerce_checkout_fields Filtrovací hooky umožňují přidávat vlastní pole do pole určeného k úhradě. Toto pole má jasnou strukturu, což vám umožňuje umístit požadovaná data do části dokumentu označené jako “účtenka”.billing“Doprava”shipping“Poznámky k objednávce”orderVčetně stávajících oddílů lze také vytvořit vlastní oddíly (custom partitions).custom）。

UltaHost – hosting služby pro weby postavené na platformě WordPress

Záruka vrácení peněz do 30 dnů, neomezený šířka pásma a databáze, bezplatná ochrana proti DDoS útokům. Sleva 501 TP4T při nákupu na 3 roky.

přístupová stránka

Následující příklad kódu ukazuje, jak na spodní část oblasti informací o “fakturách” přidat textové pole “Číslo firemního identifikátoru” a políčko s možnostmi výběru “Potřebujete fakturu?”

/**
 * 在结账页面添加自定义字段
 */
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;
}

Ověření a uložení dat z polí

Po přidání nových polí je nutné zajistit, aby data zadaná uživateli byla uložena do příslušných metadat objednávky. To je možné dosáhnout pomocí následujících kroků: woocommerce_checkout_update_order_meta To je realizováno pomocí akčních hooků. Když uživatel odeslá objednávku, WooCommerce spustí tento hook, a my můžeme v tomto okamžiku získat a uložit hodnoty vlastních polí.

/**
 * 保存自定义结账字段的值到订单元数据
 */
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'] ) );
    }
}

Zobrazovat data z polí v pozadí a v e-mailech.

Uchovávání dat samotných nestačí – prodejci potřebují tyto informace při správě objednávek v pozadí, zatímco zákazníci by měli mít možnost vidět své vlastní údaje v e-mailu potvrzujícím objednávku a na stránce “Můj účet”.

Zobrazit na stránce pro úpravu objednávek v pozadí

Je možné to provést. woocommerce_admin_order_data_after_billing_address Stejně jako podobné “hooky” (nástroje pro připojení kódů do aplikace), tyto funkce umožňují vypsat hodnoty vlastních polí na stránce s detaily objednávky na straně serveru, konkrétně do kolonek “Adresa účtu” nebo „Adresa doručení“.

Doporučujeme k přečtení. Úvodní průvodce vývojem pluginů pro WordPress: Vytvořte si své první funkční rozšíření od nuly。

/**
 * 在后台订单详情页显示自定义字段
 */
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>'\n' . __( 'Daňové číslo společnosti:', '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>';
    }
}

Zobrazit v e-mailu s objednávkou a na stránce poděkování.

Aby zákazníci také mohli vidět tyto informace, je potřeba je přidat do e-mailů s objednávkami a na stránky potvrzení objednávky (děkujeme). woocommerce_email_order_meta_keys Filtr může automaticky přidávat určené metadatové klíče do všech oznámení e-mailů. Zároveň… woocommerce_order_details_after_order_table Akční háčky mohou být zobrazeny v detailech objednávky na předním panelu.

/**
 * 将自定义字段添加到订单邮件中
 */
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>'\n' . __( 'Další informace', 'your-text-domain' ) . '</h2>';
        echo '<table class="shop_table shop_table_responsive additional_info">';
        echo '<tr><th>'\n' . __( 'Daňové číslo společnosti:', 'your-text-domain' ) . '</th><td>'`. esc_html($vat_number).`'</td></tr>';
        echo '</table>';
    }
}

Pokročilé aplikace a logika podmínek polí

Kromě přidání základních polí mohou složitější interakce výrazně zlepšit uživatelský zážitek – např. podmíněné zobrazení polí nebo jejich ověřování na základě stávajících hodnot.

Implementace podmíněného zobrazení polí

Pomocí JavaScript/jQuery můžete dynamicky zobrazovat nebo skrývat jedno pole na základě hodnoty jiného pole – např. země, státu nebo výběru z rozbalovacího menu. Například textové pole s upozorněními k doručení faktury se zobrazí pouze v případě, že uživatel zvolí možnost “Potřebuji papírovou fakturu”.

Shared hosting na hosting.com

Vysoký výkon, vybavený procesorem AMD EPYC, úložištěm NVMe SSD a LiteSpeedem, nepřetržitá interní podpora odborníků 24 hodin denně a 7 dní v týdnu, pokročilá bezpečnostní opatření včetně SSL, ochrany proti útokům hrubou silou, malwaru a DDoS, úspora až 731 TB/měsíc.

přístupová stránka

Pro implementaci této funkce je nutné přidat potřebnou logiku do JavaScript souboru tématu, nebo to provést jiným způsobem. wp_enqueue_script Zařaďte skript do fronty a na stránce pro úhradu sledujte změny v polích, abyste mohli ovládat zobrazení cílových polí.

Přidání vlastního ověřování pro pole

I když je v WooCommerce vestavěna funkce “povinné” („required“),required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process Akční háčky slouží k přidání vlastní logiky ověřování.

/**
 * 在结账过程中验证自定义字段
 */
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' );
    }
}

Optimalizace výkonu a osvědčené postupy

Přidání příliš mnoha vlastních polí na webových stránkách nebo nesprávné jejich zpracování může ovlivnit rychlost načítání stránky pro dokončení objednávky a celkový zážitek uživatelů.

Doporučujeme k přečtení. Zvládnutí vlastních polí v WooCommerce: Pokročilý průvodce vývojem od vytvoření po zobrazení。

Optimalizace načítání a zobrazování polí

• Selektivní načítání skriptů: Na stránce pro dokončení objednávky se načtou pouze ty JavaScript skripty, které jsou potřebné pro zobrazení polí podle určených podmínek.
• Správné nastavení priorit: Použijte priority Parametry by měly být rozloženy tak, aby byl správně uspořádán pořadí polí, a to za účelem předejít zbytečnému přeuspořádání rozložení stránky.
• Zjednodušeno: class Řada: Přidejte pouze potřebné stylové třídy, např. form-row-wide 或 form-row-first。

Data security and cleaning

• Vždy provádějte čištění a ověřování dat před uložením.update_post_meta) a zobrazení (echoPřed zpracováním uživatelských dat je nutné vždy použít… sanitize_text_field(), esc_html(), wp_kses_post() Tyto funkce slouží k zpracování dat a jsou klíčové pro prevenci útoků typu cross-site scripting (XSS).
• Používejte správné datové typy: U čísel nebo dat ve specifickém formátu byste měli zvážit použití vhodných datových typů. sanitize_key() Nebo použijte vlastní regulární výrazy k ověření a úpravě dat.

Závěr

Vlastní pole pro platbu v WooCommerce jsou velmi užitečnou funkcí, která umožňuje lepší komunikaci mezi obchodníkem a zákazníkem v klíčových momentech transakce. woocommerce_checkout_fields Definice „hooků“ umožňuje nastavit front-end pole a následně je využít. woocommerce_checkout_update_order_meta Data jsou bezpečně uložena pomocí „hooků“ (speciálních mechanismů), poté jsou předána do backendu, e-mailů a uživatelského rozhraní prostřednictvím různých správních nástrojů a filtrů pro e-maily. Celý tento proces tvoří úplný cyklus zpracování dat. Po zvládnutí těchto základních metod mohou vývojáři v kombinaci s pokročilými technikami, jako je podmíněné zobrazování a vlastní ověřování, vytvořit vysoce personalizované, uživatelsky přívětivé a bezpečné procesy platby, které uspokojí různorodé potřeby elektronického obchodování a zvýší profesionalitu obchodu i spokojenost zákazníků.

Časté dotazy

Kde jsou data uložena v přizpůsobených polích?

Data z přizpůsobených polí jsou uložena jako “metadata objednávky”. Při použití… update_post_meta( $order_id, ‘_field_key’, $value ); Při uložení budou data uložena do systému WordPress. wp_postmeta V databázové tabulce jsou údaje o objednávkách (jednom z vlastních typů článků) propojeny s dalšími informacemi pomocí… post_id Souvislost. Názvy klíčů obvykle začínají podtržkou, což značí, že se jedná o skryté metadaty.

Shared hosting od InterServeru

Sdílený hosting za 1 TB + 5 TB měsíčně za 2,50 USD, slevový kód tryinterserver pro první měsíc za 1 TB + 5 TB za 0,1 USD, a 461 skriptů cloudových aplikací k jednoduché instalaci.

přístupová stránka

Jak zajistit, aby byly vlastní pole uložena také do uživatelského účtu při registraci?

Pokud při platbě umožníte vytvoření účtu a chcete, aby pole (např. “Název společnosti”) byla také uložena v uživatelských údajích, je potřeba aktualizovat uživatelské metadata spolu s uložením metadat objednávky. K tomu lze použít vhodné nástroje nebo skripty. update_user_meta( $customer_id, ‘billing_company’, $value );Všimněte si, že k získání správného uživatelského ID obvykle je potřeba použít informace z kontextu registrace nebo přihlášení uživatele.

Proč se moje vlastní pole nezobrazují správně v e-mailu?

Pokud se hodnota pole nezobrazí v e-mailu, nejčastější příčinou je zapomenutí na to, aby byla přesměrována do e-mailového textu. woocommerce_email_order_meta_keys Filtr přidá názvy svých klíčů do proměnných e-mailu. Kromě toho možná e-mailový šablon není naprogramován tak, aby zobrazoval vlastní metadata. Ujistěte se, že názvy vašich polí byly správně přidány do pole filtrů, a také že e-mailový šablon… email-order-details.phpPodporuje zobrazení obecných metadat.

Je možné na stránce pro úhradu přidat bloky polí na různých místech?

Možné. Kromě výchozího… billing、shipping、order Skupinování – můžete to provést… woocommerce_checkout_fields V filtru vytvořte zcela novou skupinu, například… custom_sectionPoté použijte… woocommerce_checkout_after_customer_details 或 woocommerce_before_order_notes Akční háčky, v kombinaci… do_action(‘woocommerce_checkout_’ . $section); Převeďte tyto pole z nové skupiny na jakékoli místo na stránce, které si přejete. K tomu je potřeba mít určité znalosti o struktuře platebního formuláře v WooCommerce.