2026年9月14日

WooCommerceのチェックアウトページをカスタマイズする方法

プラグイン関連

はじめに

WooCommerceのチェックアウトページは、標準のフィールド構成がビジネス要件に合わないケースが多くあります。会社名や電話番号の表示変更から、配送指定日などの独自フィールド追加まで、フックを使ったカスタマイズが基本的なアプローチです。本記事では、functions.phpまたは専用プラグインに実装できる実践的なカスタマイズコードを5ステップで解説します。

症状・原因

WooCommerceチェックアウトでよく発生する問題：

デフォルトのフィールドが多すぎて離脱率が高い（会社名・電話番号2フィールドなど）
注文に必要な独自情報（配送日時指定・名入れ文字など）を収集できない
フィールドの並び順がユーザーにとって不自然（姓名の順序など）
不正注文対策のためのカスタムバリデーションを追加したい
注文確認メールにカスタムフィールドの値を表示させたい

解決手順

ステップ1：チェックアウトフィールドの追加・削除・並び替え

woocommerce_checkout_fields フィルターでフィールドを一括管理します。

<?php
/**
 * チェックアウトフィールドをカスタマイズする
 *
 * @param array $fields チェックアウトフィールドの配列
 * @return array カスタマイズ済みフィールド配列
 */
function my_customize_checkout_fields(array $fields): array {

    // 会社名フィールドを削除
    unset($fields['billing']['billing_company']);

    // 電話番号フィールドを任意項目に変更
    $fields['billing']['billing_phone']['required'] = false;
    $fields['billing']['billing_phone']['label']    = '電話番号（任意）';

    // 姓・名の順序を日本語に合わせて入れ替え（priority で並び順制御）
    $fields['billing']['billing_last_name']['priority']  = 10;
    $fields['billing']['billing_first_name']['priority'] = 20;

    // 配送先住所フィールドのラベルを変更
    $fields['billing']['billing_address_1']['label']       = '番地・建物名';
    $fields['billing']['billing_address_1']['placeholder'] = '例：1丁目2番3号 ○○マンション101号室';

    return $fields;
}
add_filter('woocommerce_checkout_fields', 'my_customize_checkout_fields');

ステップ2：カスタムフィールドを追加してデータを保存

配送希望日など独自フィールドを追加し、注文メタデータとして保存します。

<?php
/**
 * カスタムチェックアウトフィールドを表示する
 */
function my_add_delivery_date_field(): void {
    woocommerce_form_field('billing_delivery_date', [
        'type'        => 'text',
        'class'       => ['form-row-wide'],
        'label'       => '配送希望日',
        'placeholder' => '例：2026-05-20',
        'required'    => false,
        'custom_attributes' => [
            'pattern' => '\d{4}-\d{2}-\d{2}'
        ]
    ], WC()->checkout->get_value('billing_delivery_date'));
}
add_action('woocommerce_after_checkout_billing_form', 'my_add_delivery_date_field');

/**
 * カスタムフィールドの値を注文メタデータとして保存する
 *
 * @param int $order_id 注文ID
 */
function my_save_delivery_date(int $order_id): void {
    if (empty($_POST['billing_delivery_date'])) {
        return;
    }

    $delivery_date = sanitize_text_field(wp_unslash($_POST['billing_delivery_date']));

    // 日付形式を検証
    $date = DateTime::createFromFormat('Y-m-d', $delivery_date);
    if ($date && $date->format('Y-m-d') === $delivery_date) {
        update_post_meta($order_id, '_billing_delivery_date', $delivery_date);
    }
}
add_action('woocommerce_checkout_update_order_meta', 'my_save_delivery_date');

ステップ3：チェックアウトバリデーションをカスタマイズ

woocommerce_checkout_process フックで独自バリデーションロジックを実装します。

<?php
/**
 * チェックアウトのカスタムバリデーション
 */
