ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

2020年度版:WooCommerceのインストールから設定、ECサイト開設を徹底解説

WooComerce バージョン4からインストール方法が変わりました。また設定も一部変わっています。最新のWooCommerceのインストールから、ECサイト構築までの設定を解説します。

WooCommerceのインストール

WooCommerceをWordpressにインストールして「有効」にすると、導入のステップが開始されます。

「はい、お願いします」をクリックします。


「WooCommerceはセキュリティが高く、いろいろできます」ということが書かれています。そのまま「Get started」をクリックします。


「匿名でWooCommerceの改善に役立つデータを送りますか?」ということで、「Yes,count me in!」にはチェックせずに「Continue」をクリックします


「Jetpackをインストールするか?」を尋ねてきます。
特にインストールする必要は無いので「結構です」をクリックします。

Jetpackをインストールした方は下記の設定をおこなってください。


Jetpackを利用するためにWordPressのアカウントを作成します。既にお持ちの方は既存のアカウントを利用できます。
Google、Appleのアカウントを利用することもできます。


ストアの住所を記入して「I'm setting up a store for a client」にチェックをして「Continue」をクリックします


商品とダウンロード商品の販売は無料です。
それ以外の定期購読(サブスクリプション)や、会員だけの販売などは有料になります。

商品、またはダウンロード販売にチェックを入れて「Continue」をクリックします


商品数や、実店舗で販売しているか? Shopifyなどを利用しているか?などのアンケートです。特に設定に意味はありません。

「Facebook マーケット」や「Google ショッピング」「mailchimp」などを利用しない場合はオフにします。


WooCommerceのテンプレートを選ぶことができます。
テンプレートが無ければ、ここは「Storefront」を選びましょう。

一旦、Storefrontを利用することで、後の作業や確認が楽になります。


「Continue」をクリックするとインストールは完了です。

サイドメニューにもWooCommerceが追加されています。

続いて、消費税や配送料などを設定していきます。

Storefrontのインストール

ECショップの設定を行っていきます。

まずテーマのStorefrontの設定から始めることで、ダミー商品データがインストールされ、EC設定がより分かりやすくなります。
「さあ、出発!」をクリックします


ダミー商品がインストールされました。
Storefrontのレイアウト設定は必要ありませんが、いろいろと設定してみるのも良いでしょう。

ウィジェットも利用できます(外観→ウィジェット)。
商品価格の絞り込み機能などもウィジェットにあります。

WooCommerceの設定

WooCommerceの設定で、消費税や配送料などを設定します。

一般の設定

「一般」タブの項目を設定します。
気を付ける箇所は「お客様の基本地域」です。商品を配送する場所となり、送料の基準となります。

商品の設定

「商品」タブの設定をおこないます。
「一般」「在庫」「ダウンロード商品」の設定があります。

一般の設定

単位は、商品を登録する時の単位となります。重量によって送料を変動したい時にも影響します。単位をしっかり設定しておきましょう。

かごに入れるの処理で「正常に追加された後、カートのページにリダイレクトします。」は、お客様の購入のほとんどが1つの場合はチェックすると、スムーズに販売できるので売上が若干増えます。

その他の項目は適宜設定ください。

在庫設定

在庫が無い商品を非表示にしたり、在庫数が少なくなるとメールで通知するなど、在庫に関する機能を設定できます。

在庫設定は、商品の入力画面にも影響します。
WooCommerceのECサイトで在庫管理を有効にするのかをしっかり決める必要があります。


ダウンロード商品

ダウンロード商品の設定がOFFの場合は、この設定は不要です。

ファイルのダウンロード方法」は「強制ダウンロード」または「X-Accel-Redirect/X-Sendfile」を選択します。

「X-Accel-Redirect/X-Sendfile」が最も高速で安定していますが、サーバーに「X-Accel-Redirect」「X-Sendfile」のモジュールがインストールされている必要があります。

支払お後にダウンロード商品へのアクセス権を付与」にチェックを入れると、ユーザーがカード決済やPay決済で支払った場合、自動的に「手配中」となりダウンロード可能となります。

説明が分かりづらいのですが、"手配中”とは、WooCommerceの商品購入から配送完了までのステータスの事です。

ステータスは、「購入」「支払い」「手配中」「配送済み」「完了」といった流れを管理画面やユーザー画面に表示することができるWooCommerceの機能です。
ステータスにはその他「キャンセル」や「払い戻し済み」などもあります。

WooCommerceのダウンロードの説明も合わせて参照してください

税の設定

