WooCommerceを使ってWordPressサイトをオンラインショップ化してみた

WordPressを使ったECサイトの作り方が知りたかったので、今回WooCommerceというプラグインを使って実施に簡単なものを作ってみました。

このページでは、その手順をメモとして残しておきます。

全体の流れ

流れというほどのものではないですが、次のような手順で構築しています。

  1. WooCommerceプラグインをインストール
  2. もろもろ設定(商品とか、決済方法とか)
  3. 決済のテスト
  4. 本番切替

まぁ、基本的にWooCommerceを入れて設定するだけなので簡単ですが、自分好みのデザインにしたい場合は、WooCommerceの構成に合うようにテーマを作る必要があります(WooCommerce対応のテーマもいくつかあります)。

では、実際にECサイト解説までの流れを解説していきます。



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

プラグイン追加ページから「WooCommerce」を検索しダウンロード、有効化します。

有効化すると、設定画面が開くので、進めていきます。

ストアの詳細

あなたの所在地を登録します。

業界

開設予定のサイトのジャンルを登録します。

商品タイプ

販売商品のタイプを登録します。

ビジネス詳細

販売時期などを登録します。

テーマ

利用するテーマを選択します。

以上で、設定完了です。

登録すると、以下のように固定ページにWooCommerceで使うページが追加されます。

商品を登録する

管理メニューに「WooCommerce」関連のメニューが追加されているので、ここで商品の登録やら細かい設定をしていきます。

まずは、商品の登録をしましょう。

メニューから「WooCommerce」-「商品」を選択します。

新規追加」をクリックします。

商品登録の画面が表示されるので、商品名や説明、値段などを登録します。

実際にこの内容で、保存して画面を確認してみると次のようになりました。

値段をドル → 円に変更する

ダウンロードした段階では、通貨が「ドル」になっているので、「円」に変更します。

また、日本円は小数点がないので、「小数点以下の桁数」を「0」にしておきましょう。

設定変更を保存し、画面を確認すると、円での表記に変わっています。

配送料の設定

続いて、送料の設定をします。

「設定」画面を開いて「送料」をクリックしてくてください。

送料の設定画面が開くので、配送料を入力します。

以下の例は「日本」で設定していますが、都道府県別に送料を変更することも可能です。




支払い方法の設定

続いて、お客さんに購入してもうら際の決済方法の設定を行います。

決済の方法は「クレジットカード」、「PayPal」、「代金引換」、「銀行振込」、「小切手支払い」があります。

今回はこの中から特に人気の高い「クレジットカード」と「PayPal」を設定する方法を紹介します。

1. クレジットカード支払いの設定方法

WooCommerceのクレジット決済にはStripeを使います。

利用するにはアカウント登録が必要なので、まだ登録していない方は先に登録を済ませましょう。

Stripe公式

登録方法に関する詳しい説明は以下の記事を参考にしてください。

WordPressサイトに決済サービスStripeを組み込む方法

 

アカウントが登録できている場合は、WooCommerceでStripeを使うのに必要なプラグイン「WooCommerce Stripe Payment Gateway」を使用します。

プラグインの追加画面でダウンロードして有効化してください。

有効化したら、プラグインの設定画面を開いてください。

開いたら、Stripeを有効化します。

テストを実施するために「公開鍵」、「秘密鍵」、「Webhook」を設定します。

「公開鍵」、「秘密鍵」はStripeの管理画面の「開発者」-「APIキー」画面で確認できます。

「Webhookシークレット」はStripe管理画面の「開発者」-「Webhook」から取得します。

画面を開き「エンドポイント追加」をクリックしてください。

次のような画面が開くので、「エンドポイントURL」、「説明」、「送信イベント」を設定して追加します。

エンドポイントURLは「WooCommerce」の決済画面に書いてあります。

送信イベントは「すべてのイベントを送信」をクリックして追加します。

必要事項が入力できたら、画面右下の「エンドポイント追加」をクリックします。

Webhookの登録が完了したら、以下のようが項目が表示され流ので「署名シークレット」の「クリックして表示」をクリックします。

表示されたコードをWooCommerce側に登録します。

以上で、設定完了です。

試しに、商品の購入画面を見てみると、クレジットカードで支払いできるようになっています。

試しに購入してみると、きちんと購入画面が表示されています。

Stripe側のレポートにも反映されています。

テストが完了し本番モードに着替える場合は、プラグインの設定画面で「テストモード」をのチェックを外し、本番用の「公開鍵」、「秘密キー」、「Webhookシークレット」を設定すればOKです。

2. PayPalの設定方法

WooCommerceの設定画面から「セットアップ」をクリックします。

下のような画面が開くので、「PayPal Standardを有効化」にチェックを入れ、「PayPalメール」にあなたのPayPalアカウントのメールアドレスを入力します。

また、最初にテストを実施するため「PayPalサンドボックス」にもチェックを入れ保存します。

前に画面に戻って、「有効」をONにし、保存します。

以上で、設定完了です。

商品の購入画面に行くと、PayPal決済ができるようになっているので、支払い方法で「PayPal」を選択し、「PayPalに進む」をクリックします。

PayPalの画面(テスト用)が開くので、PayPalの開発用メールアドレスとパスワードを入れて「ログイン」をクリックします。

MEMO

PayPalの開発用アカウントの取り方はこちらを参照。

PayPal決済の開発用アカウントの取得方法

決済画面が表示されるので、「同意して払う」をクリックします。

これで、購入完了です。

PayPalのテスト用画面を確認すると、きちんと支払いできていることがわかります。

WooCommerce側にもログが出ています。

これでPayPalテストは完了なので、

本番環境に切り替えたい場合は、決済の設定画面で「PayPalサンドボックス」のチェックを外せばOKです。

最後に

以上、WooCommerceを使ったECサイトの作り方でした。

もう少し触ってみてわかったことや、何か発見があれば随時、情報追記していきますね。

ECサイト作りに興味がある方は参考にしてみてください。

created by Rinker
ソシム
¥2,860 (2022/12/06 08:40:27時点 Amazon調べ-詳細)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA