はじめに
「WooCommerceのチェックアウトに配送希望日や領収書宛名フィールドを追加したい」「不要なチェックアウトフィールドを削除したい」「チェックアウトのフィールド順序を変更したい」——WooCommerceはフックとフィルターでチェックアウトを詳細にカスタマイズできます。
症状・原因
WooCommerceのデフォルトチェックアウトフォームでは日本のECサイトに必要なフィールド（配送希望日・時間帯・領収書情報など）が不足しています。カスタマイズすることで購入体験を向上できます。
解決手順
ステップ1：チェックアウトフィールドを追加・変更・削除する
// functions.php: チェックアウトフィールドのカスタマイズ
add_filter( 'woocommerce_checkout_fields', function( array $fields ): array {
// 不要なフィールドを削除
unset( $fields['billing']['billing_company'] ); // 会社名を削除
unset( $fields['shipping']['shipping_company'] );
// フィールドを必須に変更
$fields['billing']['billing_phone']['required'] = true;
// フィールドの順序を変更（priorityで制御）
$fields['billing']['billing_last_name']['priority'] = 10;
$fields['billing']['billing_first_name']['priority'] = 20;
// プレースホルダーを変更
$fields['billing']['billing_postcode']['placeholder'] = '123-4567';
// フィールドラベルを日本語に変更
$fields['billing']['billing_state']['label'] = '都道府県';
$fields['billing']['billing_city']['label'] = '市区町村';
$fields['billing']['billing_address_1']['label'] = '番地・建物名';
return $fields;
} );ステップ2：カスタムフィールドを追加して注文メタに保存する
// functions.php: 配送希望日・時間帯・領収書フィールドを追加
// カスタムフィールドをチェックアウトフォームに表示
add_action( 'woocommerce_after_order_notes', function( WC_Checkout $checkout ): void {
echo '<div id="custom-checkout-fields"><h3>配送・領収書オプション</h3>';
// 配送希望日
woocommerce_form_field( 'desired_delivery_date', [
'type' => 'text',
'class' => [ 'form-row-wide' ],
'label' => '配送希望日',
'placeholder' => '例: 2024-04-01（空白=指定なし）',
'required' => false,
], $checkout->get_value( 'desired_delivery_date' ) );
// 配送希望時間帯
woocommerce_form_field( 'desired_delivery_time', [
'type' => 'select',
'class' => [ 'form-row-wide' ],
'label' => '配送希望時間帯',
'options' => [
'' => '指定なし',
'am' => '午前中（8〜12時）',
'14-16' => '14〜16時',
'16-18' => '16〜18時',
'18-20' => '18〜20時',
'19-21' => '19〜21時',
],
], $checkout->get_value( 'desired_delivery_time' ) );
// 領収書宛名
woocommerce_form_field( 'receipt_name', [
'type' => 'text',
'class' => [ 'form-row-wide' ],
'label' => '領収書宛名（空白=不要）',
'placeholder' => '例: 株式会社○○ 御中',
], $checkout->get_value( 'receipt_name' ) );
echo '</div>';
} );
// バリデーション
add_action( 'woocommerce_checkout_process', function(): void {
$date = sanitize_text_field( $_POST['desired_delivery_date'] ?? '' );
if ( $date && ! preg_match( '/^\d{4}-\d{2}-\d{2}$/', $date ) ) {
wc_add_notice( '配送希望日はYYYY-MM-DD形式で入力してください。', 'error' );
}
} );
// 注文メタに保存
add_action( 'woocommerce_checkout_update_order_meta', function( int $order_id ): void {
$fields = [
'desired_delivery_date' => sanitize_text_field( $_POST['desired_delivery_date'] ?? '' ),
'desired_delivery_time' => sanitize_text_field( $_POST['desired_delivery_time'] ?? '' ),
'receipt_name' => sanitize_text_field( $_POST['receipt_name'] ?? '' ),
];
foreach ( $fields as $key => $value ) {
if ( $value ) {
update_post_meta( $order_id, '_' . $key, $value );
}
}
} );ステップ3：管理画面の注文詳細にカスタムフィールドを表示する
// functions.php: 注文詳細にカスタムフィールドを表示
add_action( 'woocommerce_admin_order_data_after_shipping_address', function( WC_Order $order ): void {
$delivery_date = $order->get_meta( '_desired_delivery_date' );
$delivery_time = $order->get_meta( '_desired_delivery_time' );
$receipt_name = $order->get_meta( '_receipt_name' );
$time_labels = [
'am' => '午前中（8〜12時）',
'14-16' => '14〜16時',
'16-18' => '16〜18時',
'18-20' => '18〜20時',
'19-21' => '19〜21時',
];
echo '<div class="custom-order-fields">';
echo '<h4>配送・領収書オプション</h4>';
if ( $delivery_date ) {
printf(
'<p><strong>配送希望日:</strong> %s</p>',
esc_html( $delivery_date )
);
}
if ( $delivery_time ) {
printf(
'<p><strong>配送希望時間帯:</strong> %s</p>',
esc_html( $time_labels[ $delivery_time ] ?? $delivery_time )
);
}
if ( $receipt_name ) {
printf(
'<p><strong>領収書宛名:</strong> %s</p>',
esc_html( $receipt_name )
);
}
echo '</div>';
} );ステップ4：注文確認メールにカスタムフィールドを含める
// functions.php: 注文メールにカスタム情報を追加
add_action( 'woocommerce_email_order_meta', function(
WC_Order $order, bool $sent_to_admin, bool $plain_text
): void {
$delivery_date = $order->get_meta( '_desired_delivery_date' );
$delivery_time = $order->get_meta( '_desired_delivery_time' );
$receipt_name = $order->get_meta( '_receipt_name' );
if ( ! $delivery_date && ! $delivery_time && ! $receipt_name ) {
return;
}
if ( $plain_text ) {
echo "========================================\n";
echo "配送・領収書オプション\n";
if ( $delivery_date ) echo "配送希望日: {$delivery_date}\n";
if ( $delivery_time ) echo "配送希望時間帯: {$delivery_time}\n";
if ( $receipt_name ) echo "領収書宛名: {$receipt_name}\n";
} else {
?>
<h2>配送・領収書オプション</h2>
<table cellspacing="0" cellpadding="6" style="width:100%;border:1px solid #e5e5e5">
<?php if ( $delivery_date ) : ?>
<tr>
<th style="text-align:left;padding:6px;border:1px solid #e5e5e5">配送希望日</th>
<td style="padding:6px;border:1px solid #e5e5e5"><?php echo esc_html( $delivery_date ); ?></td>
</tr>
<?php endif; ?>
<?php if ( $receipt_name ) : ?>
<tr>
<th style="text-align:left;padding:6px;border:1px solid #e5e5e5">領収書宛名</th>
<td style="padding:6px;border:1px solid #e5e5e5"><?php echo esc_html( $receipt_name ); ?></td>
</tr>
<?php endif; ?>
</table>
<?php
}
}, 10, 3 );ステップ5：チェックアウトページのレイアウトをCSSで調整する
/* style.css: チェックアウトレイアウトの調整 */
/* 2カラムを1カラムに変更（モバイルファースト） */
.woocommerce-checkout .col2-set {
display: block;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
float: none;
width: 100%;
}
/* カスタムフィールドセクションのスタイル */
#custom-checkout-fields {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 1.5rem;
margin-top: 1.5rem;
background: #f9f9f9;
}
#custom-checkout-fields h3 {
margin-top: 0;
font-size: 1.1rem;
color: #1d2327;
}
/* 注文概要をスティッキーに */
@media ( min-width: 768px ) {
.woocommerce-checkout #order_review {
position: sticky;
top: 2rem;
}
}注意事項
woocommerce_checkout_fieldsフィルターで変更できるのはbilling・shipping・account・orderグループのフィールドです。カスタムで追加したフィールドはこのフィルターでは管理できません。- チェックアウトフィールドのバリデーションは
woocommerce_checkout_processで行い、wc_add_notice()でエラーを追加してください。wp_die()は使わないでください。 - 注文メタへの保存は
woocommerce_checkout_update_order_metaではなく、WooCommerce 7.1以降ではwoocommerce_checkout_order_createdの使用を推奨します。
まとめ
WooCommerceチェックアウトのカスタマイズは「woocommerce_checkout_fieldsフィルターでデフォルトフィールドを変更→woocommerce_after_order_notesフックでカスタムフィールドを追加→woocommerce_checkout_processでバリデーション→woocommerce_checkout_update_order_metaで注文メタに保存→woocommerce_admin_order_data_after_shipping_addressで管理画面に表示→woocommerce_email_order_metaでメールに含める」の流れで整備します。関連記事：WordPressのWooCommerceメールテンプレートをカスタマイズする方法、WordPressのWooCommerce商品タイプをカスタマイズする方法。