2026年10月4日

WooCommerceのカスタムチェックアウトフィールドを追加する方法

プラグイン関連

はじめに

WooCommerceは、WordPress上でオンラインショップを簡単に構築できる強力なプラグインです。カスタムチェックアウトフィールドの追加は、顧客情報の収集や特定の業種向けの機能拡張など、柔軟性と独自性を高める重要な手段です。

症状・背景

このテーマが必要になる主な場面:

オプション商品の注文に必要な特別なフィールド（例：サイズ選択）
配送業者や顧客情報の追加項目が必要な場合
法的要件として、特定の情報を収集する必要がある場合
ユーザー体験を向上させるために、注文プロセスにカスタムフィールドを追加したい場合

手順・設定方法

ステップ1: WordPressテーマ内のfunctions.phpファイルを開くまたは子テーマ作成

# 子テーマを使用している場合は、そのディレクトリに移動します。
cd wp-content/themes/your-child-theme/

# functions.phpファイルを編集します。
nano functions.php

ステップ2: フィールドの追加コードを挿入

# カスタムフィールド関連の関数を定義します。
function custom_checkout_fields($fields) {
    $fields['billing']['custom_field'] = array(
        'type' => 'text',
        'label' => __('あなたのカスタム項目', 'woocommerce'),
        'required' => false,
        'class' => array('form-row-wide'),
        'priority' => 90
    );
    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'custom_checkout_fields' );

# CSSやJSで追加フィールドをカスタマイズします。
function custom_checkout_scripts() {
    wp_enqueue_style( 'custom-checkout-style', get_template_directory_uri().'/css/custom-checkout.css', array(), '1.0', 'all');
    wp_enqueue_script('custom-checkout-script', get_template_directory_uri().'/js/custom-checkout.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_checkout_scripts');

ステップ3: 追加フィールドの値を保存する

# カスタムフィールドの値を保存します。
function save_custom_field($customer_id) {
    if (isset($_POST['custom_field'])) {
        $custom_value = sanitize_text_field($_POST['custom_field']);
        update_user_meta( $customer_id, 'custom_field', $custom_value );
    }
}
add_action('woocommerce_checkout_update_customer', 'save_custom_field');

ステップ4: チェックアウトフローでのフィールドの表示

# フィールドが正常に表示され、必要に応じてバリデーションを行うことを確認します。
function custom_checkout_fields_rendered($fields) {
    woocommerce_form_field('custom_field', $fields['billing']['custom_field'], $_POST);
}
add_action( 'woocommerce_after_order_notes', 'custom_checkout_fields_rendered' );

注意事項

<実践的な注意点1>: フィールドを追加する前に、既存のチェックアウトフローが影響を受けないことを確認してください。
<実践的な注意点2>: カスタムフィールドはすべてのユーザーロールに対して表示されるべきかどうかを検討してください。
<セキュリティ上の注意>: フィールドにユーザーからの入力を直接保存する際には、適切なデータ検証とエスケープを行うことが重要です。
<パフォーマンス/運用上の注意>: カスタムフィールドの追加はウェブサイトの負荷を増やす可能性があるため、必要最小限に抑えるべきです。

まとめ

1. カスタムフィールドの定義: フィールドの種類とラベルを適切に設定します。

2. CSS/JSの追加: 追加したフィールドを視覚的に魅力的でユーザーフレンドリーにするための調整を行います。

3. 値の保存: フィールドに入力された情報を安全かつ効果的に保存する機能を実装します。

4. チェックアウトフローへの統合: 追加したフィールドが順調に動作し、ユーザーベース全体で問題なく利用可能であることを確認します。