WordPressで予約注文システムを作る – WooCommerceで対面決済対応

by

背景と目的

絵本やグッズの販売で、ネット上で予約を受け付けて実際の決済は対面で行いたいケースがあります。イベント会場での受け渡しや店舗での引き取りなど、対面販売の良さを活かしながらオンラインの便利さも取り入れたシステムです。

この記事では、WordPressとWooCommerceを使って、予約注文から受け渡し日程選択まで対応できるシステムの構築方法を説明します。

システムの全体像

構築するシステムの流れは次のようになります。

お客様がサイトで商品を閲覧し、欲しい商品を選択します。注文時に受け渡し日程を2つの選択肢から選び、連絡先情報を入力します。決済は行わず、予約のみが確定します。販売者は注文情報を確認し、指定された日程で商品を準備して対面で受け渡しと決済を行います。

このシステムなら、お客様は事前に商品を確保でき、販売者は需要を把握して適切な在庫準備ができます。

WooCommerceの基本設定

プラグインのインストール

WordPressの管理画面にログインし、「プラグイン」→「新規追加」から「WooCommerce」を検索してインストールします。有効化すると、セットアップウィザードが起動します1。

セットアップでは、店舗の基本情報を入力します。住所や通貨は日本の設定にしておきます。商品の種類では「物理的な商品」を選択しますが、後で配送設定を調整します。

WooCommerceの設定画面で重要な項目を調整します。

  • 「一般」タブでは、店舗の住所と通貨を確認します。日本円（JPY）に設定されていることを確認してください。
  • 「商品」タブでは、在庫管理を無効にします。予約システムでは在庫切れの概念がないためです。商品カタログでは、価格表示を「ログインユーザーのみ」に設定すると、価格を非表示にできます。ただし、今回は価格を表示したままにします。
  • 「税」タブでは、消費税の設定を行います。日本では10%に設定するのが一般的です。

決済方法は対面決済の説明文にする

対面決済の設定

「決済」タブで決済方法を設定します。クレジットカードやPayPalなどの自動決済は無効にし、「銀行振込」や「代金引換」を利用して対面決済を表現します。

実際には「銀行振込」の設定を使い、説明文を「会場でのお支払い」などに変更すると分かりやすくなります。この方法なら、お客様は決済画面を通過しますが実際には支払いは発生しません。

注文ステータスの管理

注文が入ると「処理中」のステータスになります。商品を準備完了したら「完了」に変更し、実際の受け渡しが終了したら「配送済み」にします。このようにステータスを活用すると、注文の進捗を管理できます。

商品登録の方法

仮想商品としての設定

商品を登録する際は「仮想」にチェックを入れます。これにより配送設定が不要になります。仮想商品は形のないサービスや、配送が不要な商品に使用する設定です2。

商品データの「一般」タブで価格を設定します。「ダウンロード可能」のチェックは外したままにします。

「在庫」タブでは、「在庫を管理しますか？」のチェックを外します。これにより、在庫切れによる販売停止を防げます。

商品説明の工夫

商品の説明文では、受け渡し方法や日程について説明を加えます。「イベント会場でのお渡しになります」「受け渡し日程は注文時に選択してください」などの情報を記載すると、お客様の理解が深まります。

商品画像も重要です。表紙や商品の全体像が分かる写真を複数枚登録しておくと、お客様が商品を選びやすくなります。

受け渡し日程選択機能の実装

有料プラグイン WooCommerce Product Add-Ons を使った方法

受け渡し日程の選択機能には「WooCommerce Product Add-Ons」プラグインを使用します。このプラグインを使うと、商品ページに追加の入力フィールドを設置できます3。

プラグインをインストール後、商品編集画面に「Product Add-Ons」のタブが追加されます。ここで「Select box」タイプのフィールドを作成し、選択肢として2つの日程を設定します。

例えば「受け渡し日程」というラベルで、「2024年3月15日（土）午後」「2024年3月16日（日）午前」のような選択肢を用意します。

カスタムフィールドでの実装

プラグインを使わない方法として、functions.phpにカスタムコードを追加する方法もあります4。この方法は技術的な知識が必要ですが、より細かい制御が可能です。

// 商品ページに日程選択フィールドを追加
add_action('woocommerce_before_add_to_cart_button', 'add_delivery_date_field');