税の設定は最も重要な設定です。設定ミスが無いように気を付けて設定を進めます。

税オプションの設定

税込み価格

軽減税率や税率が変わった時でもすぐに対応できるように「税込み価格」は必ず「いいえ、税抜の価格を入力します」を選択します。
商品の価格入力で1,000と入力すると、自動的に1,100円と表示されます。または軽減税率の1,080円と表示されます。

以下に基づく税の計算

国内販売だけの場合は「ショップの本拠地」を選択します。

送料税クラス

「標準」を選択します。

税の丸め計算

チェックオフにします。
消費税の四捨五入をアイテム毎に計算するのか、小計で四捨五入するのかを選択できます。

追加の税クラス

消費税、軽減税率、免税など、必要に応じた税率を商品に設定できます。
もし、消費税だけの場合は全て削除して未記入で良いです。
今回は消費税10%と8%の商品を取り扱うECサイトの設定するため「Reduced Tax」と記入します。(※日本語の「軽減税率」では設定が反映されないため)

ショップで表示する価格、支払いやカートで表示する価格

「税込」を選択します。商品の価格表示は税込が推奨されています。

価格表示の接尾辞

商品の価格表示の後ろに表示される表記です。「(税込)」で良いでしょう。
例:3,300円(税込)

税金合計を表示

「単一の合計」「項目別」どちらでも殆ど変わりません。

標準税率の設定

「行の挿入」をクリックして税率の設定をおこないます。

  • 国コード:JP
  • 率%:10
  • 税率名称:消費税
  • 送料:送料にも消費税を追加する場合はチェック

軽減税率の設定

「行の挿入」をクリックして税率の設定をおこないます。

  • 国コード:JP
  • 率%:8
  • 税率名称:消費税8%
  • 送料:送料にも消費税を追加する場合はチェック

標準税率(10%)と軽減税率(8%)を設定すると、商品登録でどちらかの税率を選択することができるようになります。

送料の設定

配送できるエリアや、配送エリアごとの配送料金、一定金額以上の購入は配送無料にするなど、送料に関する設定ができます。

配送地域

日本、北海道、沖縄のエリア毎の送料や、一定金額以上の購入は送料無料(または割引)にすることなどができます。

【サンプルの定義】
北海道 送料1,500円
沖縄  送料1,200円
全国  送料800円
8,000円以上の購入で送料無料

まず、全国の送料を設定していきます。
地域名は「日本」、ゾーン地域は「日本」を設定します。
「配送方法を追加」ボタンをクリックします


配送方法を追加します。「定額送料」を選択して「配送方法を追加」をクリックします。


送料を設定するため「編集」をクリックします。


サンプルでは
「メソッドのタイトル」を「送料」に変更。
「税状況」は課税を選択。(送料にも課税されます)
「金額」を800円としました。


「配送方法を追加」をクリックして、今度は送料無料を設定します。

「送料無料」を選択して、「配送方法を追加」をクリックします。

「送料無料になる必要条件」は「無料になる最低注文金額」を選択。
「最低注文金額」は「8000」と入力

設定後、「送料無料」「送料」の順番に並び替えます。
「変更を保存」ボタンをクリックして、ひとつの送料設定が完了です。

同じように、北海道、沖縄の送料を設定しましょう。


日本、北海道、沖縄の送料が設定できたら順番を並び替えて「日本」を一番下にします。

配送オプション

配送機能の基本設定になります。

計算

ここで重要なのは「住所が入力されるまで、送料を隠す」にチェックすることです。
チェックすることでカートページにはまだ送料は表示されません。
商品購入ページで配送先を記入した時に、正しい送料が表示されます。

配送先

基本的に「顧客の配送先住所を基本とする」を選択します。

デバックモード

オフにします。
異常が発生した場合のみ、オンにしてバグのログを確認します。

配送クラス

商品によって配送方法・配送料を変えたい場合があります。

例えば、大きな商品は通常の配送料金。
小さな商品は「クリックポスト」や「宅急便コンパクト」で配送する。といったことができます。

登録のサンプルとして「通常の配送」と「クリックポスト」を配送クラスに追加します。

「配送クラスを追加」をクリックします。


配送区分に「クリックポスト」
スラッグに「click-post」(未記入でも可能)
説明に「クリックポスト配送」(未記入でも可能)

最後に「配送クラスを保存」をクリックします。

同じ手順で、通常の配送も追加します。すると下記のようになります。


「配送地域」をクリックして、設定している配送地域に配送クラスの設定をおこないます。

まず「日本」の「編集」をクリックします。


