WooCommerceの使い方
- 2020.08.11
- WordPress
WordPressプラグイン「WooCommerce」は、ECサイトを作るための代表的なプラグインです。
この記事ではWooCommerceを使い、商品の登録や税の設定、決済方法の設定など、ユーザーがショッピングを行えるようになるまでの最低限の使い方を解説します。
WooCommerceとは
WooCommerceは、WordPressサイトにEC機能を気軽にインストールできるWordPressプラグインで、世界的に高いシェアとなっています。
高いシェアがあるということはWooCommerceというプラグイン自体に対するプラグインも存在し、柔軟な対応がしやすいことが特徴です。
日本語のドキュメントも増えてきており、最近でも日本のWordPressサイトに導入される事例も増えてきています。
WooCommerceのインストール
WooCommerceプラグインのインストール方法について説明します。
プラグインをインストールするには、WordPress管理ツール内のメニューから「プラグイン」のページを表示し、上部タイトルの横にある「新規追加」リンクをクリックします。
プラグインの検索の入力欄に「WooCommerce」を入力すると、以下のカードが見つかります。
[今すぐインストール] ボタンをクリックしてしばらくすると、以下のような表示になります。
[有効化] ボタンを押下してプラグインを有効化すると、次のステップに進めます。
WooCommerceストアの詳細設定
WooCommerceプラグインを有効化すると、WordPress管理ツールの画面が以下のようなセットアップページに自動で切り替わります。
ステップに沿って初期設定を行うので、「はい、お願いします」ボタンを押下します。
ストアの所在地
ストアの所在地を入力します。
上から順に番地・建物名(任意)・国／地域・市区町村・郵便番号を入力します。
環境によってはこの入力フォームから英語になります。
データの収集を許すかどうか聞かれるので、許可する場合はチェックを入れ、許可しない場合はそのまま「次へ」ボタンを押下してください。
ストアの業界
業界を問われるので一致するものをチェックを入れ、「次へ」ボタンを押下してください。
商品タイプ
販売する商品がどういう形態かについて問われるので一致するものにチェックを入れ、「次へ」ボタンを押下してください。
WooCommerceの設定に登場する「バーチャル商品」とは、配送する必要のない商品（ダウンロードなど）のことです。
ビジネスの詳細
販売に関してさらに詳しく聞かれます。
上のセレクトボックスでは商品数、下のセレクトボックスでは「他の場所で販売しているかどうか」を選択します。
上のセレクトボックスでは実態に合うものを選んでいただき、下のセレクトボックスでも同様に合うものを選択していただいていいですが、それぞれ派生して追加の選択肢が出てきます。「いいえ/No」を選んでもストアを開くことができます。
ビジネスの詳細を選択すると、この画面下部にWooCommerceと連携できるプラグインが表示されます。必須ではないので今はいったん連携しないように進めますが、使うものがあればインストールして問題ありません。
テーマ
WordPressサイトのデザインとなるテーマを選択します。
キャプチャでは左上がMinimalとなっていますが、実際には左上には現行のテーマが表示されています。
他にもECサイト向けのようなテーマを選択することができますが、現行のテーマに問題があったとしても後からでも切り替えが可能です。いったん現行テーマを選びましょう。
Jetpack連携
Jetpackとの連携を行うかどうか問われます。
Jetpackとは、セキュリティ対策・パフォーマンス向上・マーケティング支援のためのプラグインです。
必須ではないので、興味がない場合は「結構です」ボタンを押下してください。
初期設定の完了
ストアの初期設定としては以上で完了となります。
ストアの初期設定を終えると、WordPress管理ツールの画面に戻り、また、メニューの中に「WooCommerce」が追加されているのが確認できます。
WooCommerce設定ページでは、セットアップのためにするべき項目のステータスが表示されています。今までは1番目の項目の設定をしていたということなります。
それぞれリンクになっているので押下することで設定ページに遷移します。
WooCommerceで商品を追加
今回は管理ツール上で商品をひとつずつ追加していく方法を紹介します。
[WooCommerce]-[商品]メニューをクリックし、「Add manually」を選択します。
商品追加ページは、記事追加の時と同じようなUIをしています。
最初に入力しようとすると、WooCommerce自体によるナビゲーションが動作するので、各設定項目の意味合いを説明してくれます。
たくさんの入力項目がありますが、最低限、必要な項目は以下の2つです。
- 商品名
- 標準価格
商品名と標準価格を入力すれば、商品データに紐づく商品詳細ページが自動で作成され、ユーザーが商品をカートに入れることができるようになります。
発送する必要のある商品（商品データにバーチャルの設定をしていない商品）を追加していた場合、送料の設定を行います。
WooCommerceストアのパーソナライズ
ここではトップページの自動作成・ロゴのアップロード・重要な告知の設定ができます。
- 新規でトップページを作るかどうかを選びます。既にWordPressでトップページを作成している場合は[Skip]を押下してください。サイトを作成したばかりでトップページを作成していない場合は自動でトップページを生成してくれるので、この機能をつかって生成した後でカスタマイズするのもいいかもしれません。
- ストアロゴをアップロードできます。画像がある場合はアップロードしていただき、ない場合はSkipすることができます。
- 全ページに表示されるポップアップ文言を入力することができます。未入力でも完了できます。
WooCommerceストアの税設定
ストアの所在地は初期設定で既に入力済みなので、税率の設定を行います。
税率の設定は税設定ページで行います。「Configure」ボタンを押下してください。
税率を追加するには「行の挿入」ボタンを押下してください。
10%の消費税なら、次のように入力し、「変更を保存」ボタンを押下してください。
| 項目名 | 入力内容 |
|---|---|
| 国コード | JP |
| 都道府県コード | （空欄） |
| 郵便番号 | （空欄） |
| 市区町村 | （空欄） |
| 率 % | 10.0000 |
| 税率名称 | 消費税 |
| 優先順位 | 1 |
| 複合 | （チェックなし） |
| 送料 | （チェックなし） |
WooCommerceストアの決済方法
初期設定後の状態では、決済方法は次の4種類を設定できます。
- stripe
- PayPal
- 代金引換
- 銀行振込
stripeはクレジットカード決済サービスです。
代金引換（Cash on delivery）を有効にするには、トグルボタンを押下するだけです。
銀行振込（Direct bank transfer）についても「Setup」ボタンを押下して振込先口座を入力することで完了できます。
作成されたECサイト
ここまでの作業が終わると、ECサイトとしての機能を備えたサイトができあがります。
WooCommerceの標準テーマであるStorefrontを適用したときの商品ページは以下のキャプチャのようになります。
価格や説明など、WooCommerceの管理画面で商品データとして登録した情報が出力されます。そのほか、「カートに入れる」ボタンが自動で配置されます。
WooCommerceに最適化されたテーマを使用しない場合でも、「カートに入れる」ボタンなどの要素が出力されますが、正しい表示レイアウトにはなりません。CSSによる調整が必要になるのでご注意ください。
まとめ
WordPressをECサイト化するためのプラグイン「WooCommerce」のインストールと最低限必要な初期設定について記載しました。
WooCommerceの初期設定を終えるまでにはかなりの設定項目がありますが、この記事で記載した部分を設定できればECサイト化ができるので、ぜひ構築してみてください。
ECサイトは構築したら終わりではなく、集客のための施策が重要になります。弊社ではSEOのノウハウを生かし、広告に頼らない自然検索での流入アップを目指すSEOコンサルティングサービスを展開しています。安定的な集客を目指すには、弊社サービスをご利用ください。