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

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

前回までのレッスンで作成したサンプル商品を使って、WooCommerceサイトで商品購入から支払いまで動作確認をしてみましょう。

file

 

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

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

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

まだフロントページから商品ページへの直接リンクはありません。 下記どちらかの方法で商品ページを開いてください。

A:フロントページ - タイトル下のショップリンクより、表示された商品をクリック。

file

B:商品エディター画面で、タイトル下にあるパーマリンクをクリック。

file

↓ 

商品のページが開けたら「カートに入れる」でショッピングカートに追加します。

file

 

カート画面

カートボタンをクリックすると「カートに追加しました」というアラートが表示されます。

file

アラート部分の右側に表示されている「カートを表示→」をクリックして、カート画面を見てみましょう。

file

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

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

A:クレジットカード決済

注文画面では注文者名や住所・支払方法の選択画面を入力して頂きます。 今回は動作確認ですので、必須項目部分だけ簡単に情報を入力してください。

file

 

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

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

file

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

file

 

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

file

B:銀行振込・郵便振替の場合

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

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

file

 

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

file

 

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

file

 

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

file

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

file

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

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

注文が入るとWoocommerce部分に表示が出ます。 管理画面-ダッシュボードを開いてみて下さい。

file

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

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

A:クレジットカード払いの確認

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

file

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

file

 

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

file

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

●stripeサイトでの確認

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

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

file

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

file

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

B:口座振替の場合の確認と操作

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

file

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

 

ステータスが「保留中」になっている項目が口座振替で注文した分です。

file

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

 

注文詳細の画面を開いて、やってみましょう。 構造はA:レジットカード払いの場合と全く同じです。

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

file

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

 

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

file

注文メモ機能

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

file

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

 

これで基本的な動作の確認は完了です。