送料の「編集」をクリックします


「金額」を0に変更します。
クリックポスト、宅配便にそれぞれ配送料金を記入します。

「算出形式」は「最も高額な配送クラスの送料を請求」を選択します。

最後に「変更を保存」をクリックします。

「算出形式」を「最も高額な配送クラスの送料を請求」にした理由

ユーザーが「クリックポストの商品」と「通常配送の商品」を同時に購入された場合、決済の際の送料が「通常配送」の料金となるからです。

決済の設定

デフォルトでは「銀行振込」「代金引換」「Paypal」「小切手支払い」の4つの決済機能があります。
銀行振込(海外)と小切手は海外の取引に利用される決済になります。

プラグイン「Japanized for WooCommerce」をインストールすることで、国内の銀行振込、郵便振替を利用することができます。

「カード決済」「Amazon Pay」などのPay決済もプラグインをインストールすることで利用することができます。

決済サービスの設定方法

決済ごとに設定が異なりますが、操作方法は同じです。サンプルとして「代金引換」の設定をおこないます。

代金引換を「有効」にして「管理」をクリックします

必要項目を設定します。
配送方法に合わせて決済方法を設定することも可能です。
例えば「送料無料」の場合は代引き支払いを不可にすることもできます。

アカウントとプライバシーの設定

ユーザーのアカウント作成やデータの保持期間などを設定できます。
万が一のデータ流出を想定して必要以上のデータを保持しないようにしましょう。

適宜、ECショップの運営方針に合わせて設定します。

メールの設定

WooCommerceの設定で一番の難関がメール設定になります。

注文時のメール、ユーザーへのサンキューメールや、配送完了時のメールなど、メールテンプレートを設定します。

メール通知

不要なメールはオフすることができます。「注文メモ」はオフで良いでしょう。

メール送信者オプション

送信者の名前や、メールアドレスを記入します。
HTMLメールを利用する場合は「ベースカラー」や「Bodyテキスト色」も変更できます。

メールテンプレートの設定

各メールのテンプレートを設定します。

サンプルとして「新規注文」の設定をおこないます。
「新規注文」または「管理」をクリックすると、設定画面が表示されます。

設定には下記のプレースホルダが利用できます。

サイト名{site_title}
サイトURL{site_address}
注文日{order_date}
注文ナンバー{order_number}

受信者

注文メールを受信するメールアドレスになります。
複数指定する場合は、カンマで区切ります。

件名

メールタイトルになります。
サンプルでは注文番号のプレースホルダ{order_number}を設定しました。

メールヘッダー

デフォルトでも良いでしょう。

追加コンテンツ

メールの注文情報の下に表示されます。ここは未記入で良いでしょう。

メール形式

メールは「HTML」「テキスト形式」「マルチパート」を選択できます。

受信者に合わせてHTML、テキスト形式のメールを送信できる「マルチパート」を選択しました。

テンプレート

メールのテンプレートを本格的にカスタマイズしたい時に利用します。

「テーマにファイルをコピー」ボタンをクリックすると、テーマフォルダーにメールのテンプレートがコピーされます。

メールのテンプレートをプレビューする方法

プラグイン「Preview E-mails for WooCommerce」をインストールすると、メールテンプレートをプレビューできます。

※プレビューは注文が必要となります。テストを兼ねて一つ注文してみて下さい。
Storefrontにはダミーの商品がインストールされているのですぐに注文テストできます。

「Preview E-mails for WooCommerce」を有効にするとサイドメニューに「Preview Emails」が追加されます。


Choose Email

プレビューしたいメールを選択します。

Chooose Order

プレビューしたい注文を選択します。


メールが表示されました。


「Show Menu」をクリックすると、メニューが表示され、他のメールテンプレートやオーダーを表示させることができます。

テンプレートの文章におかしな日本語がありますが、日本語ファイルを修正できます。

WooCommerce:英語の日本語化、日本語ファイルの修正方法

送信されるメールとステータスの関係も重要になります。

WooCommerce:決済と注文ステータス、メール送信の関係

連携の設定

特に設定を行う必要はありません。
位置情報のMaxMindを利用する場合はライセンスキーを入力して下さい。

上級者向けの設定

固定ページの設定や、API、Webhookなどの設定ができます。
特に設定は必要ありません。「利用規約」ページは設定しておきましょう。

以上でWooCommerceの設定は完了です。

これでECサイトの構築ができました。あとは商品を登録するだけです。
必要に応じてカード決済の追加などを行うと良いでしょう。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