オンラインストアを構築する際、顧客の支払いプロセスの体験は非常に重要です。標準のWooCommerceの支払いフォームでは、請求書の宛先や誕生日の祝福メッセージ、特別な配送希望など、すべてのビジネスニーズを満たすことができない場合があります。このような場合、カスタムの支払いフィールドを使用することで強力な拡張機能を得ることができます。これにより、ユーザー体験のパーソナライゼーションが向上するだけでなく、店舗側も重要なビジネスデータを収集でき、サービスやマーケティング戦略の最適化に役立ちます。
WordPressのフックシステムとWooCommerceが提供する豊富なAPIを利用することで、開発者は決済ページのさまざまな場所（「請求先住所」や「配送先住所」の領域の後ろ、あるいは新しいブロックを作成する場所でも）に、テキスト入力フォーム、ドロップダウンリスト、ラジオボタン、チェックボックスなど、さまざまなタイプのフィールドを比較的簡単に追加することができます。このプロセスは単にフロントエンドの表示にとどまらず、より重要なのはバックエンドでのデータ処理の流れです。つまり、ユーザーが入力したデータが正確かつ安全に注文情報に保存され、バックエンドの管理画面、ユーザーアカウントページ、および注文通知メールにも正確に表示されるようにすることです。
カスタムの支払い情報フィールドの実装方法
WooCommerceでは、決済時に使用されるフィールドを処理するための2つの主要な種類のフックが提供されています：woocommerce_checkout_fields と woocommerce_checkout_update_order_meta前者はフィールドを定義し、レンダリングするために使用され、後者はフィールドデータを保存するために使用されます。
推薦図書 ワードプレスのプラグイン開発を初心者から上級者まで学ぶ。自分だけの機能を作る方法を一通り説明します。
フックを使用してフィールドを追加する
最も重要なステップは、「通じる」ことです。 woocommerce_checkout_fields フィルターフックを使用して、カスタムフィールドを決済用のフィールド配列に追加します。この配列の構造は明確であり、フィールドを「請求書」に配置することができます。billing）、「配送」shipping）、「注文備考」order）などの既存のパーティションのほか、カスタムパーティションを作成することもできます。custom）。
このコード例では、「請求書」情報領域の下部に「法人税番号」のテキストフィールドと「請求書の発行が必要か」を選択するためのラジオボックスを追加する方法を示しています。
/**
* 在结账页面添加自定义字段
*/
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;
}フィールドデータの検証と保存
フィールドを追加した後は、ユーザーが入力したデータが該当する注文のメタデータに保存されるようにする必要があります。これを実現するには、以下の手順が必要です： woocommerce_checkout_update_order_meta アクションフックを使用して実現します。ユーザーが注文を送信すると、WooCommerceはこのフックをトリガーし、このタイミングでカスタムフィールドの値を取得して保存することができます。
/**
* 保存自定义结账字段的值到订单元数据
*/
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'] ) );
}
}バックエンドおよびメールでフィールドデータを表示する
データを単に保存するだけでは不十分です。店舗側はバックエンドで注文を管理する際にこれらの情報を確認する必要があり、顧客も注文確認メールや「マイアカウント」ページで自分が入力した内容を確認できるようになっている必要があります。
バックエンドの注文編集ページに表示する
通過することができます。 woocommerce_admin_order_data_after_billing_address 類似のフックを使用して、カスタムフィールドの値をバックエンドの注文詳細ページの「請求先住所」または「配送先住所」の項目の後に出力します。
推薦図書 WordPressプラグイン開発入門ガイド：最初の機能拡張をゼロから構築する。
/**
* 在后台订单详情页显示自定义字段
*/
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>';
}
}注文確認メールおよび感謝のページに表示します。
お客様にもこれらの情報を確認していただくために、注文確認メールおよび注文完了（ありがとうございます）のページにも表示する必要があります。 woocommerce_email_order_meta_keys このフィルターを使用すると、指定されたメタデータキーがすべての通知メールに自動的に追加されます。 woocommerce_order_details_after_order_table アクションフックは、フロントエンドの注文詳細ページに表示することができます。
/**
* 将自定义字段添加到订单邮件中
*/
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>';
}
}高度なアプリケーションとフィールド条件の論理
基本フィールドの追加に加えて、より複雑なインタラクション（例えばフィールドの条件付き表示や既存の値に基づく検証）によって、ユーザー体験が大幅に向上します。
フィールドの条件付き表示を実現する
JavaScriptやjQueryを使用すると、あるフィールドの値（国、州、またはラジオボタンの選択肢など）に基づいて、別のフィールドを動的に表示したり非表示にしたりできます。例えば、ユーザーが「紙の請求書が必要」と選択した場合にのみ、「請求書の送付に関する注意事項」のテキストエリアを表示するようにすることができます。
この機能を実現するには、テーマのJavaScriptファイルにロジックを追加するか、または別の方法を使う必要があります。 wp_enqueue_script スクリプトをキューに投入し、チェックアウトページでフィールドの変更を監視し、対象フィールドの表示状態を制御します。
フィールドにカスタムの検証ルールを追加する
WooCommerceには「必須項目」として設定する機能が組み込まれていますが、required => true）验证，但有时你需要更复杂的验证规则，比如税号的特定格式。可以通过 woocommerce_checkout_process アクションフックを使用して、カスタムの検証ロジックを追加します。
/**
* 在结账过程中验证自定义字段
*/
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' );
}
}パフォーマンス最適化とベストプラクティス
ウェブサイトに過度なカスタムフィールドを追加したり、それらを適切に処理しなかったりすると、チェックアウトページの読み込み速度やユーザー体験に悪影響を与える可能性があります。
推薦図書 WooCommerceのカスタムフィールドの使いこなし：作成から表示までの高度な開発ガイド。
フィールドの読み込みとレンダリングを最適化する
- 選択的なスクリプトの読み込み：決済ページでは、条件に応じて表示されるフィールドに必要なJavaScriptスクリプトのみを読み込みます。
- 優先順位を合理的に設定する方法：
priorityパラメータを適切に配置し、フィールドの順序を整えることで、不必要なレイアウトの再配置を避けましょう。 - 簡潔に言うと：
class配列：必要なスタイルクラスのみを追加してください。例えば：form-row-wideまたはform-row-first。
データセキュリティとクリーニング
- 常にクリーンアップと検証を行い、保存する際には…
update_post_meta）および表示（echo）ユーザーデータを処理する前に、必ず以下の手順を実行してください：sanitize_text_field(),esc_html(),wp_kses_post()これらの関数を使用して処理を行うことで、クロスサイトスクリプティング（XSS）攻撃を防ぐことができます。 - 正しいデータ型を使用してください。数字や特定の形式のデータについては、適切なデータ型を選択することを検討してください。
sanitize_key()または、カスタムの正規表現を使用して検証やクリーニングを行うこともできます。
概要
WooCommerceのカスタム決済フィールド機能は非常に強力であり、取引の重要な段階において店舗と顧客の間の情報の流れをスムーズにします。 woocommerce_checkout_fields フックを使用してフロントエンドのフィールドを定義し、それを活用する。 woocommerce_checkout_update_order_meta フックを使用してデータを安全に保存し、その後複数の管理フックやメールフィルターを通じてデータをバックエンド、メール、ユーザーインターフェースに表示する。この一連のプロセスが完全なデータ処理のサイクルを形成しています。これらのコア技術をマスターし、条件に応じた表示やカスタム検証などの高度な手法を組み合わせることで、開発者はユーザーに優しく、データの安全性が確保された決済プロセスを構築することができます。これにより、多様なeコマースのニーズに応え、店舗の専門性と顧客満足度を向上させることができます。
FAQ よくある質問
カスタムフィールドのデータはどこに保存されますか？
カスタムフィールドのデータは「注文メタデータ」として保存されます。使用する際には… update_post_meta( $order_id, ‘_field_key’, $value ); 保存すると、データはWordPressに保存されます。 wp_postmeta データベースのテーブル内で、注文（カスタム記事タイプの一種）と関連付けられている情報は… post_id 関連付け。キー名は通常アンダースコアで始まり、これはそのキーが隠されたメタデータであることを示しています。
ユーザー登録時にカスタムフィールドもユーザーアカウントに保存するにはどうすればよいですか？
もし決済時にアカウントの作成を許可し、「会社名」などの情報もユーザーデータとして保存したい場合は、注文のメタデータを保存すると同時にユーザーメタデータも更新する必要があります。そのためには、以下のような処理が必要です： update_user_meta( $customer_id, ‘billing_company’, $value );注意：これには通常、ユーザーが登録したりログインしたりした際に取得される正しいユーザーIDが必要です。
なぜ私のカスタムフィールドがメールに正しく表示されないのでしょうか？
もしフィールドの値がメールに表示されていない場合、最も一般的な原因は「メールを送信する際にその値を含めるのを忘れた」ことです。 woocommerce_email_order_meta_keys フィルターは、そのキー名をメール変数に追加します。さらに、メールテンプレートにはカスタムメタデータを表示するための処理が含まれていない場合があります。ご使用のフィールドキー名が正しくフィルターアレイに追加されていること、およびメールテンプレートにその処理が含まれていることを確認してください。 email-order-details.php一般的なメタデータの表示をサポートしています。
決済ページの異なる場所にフィールドブロックを追加することはできますか？
はい。デフォルトの設定以外にも対応できます。 billing、shipping、order 「グループ分けについてですが、以下の方法で行うことができます：」 woocommerce_checkout_fields フィルター内に新しいグループを作成するには、次のようにします： custom_sectionそして、それを使用して… woocommerce_checkout_after_customer_details または woocommerce_before_order_notes これらのアクションフックを組み合わせて使用することで… do_action(‘woocommerce_checkout_’ . $section); この新しくグループ分けされたフィールドを、ページの任意の場所にレンダリングしたいですね。そのためには、WooCommerceの決済テンプレートの構造についてある程度理解している必要があります。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語