注文時の動作を確認しよう | SkillhubAI(スキルハブエーアイ)

注文時の動作を確認しよう

前回までで作成したサンプル商品を使って、WooCommerceの動作確認をしてみましょう。

file

 

お客様→商品注文からお支払い ショップ→注文と支払いの確認 それぞれ、どのように行われるのかを見ていきます。

注文の流れ(お客様側操作)

では早速、登録した商品を購入してみましょう。

まだフロントページから商品ページへの直接リンクはありません。 フロントページ - タイトル下のショップリンクを使って、表示された商品をクリック。

file

もしくは 商品のエディター画面のタイトル下にあるパーマリンクをクリック。

file

どちらかの方法で、商品の詳細ページを開いて下さい。

 

商品を一つ「カートに入れる」でショッピングカートに追加します。

file

 

1.カート画面

カートに追加しました、というアラートが表示されます。

file

右側にある「カートを表示→」をクリックしてカート画面を見てみましょう。

file

今まで設定してきたバリエーション・消費税などが反映されていますね。 送料は地域別送料を設定しているので、住所情報が登録されていないユーザーの場合はまだ表示されません。

お支払いへ進む、をクリックして注文画面に行きましょう。

 

2.注文画面

注文画面では注文者名や住所・支払方法の選択画面を入力して頂きます。 今回はローカル環境でのテストですので、必須項目部分に簡単に情報を入力していってください。

file

 

注文画面の右下、オレンジの線部分が支払方法の選択部分です。 まずクレジットカードの支払いを試してみましょう。

stripeのテストモードではカード番号「4242424242424242」と入力するように指示されています。画面表示に従って必要箇所を入力していきます。

file

入力が完了したら、画面右下にある「注文する」ボタンをクリック。

file

 

少しの間、処理のためにローダーが回り、 注文受付の完了画面が表示されます。 クレジットカードの場合は、お客様側の操作はここで終了ですね。

file

 

●銀行振込・郵便振替の場合

銀行振込・郵便振替で注文したらどうなるのかを見てみましょう。 もう一度商品をカートに入れて注文画面(支払方法の選択画面)まで進みます。

支払方法の選択部分で、銀行振込もしくは郵便振替をクリックしてください。

file

 

この画面上で口座情報は表示されず、簡単なメッセージが表示されます。 この文言はWooCommerce設定 > 決済 > 口座登録画面で設定したものです。

file

 

銀行振込もしくは郵便振替にチェックを入れた状態で「注文する」ボタンをクリック。 表示される注文完了画面では決済方法が銀行振込になり、 注文番号等の下に設定した銀行口座が表示されます。

file

 

銀行口座が複数表示されているし分かりにくい……という時には WooCommerce設定 > 決済 > 口座登録画面で「説明書き」を入力しましょう。

file

注文画面に入力した注意書きが表示されるようになります。

file

注文確認(ショップ側操作)

次はショップサイドの操作、入った注文やstripeでの入金確認を行っていきます。

注文が入るとWoocommerce部分に表示が出ます。 ショップサイトのダッシュボードを開いてみて下さい。

file

設定により表示位置には違いがありますが、 「Woocommerceステータス」というパネルに注文情報が表示されていますね。 それぞれ「○件の注文」部分が注文確認画面にリンクしています。

在庫数を設定している場合は、在庫が少なくなった商品も教えてくれます。

1.クレジットカード払いの確認

手配待ちになっている方をクリックしてみましょう。

file

注文画面の「処理中」一覧に移動しました。 注文欄にある、注文IDと注文者名部分をクリックします。

file

 

注文詳細画面が開きます。 請求先情報や配送先、注文の詳細などが確認できます。

file

クレジット処理が正常に行われた・振り込みが完了した場合などは注文メモ項目を使って管理することも可能です。stripeと連動しているカード決済などの場合は、自動的に注文・処理情報を取得してくれますよ。

stripeサイトでの確認

カード決済処理が行われたかどうかは、【WooCommerce設定④Stripeとの連動】でも使用したstripeのダッシュボードからも確認できます。

https://dashboard.stripe.com/ を開いてサインインしてみましょう。

file

少し下にスクロールダウンすると、クレジットカードで支払われた金額のグラフが表示されています。

file

指定期間のレポートを表示する機能も搭載されています。 実際にショップを運営する際には役に立ってくれるでしょう。

2.口座振替の場合

口座振替での支払いを選択されたご注文の確認を行います。 左メニュー Woocommerce > 注文 をクリックしてください。

file

※ダッシュボードの「Woocommerceステータス」入金待ち部分からも移動できます。 file

 

今回の場合はステータスが保留中になっているものが口座振替で注文した分です。

file

連動しているクレジットカード払い(stripe)とは異なり、 口座振替などは自分で入金を確認→ステータス変更を行っていく形になります。

 

注文詳細の画面を開きます。 構造は1.クレジットカード払いの場合と全く同じです。

ステータスは「状況:」というプルダウンを使って変更します。 file

file

まだ振り込まれていないときは支払待ち、 入金が確認出来たら処理中、 発送完了もしくは到着確認で完了…なルールを決めておくと良いでしょう。

 

ステータスを変更したら「注文 操作」部分にある更新ボタンを押して保存しましょう。

file

注文メモ機能

注文詳細画面にある「注文メモ」では、ショップ運営に必要なメモを自由に残せます。 入金確認日、商品発送日などの履歴を入れておくと便利ですね。

file

メモを追加した場合も、 「注文 操作」部分にある更新ボタンを押して保存します。