WordPress で EC サイトが構築できる WooCommerce プラグインを導入して、自社で実際に使っている技術情報を紹介しています。

今回は、決済ページのフォームに関する変更を行う方法を紹介します。

追加情報のテキスト、デフォルトでは伝わりません

決済ページには「追加情報」と呼ばれる、購入者の要望や連絡事項などを入力する欄があります。

この入力欄の活用例の一つとして、配送タイミングの要望があります。「平日の日中は仕事で受け取りできないから、配送は平日なら午後19 – 21 時の間か、土日を希望できると嬉しい」とか。

で、WooCommerce の導入直後は、次のように「？」と思うようなテキストが書かれています。「注文メモ？配達に際して特に注意すること？」おそらくこのままでは、意味が伝わらないと思います。

なので、次のように意味の通じる日本語に変更しましょう（テキストは一例です）

追加情報のテキストを変更しよう

というわけで、ここからが本題です。「woocommerce_checkout_fields」フィルターを使うと、注文ページのフォームに関する変更ができます。

次のコードは「追加情報」のラベルとプレースホルダーを変更しています。

function customize_order_comments_field( $fields ) {
 // 注文メモ（order_comments_field）のラベルを変更
 $fields['order']['order_comments']['label'] = '備考欄';

 // 注文メモ（order_comments_field）のプレースホルダーを変更
 $fields['order']['order_comments']['placeholder'] = 'ご注文に関するご要望や連絡事項がございましたら、こちらにご記入ください。';

 return $fields;
}

add_filter( 'woocommerce_checkout_fields', 'customize_order_comments_field' );

やれることは他にもあります。「任意の入力項目を必須にする」とかもできます。

興味があるようでしたら「woocommerce_checkout_fields」の引数「$fields」に格納されている配列データを dump などして覗いてみてください。

株式会社 AnimaGate のアドベントカレンダーに参加しています。