function add_delivery_date_field() {
    echo '<div class="delivery-date-field">';
    echo '<label for="delivery_date">受け渡し日程を選択してください：</label>';
    echo '<select name="delivery_date" id="delivery_date" required>';
    echo '<option value="">選択してください</option>';
    echo '<option value="2024-03-15-pm">2024年3月15日（土）午後</option>';
    echo '<option value="2024-03-16-am">2024年3月16日（日）午前</option>';
    echo '</select>';
    echo '</div>';
}
Code language: PHP (php)

このコードを子テーマのfunctions.phpに追加すると、商品ページに日程選択フィールドが表示されます。

注文情報の管理

注文詳細の確認

お客様が注文すると、WordPressの管理画面「WooCommerce」→「注文」で注文内容を確認できます。注文詳細には、選択された受け渡し日程や連絡先情報が表示されます。

注文一覧では、注文番号、お客様名、注文日、ステータスが表示されます。受け渡し日程でソートしたい場合は、カスタムフィールドを利用した絞り込み機能を追加できます。

問い合わせ対応の準備

お客様からの問い合わせに備えて、よくある質問とその回答を準備しておきます。受け渡し場所への交通手段、当日の連絡先、キャンセル方法などは必ず質問されます。

サイト内にFAQページを作成し、重要な情報はそこにまとめておくと効率的です。

顧客への連絡

注文が入ると、お客様に自動でメールが送信されます。メール設定では、注文確認メールの内容をカスタマイズできます。

「WooCommerce」→「設定」→「メール」で、注文確認メールのテンプレートを編集します。受け渡し場所や持参物についての案内を追加すると親切です。

テスト注文の実施

システムを公開する前に、必ずテスト注文を行います。実際のお客様と同じ流れで注文を進め、メール送信や注文データの記録が正しく動作することを確認します。

テスト用の商品を作成し、異なる日程を選択して複数回注文してみると、システムの動作を確認できます。

注文の管理方法

注文が増えてきた場合は、表計算ソフトにエクスポートして管理する方法もあります。WooCommerceには注文データをCSV形式でエクスポートする機能があります。

受け渡し日程ごとに注文をグループ化し、当日の準備に役立てることができます。商品別の集計も可能なので、どの商品がどれだけ予約されているかも把握できます。

セキュリティとデータの保護

顧客の個人情報を取り扱うため、SSL証明書の導入は必須です5。「https://」で始まるURLでサイトが表示されることを確認してください。

WordPressとプラグインは常に最新版に更新し、セキュリティを保ちます。定期的なバックアップも欠かせません。

実装時の注意点

まとめ

WordPressとWooCommerceを使用することで、予約注文から受け渡し日程選択まで対応した販売システムを構築できます。仮想商品設定により配送処理を省略し、カスタムフィールドやプラグインで日程選択機能を実装します。決済方法を対面払いに限定することで、オンライン予約と対面販売の利点を両立したシステムが完成します。

  1. WooCommerceは世界シェア30%以上を占める最も人気のあるWordPress用ECプラグインです。無料で使用でき、豊富な拡張機能があります。 – WooCommerce公式統計データ
  2. WooCommerceでは商品タイプを「シンプル商品」「グループ商品」「外部商品」「可変商品」から選択できます。仮想商品設定は配送重量や寸法の入力を不要にし、配送方法の選択画面をスキップします。 – WooCommerce公式ドキュメント：商品タイプについて
  3. このプラグインは年額$49の有料プラグインです。無料の代替手段として「Extra Product Options」や「YITH WooCommerce Product Add-Ons」などもありますが、機能や安定性に差があります。 – WooCommerce Product Add-Ons公式ページ
  4. functions.phpファイルの編集は慎重に行う必要があります。構文エラーがあるとサイト全体が表示されなくなる可能性があるため、必ず子テーマを使用し、編集前にバックアップを取ることを強く推奨します。 – WordPress Codex：子テーマ
  5. 2018年からGoogleは全てのHTTPサイトを「保護されていない通信」として警告表示するようになりました。ECサイトでは特に、個人情報保護の観点からSSL化は法的にも技術的にも必須要件です。 – Google Security Blog：A secure web is here to stay