WordPressでWooCommerceストアを始める
WooCommerceがショップを支え、商品、注文、税金、決済を管理します。ただし、ショップをあなたのブランドらしく見せることは別の作業です。このガイドでは、買い物客が実際に目にする4つの画面を、WordPressに標準搭載されているブロックエディターを使って作成します。
ステップ 1：WooCommerceをインストール
WooCommerceは、WordPressプラグインディレクトリにある無料プラグインで、商品データ、在庫、注文、税ルール、配送ゾーン、決済ゲートウェイなど、商取引に関わる部分をすべて担当します。Canvasがこの層を置き換えることはないため、他のWooCommerce拡張機能もそのまま動作し続けます。
インストール方法は2通りあります
- セットアップウィザードにお任せください。 セットアップ中にストア向けデモを選ぶと、インポートの前にプラグインの手順で WooCommerce がインストールされ、有効化されます。ストアにはストア用プラグインが必要だからです。
- 自分でインストールするには、プラグインから「新規追加」を開き、WooCommerceのオンボーディングを実行します。現在運用中のサイトにショップを追加する場合は、この方法を選んでください。
いずれの場合も、WooCommerceのセットアップを一通り進め、国、通貨、販売する商品についての質問に答えてください。その回答は後で税金や配送に影響し、後から修正するのは手間がかかります。
本番の注文を受ける前に、メール配信サービスを設定してください。注文確認メールは、初期設定ではサーバー経由でWordPressから送信されます。注文確認メールが迷惑メールに振り分けられるショップでは、対応できないサポートチケットが増えてしまいます。
ステップ 2：ストアのデモから始めるか、空のカタログから始めます
ここでは選択肢があり、10分ほど考える価値があります。
ストアデモをインポート
88件のデモのうち21件は、実際に機能するWooCommerceストアです。いずれかをインポートすると、商品、カテゴリー、属性、スウォッチの色、デザインされたショップ、デザインされた商品ページ、カート、チェックアウトがすべてそろった状態で手に入り、すべて編集できます。全体の組み立て方を把握する最も速い方法で、導入を見送る場合はインポート全体を取り消せます。
自社のカタログをベースに構築する
すでに商品を販売していて、データベースに商品がある場合は、既存のウェブサイトに取り込む範囲として「ページのみ」を選んでください。デモのページとそのページが使用するレコードは取り込まれますが、デモの設定、メニュー、フロントページは含まれません。カタログは今のままの場所に残ります。
どちらの場合でも、サイト上の既存のWooCommerceページが取り込まれるため、ショップ、カート、チェックアウト、アカウントページは常にそれぞれ1つだけです。
ステップ3：最初の商品を追加
商品はWooCommerceのレコードで、WordPress管理画面の商品メニューから追加します。この部分は意図的に地味な作業です。レイアウトよりも、ここに時間をかけてください。良い商品ページの大部分は、良い商品データでできているからです。
- 製品ごとに1枚の明瞭な写真。すべての商品を同じ方法で撮影します。写真の形がそろっているとカタロググリッドはデザインされた印象になり、そろっていないと急ごしらえに見えます。
- 買い物客が実際に抱く疑問に答える短い商品説明。サイズ、素材、配送までの日数、サイズが合わなかった場合の対応などを記載します。
- お客様の買い方に合ったカテゴリ分けであり、在庫の整理方法に合わせたものではありません。
- バリエーションのある項目には属性を使います。色、サイズ、仕上げなど。管理画面で色の用語に実際のカラー値を設定してください。それにより、後でドロップダウンがスウォッチに変わります。
- 在庫、重量、寸法（実物の商品を発送する場合）。配送ルールがこれらの値を参照します。
デザインを始める前に、商品を3つ追加してください。商品が1つだけのプレースホルダーで判断したレイアウトは、後で作り直すことになります。
ステップ4：ショップページをデザイン
ショップはカタログであり、その役割は、できるだけ早く訪問者を商品ページへ導くことです。Canvasには、そのためのブロックがあります。一般的な解決策は、3つのレイアウトから選べるテーマ設定を1つ用意することです。
ブロック
商品グリッドは、カテゴリー、タグ、検索結果、または手動で選んだ商品リストから表示できます。商品カルーセルは、トップページ向けに同じ内容を横一列で表示します。商品カテゴリーカードは、来訪者をセクションへ案内します。価格フィルターを使うと、購入者は大量の商品から絞り込めます。どれもブロックであり、列数、ソース、並び順は、コードではなく設定パネルで操作できます。
基盤となるテンプレート
ショップ自体は、サイトエディターで開けるブロックテンプレートです。フィルターやカテゴリーが商品カタログで役立つかどうかに応じて、全幅で構成するか、左サイドバー、右サイドバー、またはその両方を配置しましょう。ストアテンプレートは全部で18個のあり、ショップ、商品ページ、アーカイブ、カート、チェックアウトを網羅しています。
ストア全体のデフォルト設定
テーマオプションには、5つのタブにまたがる39項目のショップ設定があります。タブは、カタログ、商品ページ、カートとチェックアウト、ヘッダーのミニカート、カタログモードです。1ページに表示する商品数、ページネーション、商品画像の形状、追加のギャラリー画像をホバー時に表示するかどうか、ホバーオーバーレイの内容もここで設定します。個別に設定されたブロックは、そのブロックが置かれたページでは引き続き優先されます。
手順5：商品ページのデザイン
このページは売上を左右する重要なページです。そのため、インターネット上のすべてのストアが使っている初期設定の配置以上のものにする価値があります。
パーツから組み立てる
商品ページの要素はすべてブロックです。画像ギャラリー、価格、星評価、メタ情報、短い説明、バリエーションスウォッチ、カートに追加ボタン、タブ、シェア行、関連商品がそれにあたります。配置を変えても、スタイルを変えても、どれかを丸ごと省いても構いません。各ブロックはWooCommerceに固有のデータを問い合わせるため、ページは問題なく動作します。
または、用意されているレイアウトから始める
パーツから組み立てたくない場合は、付属の単一商品レイアウトから1つを選び、パーツを入れ替えてください。レイアウトには、デフォルト、スクロールに合わせてギャラリーと一緒に動く固定サマリー、リスト形式、色を活かしたデザイン、ストアデザイン、カスタムリンクに対応したギャラリーレイアウト2種、左・右・両側にサイドバーを配置したバリエーションがあります。エディターから商品ごとにレイアウトを割り当てるか、テーマオプションでストアのデフォルトを設定してください。
ファーストビューに置くもの
商品写真、商品名、価格、バリエーション選択、カートに追加ボタン。それ以外はすべて、説明文も含めて、下に配置しても構いません。ほとんどの人は説明文を読みません。反対するかどうか決める前に、スマートフォンで確認してみてください。
ステップ6：カートとチェックアウト
この2つの画面で売上が失われがちですが、多くのテーマでは触ることができない画面でもあります。Canvasでは、ほかのすべての要素と同様にブロックとして扱えます。
カート
カートの中身にはCanvas Cart Tableブロック、金額にはCanvas Cart Totalsブロック、購入者が実際に追加しそうなものを紹介するCanvas Cross-Sellsブロックを使います。簡潔にし、購入ボタンが目立つようにしておきましょう。カートでよくある失敗は、合計金額と購入ボタンの間に販促コンテンツが大量に並ぶことです。
チェックアウト
フォーム用の請求先ブロック、購入内容を確認する注文内容確認ブロック、そして買い物客に状況を伝えるメッセージ用の通知ブロックです。注文、決済、メールの処理は引き続きWooCommerceが行い、画面にどう表示されるかを決めるのはお客様です。
元が取れるルール
- 配送に実際に必要な項目だけを入力してもらいましょう。
- 支払い手続きの前に、配送料を含む合計金額を表示します。
- 注文がいつ届くかを、日数で文章として明記してください。
- 初めて購入する不安なお客様の目に入る場所に、返品ポリシーを掲載しましょう。
ステップ7：スウォッチ、カートに追加、カードスタイル
通常はそれぞれプラグインが必要になる、ショップの動作に関する機能が3つ、この連携に含まれています。
- 属性のカラースウォッチ。 管理画面で商品属性の値に色を設定すると、バリエーション商品では、ドロップダウンの代わりに色の丸やボタン型のピル（ピル型ボタン）が表示されます。購入者は見た目で選べるため、スマートフォンでの利用時に特に効果的です。
- ページを再読み込みせずにカートに追加できます。グリッド、カルーセル、カードのオーバーレイから商品を追加すると、その場でカートが更新されます。そのため、買い物客は閲覧中のページに留まり、ヘッダーのカートにも商品数が反映され続けます。
- 商品カードのスタイル。 カタログのすべての画像を同じ形に統一してグリッドを揃え、追加のギャラリー画像をホバー時に表示するかスライドショーとして再生するかを選び、ホバー時のオーバーレイで「購入」「クイックビュー」、またはその両方を提供するかを決めます。
3つすべて設定項目です。スニペット、子テーマ、2つ目のプラグインは一切不要で、よりシンプルな動作をお好みの場合は、それぞれオフにできます。
一部のテーマでは、この機能を単体で販売しています。OceanWPには無料のWooCommerce連携が含まれ、Ocean eCommerce Proも別製品として提供されています。CanvasとOceanWPの比較では、ストア運営向けに各プランに含まれる内容をまとめています。
ステップ8：決済、速度、そしてテスト注文
デザインは後回し、お金まわりを先に。ストアが開いたと誰かに伝える前に、この内容を確認してください。
WooCommerceでの商用セットアップ
- 利用する決済ゲートウェイを接続し、認証を完了させてください。認証は通常、想定より時間がかかります。
- 実際に発送する地域に合わせて、税率ルールと配送ゾーンを設定します。
- 返金、返品、配送に関するページを作成し、フッターとチェックアウトからリンクしてください。
Canvasでの高速化
WooCommerceは、商品を販売しないページも含め、サイトのすべてのページでスクリプトとスタイルシートを読み込みます。5つのスイッチでこの負荷を減らします。ストアの出力がないページではWooCommerceのJavaScriptを削除し、注文の属性追跡を無効にし、カートを表示するすべてのページでサーバーへの問い合わせを繰り返すカートフラグメントのスクリプトを停止し、アカウントページとチェックアウトページ以外ではパスワード強度とselectのライブラリを外します。これらは全35件の最適化に含まれ、いずれも元に戻せます。
次に実際に注文してみる
自分のショップで、スマートフォンからモバイル回線を使って商品を購入してみてください。決済ゲートウェイがテスト返金に対応していれば、実際のカードで支払ってください。確認メールが届くこと、注文が管理画面に表示されることを確認してから、自分で返金します。この5分間で見つかる問題は、本来であれば顧客が見つけていたものです。
出典
このガイドでCanvas以外の内容に触れる場合は、その内容を説明している公式ページを以下に掲載しています。
- WooCommerceのインストールとアンインストールwoocommerce.com · WooCommerceは無料で、プラグイン画面からインストールでき、独自のセットアップウィザードが開きます。
- WooCommerceページwoocommerce.com · WooCommerceは、ショップ、カート、チェックアウト、アカウントにそれぞれ1ページを指定しています
- WooCommerceで税金を設定するwoocommerce.com · 税率はWooCommerceの設定で指定します
- 配送ゾーンの設定woocommerce.com · 配送ゾーンとは、商品を配送する地域のことです
- 注文アトリビューションのトラッキングwoocommerce.com · 注文の流入元の記録（アトリビューション）と、それを無効にするWooCommerceの設定
次のステップ
ショップ以外のサイト全体に関する2つのガイドと、ストア機能の詳細をすべてご紹介します。
それでもWooCommerceプラグインは必要ですか？
はい、Canvasのストアは引き続きWooCommerceプラグインで動作します。Canvasはその上にブロック、テンプレート、オプションを追加し、プラグインが管理を担うため、注文、商品、税金、配送、支払いは、他の拡張機能が想定する場所に残ります。ストアのデモから始める場合、インポートの前にセットアップウィザードがWooCommerceをインストールして有効化します。
ストアのブロックは追加購入が必要ですか？
いいえ、Canvasのストアブロックは追加料金なしで、すべてのプランに含まれています。24件のストアブロックはすべてプレミアムブロックであり、すべてのプランにすべてのプレミアムブロックが含まれています。さらに18件のストアテンプレートと21件のデモストアもすべて含まれます。Eコマース専用のティアはなく、ストア用のアドオンもありません。
これらを WooCommerce ブロックと組み合わせて使えますか？
はい、自由に組み合わせて使えます。Canvasのストアブロックは通常の登録済みブロックなので、同じテンプレートや同じページ内で、WooCommerceブロックやコアブロックと並べて使えます。一度に1つずつ差し替えれば、レイアウトのほかの部分はそのままで済みます。
ストアのデモをインポートすると、チェックアウトが2つになりますか？
いいえ。Canvasのストアデモをインポートしても、チェックアウトは1つだけになります。インポーターはサイトにあるショップ、カート、チェックアウト、アカウントの各ページを見つけ、デモのメニューとリンクをそれらに向けるため、各ページは1つずつ残ります。既存の商品と注文はそのまま残り、インポート全体を元に戻せます。
Canvasで次のウェブサイトを構築しましょう
初心者でも、フリーランサーでも、エージェンシーでも、同じブロックとデモを利用できます。まずは1つのサイトから始めて、同じライセンスで必要な数だけサイトを構築できます。