WordPressのWooCommerceプラグインを使って予約注文ページを作成する際、いくつかの設定で戸惑うことがありました。特にチェックアウトフィールドの設定、バリエーション商品の登録、決済方法の調整で時間を要しました。この記事では、それらの解決方法を具体的に紹介します。
WooCommerceプラグインで予約注文サイトを作った理由
最初はGoogleフォームなどのアンケートフォームを使う案も出ました。しかし、お客さんにとって入力の大変だったり、複数商品をまとめて注文するときの合計金額がわかりにくい、などの理由で、ショップカートのシステムを使うことにしました。
今回は、WordPressサイトにWooCommerceプラグインを導入する方法を選択しました。
「ショップカート」の仕組みではあるものの、支払い方法を選択せず、文言を変更することで「予約」として利用することができました。WooCommerceを使って注文を受け付けるメリットは、必要な情報を過不足なく受け取れ、注文内容のレポートも確認しやすいことです。予約受付メールなどを送ることもできます。
テーマ選択はシンプルさを重視（Twenty Twenty-Four）
予約注文サイト（ショップサイト）の見た目に大きく影響するのが、テーマです。WooCommerceと組み合わせて使うテーマは複数の選択肢があります。
- よく使われるのはStorefrontテーマです。これは楽天市場のような本格的なショップサイトを作る際に適しています。
- 今回は、Twenty Twenty-Fourテーマを選択しました。スマートフォンで表示した時に商品をピックアップして注文できればよいという要件だったので、モバイル表示でシンプルなテーマにしました。
予約注文と現地決済に対応する
配送が不要な商品については、商品ごとに「バーチャル商品」にチェックを入れます。これは手渡しで販売する場合の注文受付に使用できます。バリエーションごとに商品コード、価格、在庫状況などを個別管理できる点がメリットです。
また、現地で現金決済する場合には、決済方法を調整します。WooCommerceでは「オフラインで支払いを受け取る」の中の「直接銀行振り込み」を利用できます1。
この設定では表示テキストを「会場でのお支払い」などに変更できます。こうすると注文時に支払い情報の入力が不要になり、現地での手渡し販売に対応できます。
チェックアウトフィールドの日本語化で困った問題
設定変更とテンプレート編集の2つのアプローチ
WooCommerceをインストールした直後、支払いページの項目が英語表記になっていました。これを日本語に変更する方法は2つあります。
- 一つ目はテンプレートファイルを直接編集する方法。
- 二つ目はプラグインの設定で変更する方法です。
今回は「Checkout Field Editor for WooCommerce」プラグインを使用することにしました。
プラグインを導入すると、WooCommerceの設定メニューに「購入手続きフォーム」という項目が追加されます2。
購入手続きフォームの設定では、ラベルやプレースホルダーの文章を日本語に変更し、表示させたくない項目（例えば、国など）の「有効」チェックを外しました。また、追加フィールドで、注文全体へのメモやラジオボタンによる選択などを入れられます。例えば、ラッピングの希望などを受け付ける際に便利です。
ここには2種類の設定があります。
- クラシックチェックアウトフィールズは従来の方式で、各フィールドを個別に設定できます。
- ブロックチェックアウトフィールズは最近のWooCommerceでデフォルトになっている新しい方式です3。
クラシック方式とショートコードの設定手順
はじめ、ブロックチェックアウトフィールズの使い方がよく分からなかったため、クラシックチェックアウトフィールドを使用しました。
ただし、ここで重要な点があります。クラシックチェックアウトフィールズを実際の購入手続きフォームで表示するには、テンプレートの変更が必要です。購入手続きのテンプレートの内容を一旦削除し、そこにショートコードを追加する必要がありました。このショートコードによって従来型のチェックアウトフィールドが表示されます。
この部分が分からずに「設定を変更したのに反映されない」と悩みました。テンプレートでは項目がロックされていて変更できなかったからです。
WordPressメニューの「外観」ー「エディタ」から「テンプレート」にある「
結果的には[woocommerce_checkout]というショートコードを購入手続きページに追加すると、クラシックチェックアウトフィールドが正しく表示されました4。この手順を知らないと、プラグインで設定変更しても反映されません。
バリエーション商品の登録でつまずいた設定
商品にはサイズ違いや色違いなどの選択肢を設定する必要がありました。
1つの商品ページで複数の選択肢を提供するには、「バリエーション商品」という機能を使います5。です。
属性とバリエーションの関係
WooCommerceでバリエーション商品を作るには、まず「属性」を理解する必要があります。
「属性」とは、商品の特徴を表す項目のことです。例えば「サイズ」という属性に「S、M、L」という値を設定します。次に「色」という属性に「赤、青、緑」という値を設定します。
次に、商品の設定で「バリエーションのある商品」を選択します。
先ほど設定した属性を組み合わせたバリエーションを自動生成することもできます。「赤のSサイズ」「青のMサイズ」といった具合に、すべての組み合わせが作られます。
各バリエーションについて価格を設定し、有効化する必要があります。価格は、まとめて設定することもできました。この作業を忘れると、商品が購入できない状態になります。
サイト公開前のプライベート確認機能
ちなみに、WooCommerceには完成前のサイトを安全にテストする便利な機能があります。
サイトの公開状態を「まもなく公開予定」に変更すると、サイトにアクセスできなくなります。しかしプライベートリンクを作成すれば、プロジェクトチーム内で作成中のストア情報を確認できます。完成したら全体に公開すれば正式オープンです。
まとめ
WooCommerceでの予約注文サイト構築では、チェックアウトフィールドのカスタマイズ時にクラシック方式とブロック方式の選択、そしてショートコードによるテンプレート変更が重要でした。バリエーション商品では属性の設定後、各バリエーションの価格設定と有効化が必要です。現地決済では「直接銀行振り込み」の表示テキスト変更により手渡し販売に対応できます。商品販売だけでなく注文受付システムとしても活用できることが確認できました。
- 「直接銀行振り込み」は海外のBACS送金システム用の設定ですが、表示テキストを変更することで現地決済や手渡し決済として活用できます。日本国内向けには「Japanized for WooCommerce」プラグインで「店頭払い」機能も利用可能です。 – 日本向けの決済方法や配送希望日時の設定を追加できる Japanized For WooCommerce の使い方
- Checkout Field Editor for WooCommerceプラグインをインストールすると、WooCommerceの設定項目が拡張され、チェックアウトフォームの各フィールドを詳細に設定できるようになります。 – チェックアウトページに表示されるフィールドをカスタマイズできる：Checkout Field Editor for WooCommerce
- WooCommerce 8.3以降では、チェックアウトページがブロックエディタベースに変更され、従来のショートコードベースからブロックベースがデフォルトになりました。 – WooCommerceのチェックアウト項目のカスタマイズが出来なくなった！
- ブロックチェックアウトからクラシックチェックアウトに変更する場合は、購入手続きページのコンテンツを削除して、ショートコードのみを配置する必要があります。 – WooCommerceのチェックアウト項目のカスタマイズが出来なくなった！
- バリエーション商品は、同一商品で色やサイズなど複数の選択肢を持つ商品を1つの商品ページで管理できる機能です。各バリエーションごとに価格、在庫、画像などを個別設定できます。 – WooCommerceでバリエーションのある商品を作成する方法