function my_checkout_validation(): void {
    // 配送希望日が入力されている場合のみ日付を検証
    if (!empty($_POST['billing_delivery_date'])) {
        $date_input = sanitize_text_field(wp_unslash($_POST['billing_delivery_date']));
        $date       = DateTime::createFromFormat('Y-m-d', $date_input);
        $today      = new DateTime('today');

        if (!$date || $date < $today) {
            wc_add_notice(
                __('配送希望日は今日以降の日付をYYYY-MM-DD形式で入力してください。', 'woocommerce'),
                'error'
            );
        }
    }

    // 郵便番号の形式チェック（日本の7桁）
    if (!empty($_POST['billing_postcode'])) {
        $postcode = preg_replace('/[^0-9]/', '', wp_unslash($_POST['billing_postcode']));
        if (strlen($postcode) !== 7) {
            wc_add_notice(
                __('郵便番号は7桁の数字で入力してください（例：1500001）。', 'woocommerce'),
                'error'
            );
        }
    }
}
add_action('woocommerce_checkout_process', 'my_checkout_validation');

ステップ4：注文確認メールにカスタムフィールドを表示

woocommerce_email_order_details フックで注文メールをカスタマイズします。

<?php
/**
 * 注文確認メールにカスタムフィールドを追加する
 *
 * @param WC_Order $order        注文オブジェクト
 * @param bool     $sent_to_admin 管理者宛メールかどうか
 * @param bool     $plain_text   テキスト形式かどうか
 * @param WC_Email $email        メールオブジェクト
 */
function my_add_custom_field_to_email(
    WC_Order $order,
    bool $sent_to_admin,
    bool $plain_text,
    WC_Email $email
): void {
    $delivery_date = $order->get_meta('_billing_delivery_date');

    if (empty($delivery_date)) {
        return;
    }

    if ($plain_text) {
        echo "\n配送希望日: " . esc_html($delivery_date) . "\n";
        return;
    }

    printf(
        '<p><strong>%s</strong> %s</p>',
        esc_html__('配送希望日:', 'woocommerce'),
        esc_html($delivery_date)
    );
}
add_action(
    'woocommerce_email_order_details',
    'my_add_custom_field_to_email',
    20,
    4
);

ステップ5：チェックアウトページのレイアウトをカスタマイズ

woocommerce_checkout_before_customer_details フックでUI要素を追加します。

<?php
/**
 * チェックアウトページに案内文を追加する
 */
function my_checkout_before_customer_details(): void {
    ?>
    <div class="my-checkout-notice" style="
        background: #fff8e1;
        border-left: 4px solid #ffc107;
        padding: 12px 16px;
        margin-bottom: 20px;
        border-radius: 4px;
    ">
        <p style="margin:0; font-size:14px;">
            <strong>&#9888; ご注文前にご確認ください：</strong>
            当日12時までのご注文は翌営業日発送、以降は翌々営業日発送となります。
        </p>
    </div>
    <?php
}
add_action('woocommerce_checkout_before_customer_details', 'my_checkout_before_customer_details');

/**
 * チェックアウトページのCSSをカスタマイズ
 */
function my_checkout_custom_styles(): void {
    if (!is_checkout()) {
        return;
    }

    wp_add_inline_style('woocommerce-layout', '
        .woocommerce-checkout .form-row label { font-weight: 600; }
        .woocommerce-checkout #billing_postcode { max-width: 160px; }
        .woocommerce-checkout .woocommerce-form__input:focus { border-color: #0073aa; }
    ');
}
add_action('wp_enqueue_scripts', 'my_checkout_custom_styles');

注意事項

$_POST の値は必ず sanitize_text_field() や wp_unslash() でサニタイズしてから使用すること
woocommerce_checkout_fields フィルターで削除したフィールドでも、required が残っていると送信できない場合があるので注意
WooCommerceのメジャーアップデート後はフックの動作確認が必須（特に5.x → 6.x, 8.x 系での変更が多い）
カスタムフィールドは update_post_meta ではなく $order->update_meta_data() + $order->save() を使うHPOS（High-Performance Order Storage）対応の書き方を推奨
チェックアウトページのキャッシュは必ず除外設定すること（W3 Total Cache、WP Rocketなど）

まとめ

WooCommerceのチェックアウトカスタマイズは、woocommerce_checkout_fieldsフィルターによるフィールド管理、woocommerce_checkout_update_order_metaによるデータ保存、woocommerce_checkout_processによるバリデーションという3つのフックが基本です。カスタムフィールドの値は注文メタとして保存し、メールにも反映させることで完全なカスタマイズが実現できます。さらに高度なカスタマイズには、WP-Cronを使ったスケジュール処理と組み合わせた注文後の自動処理も検討してください。

Post Views: 15