この記事の内容はこちら
WooCommerceとは?
WooCommerceは、WordPressでECサイトを作成するためのプラグインです。他にもECサイトが作成できるサービスとしては、ShopifyとかStoresなどがありますが、ブログも一緒に運営していきたいとか、一からECサイトをDIYしたいというのであれば、WooCommerceを使ってみると良いのかなと思います。
WordPressでサイトを作成していくので、いろんなプラグインを組み合わせれば、いろいろ実装することができます。物販はもちろん、noteのようなデジタルコンテンツを販売したり、オンラインコースを販売し、さらには同じサイト内でコースを提供したり、会員サイトだって作成することもできます。
たくさんの可能性があるので、DIYが好きな人にとってはとてもおすすめです。DIYと言っても、商品を販売する仕組みを構築するのは全く難しくありません。この記事を参考にしていただければ、1日で作成できると思います。遅くても、2日くらいでできるはずです。
WooCommerceに適したテーマをインストールする
WooCommerce用に作成されたテーマはたくさんありますが、今回はStorefrontというWooCommerceが公式に配布しているテーマを利用していきたいと思います。
WooCommerceプラグインをインストールする方法
次に、WooCommerceをインストールしていきます。一般的なプラグインと違って、有効化するまでの設定がちょっと時間がかかりますので、丁寧に確認していきたいと思います。
まずは、「プラグイン」の「新規追加」に移動し、検索窓で「WooCommerce」と検索をかけてみてください。すると、左上にWooCommerceのプラグインが表示されるので、「今すぐインストール」して「有効化」します。
すると、このポップが表示されます。これは、WooCommerceにデータを自動的に送信して、そのデータを今後の改善に役立ててもらうかどうかというものです。もし、WooCommerceの改善に貢献したいというのであれば、チェックボックスにチェックを入れ、「次へ」ボタンをクリックします。別に貢献したくないという場合は、チェックを外したまま「次へ」ボタンをクリックしましょう。
次に、このようなページに遷移します。ここから何ステップかでWooCommerceのインストールに必要な基本的な設定をしていきます。
次に、決済の設定をしていきます。ここで、決済手段を導入できるわけではありません。プラグインをインストールするかどうか聞かれているだけです。基本的にStripeは使用していくと思うので、Stripeは有効化して、チェックボックスにチェックを入れ、その下の欄にメールアドレスを入力します。ただ、後ほどStripeの決済を導入する方法を詳しくご紹介していくので、ここは無効にしておいてもOKです。
次に送料の設定です。こちらも後ほど詳しい設定をご紹介していきますので、有効化されている2つの項目を両方とも無効化して、「次へ」のボタンをクリックしてしまってOKです。
次に、「おすすめ」というページに移動してきますが、ここはスキップでOKです。MailChimpというEメール配信サービスと連携したりできますので、必要があればチェックを入れておいてください。使用しない場合は、全ての項目からチェックを外して「次へ」もしくはスキップします。
*Storefrontのテーマは、こちらからもインストールできるようになったみたいです。
次のページでは、Jetpackというプラグインをインストールするかどうか聞かれますが、特に必要がなければ、スキップします。
いよいよ最後の項目です。このページのトップでは、WooCommerceからECサイトの運営や商品・サービスのアップデートなどのメルマガを受け取りたい場合は、空欄にEメールアドレスを入力して、「はい、お願いします!」ボタンをクリックしましょう。特に必要がなければ、「ダッシュボードを表示」というボタンをクリックして、WordPressのダッシュボードに移動します。
WooCommerceで初期設定をする方法
このセクションからは、WooCommerceの初期設定の方法をご紹介していきます。
一般の設定
- 番地:会社もしくは自宅の番地
- 建物名・部屋番号:会社もしくは自宅の建物名と部屋番号(任意)
- 市区町村:会社もしくは自宅の市区町村名
- 都道府県:会社もしくは自宅の都道府県名
- 郵便番号:会社もしくは自宅の郵便番号
- 販売を展開する地域:基本的に「日本」を選択
- 配送可能地域:デフォルトでOK
- お客様の基本地域:デフォルトでOK
- 税金を有効化:決済時に税金額を表示させたい場合はチェック
- クーポンを有効化:クーポンを使用する場合は「クーポンの使用を有効化」にチェック。また、複数のクーポンを有効化したい場合は、「逐次クーポン割引を計算します」にもチェック。
- 通貨:デフォルトの日本円(¥)でOK
- 貨幣記号の表示位置:日本円の場合はデフォルトの「左」でOK
- 3桁ごとの区切り文字:デフォルトでOK
- 小数点の区切り文字:デフォルトでOK
- 小数点以下の桁数:デフォルトでOK
商品の設定
一般
- ショップページ:通常ショップページ(商品一覧ページ)が設定されていますが、別のページに変更することも可能。
- 「かごに入れる」の処理:商品をかごに入れた瞬間にカートのページに飛ばしたい場合は、「正常に追加された後、カートのページにリダイレクトします。」にチェック。カートページに飛ばさずに、かごに商品が追加されるだけにしたい場合は「AJAXはアーカイブの「カートに追加」ボタンを有効にします。」にチェック。
- プレースホルダーの画像:商品画像を設定していない場合に使用する画像のURLを追加する。
- 重量単位:デフォルトでOK
- 寸法単位:デフォルトでOK
- レビューを有効化:各商品にレビューを表示させたい場合は「商品のレビューを有効化する」にチェック。商品を購入した人からのレビューだということ示したい場合は「カスタマーレビューのために「承認」のラベルを表示する」にチェック。この場合、商品を購入していない人もレビューできてしまいます。そもそも、商品を購入してくれた人にしかレビューしてもらいたくないという場合は、「レビューは「確認が取れている所有者」だけが残すことができる」にチェック。
- 商品の評価:レビューをもらう際に5つ星の評価もしてもらいたい場合は「レビューで星の評価を有効にする」にチェック。さらに、その星の記入を必須にしたいのであれば、「オプションの評価ではなく、星の評価が必要です。」にもチェック。
在庫
- 在庫管理:物販などで在庫を表示する必要がある場合は「在庫管理を有効化」にチェック。
- 在庫保持(分単位):デフォルトの在庫数を記入。商品毎に設定することも可能。
- 在庫通知:在庫が少なくなったことを通知してほしい場合は「在庫低下通知を有効化」にチェック。在庫が切れたことを通知してほしい場合は「在庫切れ通知を有効化」にチェック。
- 通知受信者:在庫の通知を受けるEメールアドレスを入力。
- 在庫低下を知らせる数値:在庫がどれくらいになったら在庫低下の通知を受けるのか数値を記入。
- 在庫切れを知らせる数値:在庫切れなので「0」でOK。
- 在庫切れの表示:チェックを入れておくことで、在庫切れの商品はショップページなどから非表示になる。
- 在庫表示形式:ドロップダウンから在庫に関する好きな表記を選択。
ダウンロード商品
デジタルコンテンツを販売する際に必要になってくる項目にはなりますが、基本的にはデフォルトのままでOKです。
- ファイルダウンロード方法:ファイルの配布方法を選択。
- アクセス制限:ファイルをダウンロードするのをログイン済みの人に限定したい場合は「ダウンロードには、ログインが必要です」にチェックを入れ、リンクを知っている人全員がダウンロードできるようにしたいのであれば「支払後にダウンロード商品へのアクセス権を付与」にチェックを入れる。
税の設定
税オプション
- 税込み価格:商品の価格を税込みにするか税抜きにするかの項目。
- 以下に基づく税の計算:デフォルトでOK。
- 送料税クラス:デフォルトでOK。
- 税の丸め計算:デフォルトでOK。
- 追加の税金クラス:デフォルトでOK。
- ショップで表示する価格:ショップページでの値段の表記を選択。
- 支払いやカートで表示する価格:支払ページやカートでの値段の表記を選択。
- 価格表示の接尾辞:(税込)か(税抜)をつけるという意味だが、デフォルトでOK。
- 税金合計を表示:デフォルトでOK。
標準税率
標準税率では、一般的な税金を設定します。ここで設定した金額がそれぞれの商品の料金に反映されます。設定方法は簡単で、「行を挿入」というボタンをクリックして、「率 %」の項目に税率を記入します。2020年2月現在では、10%なので、「10」と記入しておきます。
免税率
「免税率」は、日本向けにビジネスをする場合は必要ないと思うので飛ばします。
軽減税率
「軽減税率」は、2020年5月現在では機能しないので以下の記事で詳細をご確認ください。
チェック!標準税率や軽減税率の設定や各商品に割り当てる方法は、「WooCommerceで標準税率と軽減税率の設定をする方法」記事をご覧ください。
送料の設定
WooCommerceで物販のECサイトを作成する方で、送料を有料にする場合は、ちょっと設定が複雑になりますので、別の記事で詳しくご紹介しているので、チェックしてみてください。
- WooCommerceでの基本的な送料の設定
- クーポンを使って送料を無料にする方法
- 地域毎に異なる送料を請求する方法
- 一定額以上の購入で送料を無料にする方法
をご紹介しています。もしかしたら、商品のサイズや重さによって請求する送料を変更したいという場合があるかもしれませんが、phpコードを追加する必要があったりと、結構難しい設定になりますので、それは省略してしまっています。ご了承ください。
チェック!詳しい送料の設定は、『WooCommerceで送料を設定する方法』記事をご確認ください。
決済の設定
決済の設定では、決済方法の導入や設定ができます。いろんな決済が用意されていますが、ビジネスのタイプやターゲットに合わせて設定してみてください。
WooCommerceにStripeを導入する方法
まずは、Stripeの導入方法からです。Stripeを使うことによって、クレジットカードで決済を受けることができるようになります。そのためには、Stripeのアカウントの取得しないといけません。詳細は以下の記事からチェックしてみてください。
チェック!Stripeのアカウントの取得からWooCommerceで決済として導入する具体的な方法は、『WooCommerce Stripe Payment Gatewayプラグインの使い方』記事をご確認ください。
WooCommerceにPayPalを導入する方法
PayPalは、クレジットカードもしくはPayPalの預金を使って支払いを受けることができます。僕も、インターネットで商品やサービスを購入する際は、PayPalが用意されていると、必ずと言って良いほど利用します。お客さんとしては、クレジットカード番号やCVCコードなどを入力しなくても済むので非常に便利なんですね。
じゃあ、Stripeなんて必要ないんじゃないの?と思う方もいらっしゃるかもしれませんが、PayPalはお客さんがPayPalのアカウントを所有していることが条件になりますし、商品をオファーするたびに別のページに遷移して決済をしてもらう必要があります。Stripeでクレジットカードによる決済を受ければ、次回以降は、オートコンプリートと言って、自動でクレジットカード情報を入力してくれるので、簡単に購入してもらえるというメリットがあります。どちらにもメリット・デメリットが存在しますので、できるだけ両方の決済を導入しておくことをお勧めします。
チェック!PayPalのビジネスアカウントの取得からWooCommerceで決済として導入する具体的な方法は、『WooCommerce PayPal Checkout Gatewayプラグインの使い方』記事をご確認ください。
WooCommerceに銀行振込を導入する方法
銀行振込を導入したい場合は、「WooCommerce」の「設定」から「決済」タブに移動し、「銀行振込(日本向け)」の「管理」ボタンをクリックします。
- 銀行名
- 支店名
- 口座種別
- 口座番号
- 口座名義
すると、このような画面が表示されるので、「振込銀行口座詳細:」というセクションで、上記の5つの項目を記入します。複数の銀行を扱うのであれば、「口座を追加」ボタンをクリックして追加可能です。設定が終わったら、「変更を保存」しましょう。
WooCommerceに店頭払いを導入する方法
お店に直接来店してもらって代金を受け取りたい場合は、「店頭払い」の設定をしていきます。銀行振込と同じく、「管理」ボタンをクリックします。
店頭払いの場合は、特別必要な設定というのはありませんが、「説明」の欄、もしくは「説明書き」の欄にお店の住所や営業時間、支払日や連絡の方法などを記載しておくと良いかもしれません。
アカウントとプライバシーの設定
- ゲストの購入処理
- アカウント作成
- アカウントの削除リクエスト
- 個人データの削除
- プライバシーページ
- 登録のプライバシーポリシー
- 購入処理のプライバシーポリシー
- 無効なアカウントを保持する
- 保留中の注文を保持する
- 失敗した注文を保持する
- キャンセルされた注文を保持する
- 完了した注文を保持する
- Stripeデータを保持
この項目の設定は、全部、基本的にデフォルトのままでOKです。ただし、「プライバシーページ」に関しては、あらかじめ用意されているページではなく、ちゃんと設定済みのページを作成、あるいは編集しておきましょう。
メールの設定
- 新規注文
- キャンセルされた注文
- 失敗注文
- 注文保留
- 処理中の注文
- 完了済みの注文
- 払い戻し注文
- お客様へのインボイス/注文の詳細
- 注文メモ
- パスワードをリセット
- 新しいアカウント
- 失敗したサブスクリプション更新 SCA 認証
- 予約注文の支払いアクションが必要です
- 支払い認証要求メール
次に「メール」の設定を確認していきます。上部の設定は、通知メールに関する設定になります。14の項目がありますが、それぞれ送信するかどうかの設定や受信者の設定などは、「管理」ボタンから可能です。
- 有効化/無効化
- 受信者(複数可)
- 件名
- メールヘッダー
- 追加コンテンツ
- メール形式
上記の項目が設定できますが、基本的にデフォルトでOKです。もし、通知メールを受け取りたくないとかお客さんに送り必要がないと思うものがあれば、「有効化/無効化」の項目はチェックを外します。また、複数のEメールアドレス宛にメールを送信したいのであれば、「受信者(複数可)」の項目に、カンマで区切って記入します。例えば、「support@example.com,info@example.com」みたいな感じです。
- 送信元の名前:サイト運営者もしくはサイトの名前を入力。
- “配信元”アドレス:サイト運営者のEメールアドレスを入力。
- ヘッダー画像:先ほど設定したメールに表示するヘッダー画像のURLを入力。
- フッターテキスト:メールのフッターに記載したい文言を設定。(デフォルトでは、サイト名が記載されるように設定されます。)
- ベースカラー:デフォルトでWooCommerceのブランドカラーが設定されているので、自分のサイトのカラーがおすすめ。
- 背景色
- Body背景色
- Bodyテキスト色
連携の設定
- MaxMindライセンスキー
- データベースファイルパス
「連携」のタブでは、MaxMindというサービスを使って、IPアドレスから位置情報を取得できるみたいですが、あまり必要ないと思うので飛ばしたいと思います。
上級者の設定
固定ページ設定
- カートページ
- 購入手続きページ
- マイアカウントページ
- 利用規約
- 支払い
- 注文受付
- 決済方法を追加
- 決済方法を削除
- 基本の決済方法に設定
- ご注文
- 注文を表示
- ダウンロード
- アカウントを編集
- 住所
- 決済方法
- パスワードを忘れた場合
- ログアウト
このタブの項目は、デフォルトでOKです。でも、「固定ページ設定」の各ページは、WooCommerceのプラグインをインストールすると自動で作成されますが、デフォルトのままになっているので、固定ページから編集しておきましょう。
REST API
この項目は僕は使ったことがないので飛ばします。
Webhook
この項目は、Webhookを通じて、外部サービスと連携することができるんですけど、ここも使っていないので飛ばしたいと思います。
レガシー API
ここも使っていないので飛ばします。
WooCommerce.com
- 追跡を有効にする:WooCommerceにサイトの運営状況を提出してプラグインの改善に協力することができますが、チェックを入れても入れなくてもどちらでもOK。
- 提案を表示:チェックを入れておくことで、おすすめのプラグインなどの提示をしてくれます。
WooCommerceで商品を作成する方法
WooCommerceでは、物販商品はもちろん、デジタル商品(eBookや音声、動画など)を販売することもできます。
また、WooCommerceの各商品にはバリエーションをつけることもできます。例えば、デザインが同じで色が異なるTシャツを販売する場合、別々に商品を作成しても良いですが、1つの商品の中で黒と白、青、赤、のように複数の選択肢を設定することができます。
チェック!詳しい商品の作り方は、『WooCommerceで商品を作成する方法』記事をご確認ください。
WooCommerceでクーポンを作成する方法
WooCommerceの商品をプロモーションする際は、通常価格で販売するのも良いですが、より購入してもらうために、割引価格でセールスしたいことがあると思います。
割引価格の設定は、それぞれの商品の設定画面からでも設定することはできます。ただし、こういったセール価格は、直接商品ページに表示されますので、例えば5,000円以上の商品を購入してくれたお客さんに、今度買い物してもらうときに使える30%オフのクーポンを発行したいとか、送料無料のクーポンをプレゼントしたいなんてことがあると思います。その場合は、WooCommerceのクーポン機能でクーポンを作成してみてください。
チェック!詳しいクーポンの作り方は、『WooCommerceでクーポンを作成する方法』という記事でご紹介していますので、ご確認ください。
WooCommerceでランディングページを作成する方法
今回ご紹介した StorefrontというWooCommerceの公式テーマは、ページの外観を自由に変更することはできません。なので、オリジナルのページにしたいというのでれば、専用のツールが必要になってきます。
- Elementor Pro
- Divi
僕がオススメするのは、この2つのプラグインです。これらは、有料のプラグインになりますが、ドラッグ&ドロップで自由にページをカスタマイズすることができる、非常に優れたツールです。
ショップページを作成する方法
Elementor Proを使ってWooCommerceのショップページを作成する方法
このショップページは、Elementor Proを使って作成しました。作り方は、別のページで詳しくご紹介しているので、ぜひ参考にしてみてください。
チェック!『Elementor ProでWooCommerceのショップページを作成する方法』記事で、Elementorでショップページを作る方法をご確認いただけます。
WooCommerceサイトの表示速度について
WooCommerceは、高機能なプラグインだからかもしれませんが、プラグインの容量は大きめです。そこで、様々なプラグインを使って高速化を図っていると思います。
チェック!WooCommerceサイトが重くて悩んでいる方は、『WooCommerceサイトが遅い9つの原因:無料でサイトを高速化する方法』記事をご覧ください。
でも、1つ注意が必要です。それは、キャッシュ系のプラグインです。キャッシュ系のプラグインは、キャッシュを生成することで、2回目以降、同じサイトに訪問する場合は、前に訪問した際のデータを渡してくれます。新たに、データを取得する必要がなくなるために、高速化できるわけですが、WooCommerceを使用する際は注意が必要です。
WooCommerceには、決済ページやカートページなど、独自のページが用意されています。それらのページのキャッシュを生成してしまうと、古いデータを渡すことになり、決済ができなかったり、不具合が生じる可能性があるので、注意してください。
チェック!キャッシュ系のプラグインを導入している方は、『WooCommerceサイトの表示速度対策の注意点』記事をご覧ください。
おすすめのWooCommerce関連プラグイン
最後に、WooCommerceを使ってECサイトを運営するのに便利なプラグインをご紹介していきます。
WooCommerce Direct Checkoutプラグイン
Direct Checkout for WooCommerceプラグインは、商品をカートに入れるのではなく、直接決済ページに誘導することができるようになるプラグインです。カートに入れると、カゴ落ちの確率が上がるので、それを防ぐには効果的です。
ConvertKit for WooCommerceプラグイン
商品を購入した後、ステップメールを使ったりして、継続的に顧客に対して商品を販売したり、連絡を取りたいという場合があると思います。WooCommerceには、いろんなEメール配信サービスと連携することができるプラグインがいろいろありますが、僕がメインで使用しているConvertKitというEメールサービスの場合は、「ConvertKit for WooCommerce」というプラグインで連携が可能です。
CartFlowsプラグイン
CartFlowsは、WordPressでセールスファネルを作成することができるプラグインです。一般的には、商品をカートに入れてもらって、決済ページで商品を購入してもらうというプロセスになりますが、CartFlowsでは、セールスページを作成して、その中で商品の決済を受けることができます。また、購入してもらったお客さんに対しては、サンキューページという注文確認ページを表示することもできます。
CartFlows Proプラグイン
CartFlows Proは、CartFlowsの有料版のプラグインです。僕としては、正直CartFlowsだけでは機能的に満足することができないので、Proも契約して使用しています。CartFlows Proでは、単純にセールスページで商品を直接購入してもらうだけではなく、商品購入後にアップセル・クロスセルをすることができますし、アップセルやクロスセル商品を購入しない場合は、ダウンセルすることもできます。売り上げアップが期待できる非常に優れた機能なので、ぜひ使ってみてください。
チェック!これら以外にも、WooCommerce向けのプラグインはたくさんあります。『WooCommerceのおすすめプラグインをまとめました。』という記事で、おすすめのプラグインをまとめてみましたので、あなたのビジネスに使えそうなものがあれば、導入してみてください。
非常に参考になりました。
しかし、画像が多数リンク切れになっているようですが。
ご指摘ありがとうございます!修正いたします。
根本さん、
役に立つ情報、まさに私が探していた情報がたくさんつまったブログですね。
日本語で、ここまで詳しいwoocommerceの完全カイドって、ありそうでなかったので、大変役に立ちます。
他の記事も、「あ、そうそう、これ知りたかったんだ」というのが多数。
ありがとうございます。
コメントありがとうございます!そう言っていただけて嬉しいです。今後も、WooCommerce関係はもちろん、他にもウェブマーケティング関係の記事を公開していきますので、参考になさってください。
大変役に立ちました。
ありがとうございます。
動画通りに設定して、カード決済を試しましたが「Invalid API Key provided: sk_live_***pgzJ」このエラーが出てきました。
シークレットキーが無効の意味だと理解していますが、どうすればいいですか?
では、返事をお待ちしておりますので、よろしくお願いします。
コメントありがとうございます!ちょっとその経験がないので詳しいことはわかりませんが、WooCommerceの「設定」にある「決済」でStripeの「管理」に移動し、「テストモードを有効化」にチェックが入っていないか、APIキーが正しいかどうかをご確認ください。また、それでもダメな場合は、エンドポイントの追加からやり直してみてください。