WooCommerceで作るECサイト構築

WooCommerceは、WordPress構築システムにプラグイン形式で統合されたECソリューションです。現在、WooCommerceとWordPressはともにAutomattic社に属していますが、デフォルトではWordPress.orgが提供するネイティブバージョンにはこの機能が組み込まれておらず、ユーザーが必要に応じて手動でインストールおよび有効化する必要があります。WooCommerceの動作方法とWordPressとの関係を深く理解すると、WooCommerceでのサイト構築は実質的にWordPressサイト構築の延長線上にあることが分かります。したがって、WooCommerceのサイト構築プロセスはWordPressのサイト構築プロセスと密接に関連しています。

WooCommerceのECサイトを構築する前に、まずWordPressの展開を完了し、サイトが安定した運用環境を持つことを確保する必要があります。その後、開発段階でWooCommerceプラグインをダウンロードしてインストールし、管理画面で有効化することで、WordPressに電子商取引機能を持たせます。インストール完了後は、サイト開発をさらに細分化し、一般ページとECページに内容を分け、カート、注文管理、決済システムなどのコア機能の設定や二次開発を行うことが一般的です。 本記事では、画像とテキストを用いた実践的な操作手順でWooCommerceの構築および設定プロセスを詳しく解説します。WooCommerceプラグインのダウンロード、起動、決済システムの導入、商品管理や商品ページ編集など、各ステップを直感的なスクリーンショットとわかりやすい文章で紹介し、読者が理解しやすくスムーズに操作を完了できるようにしています。

《WooCommerce構築（WPでWooCommerce ECシステムを構築する実践全過程）》という記事は、以下の目次章に沿って段階的に展開し、詳細な操作デモと解説を読者に提供します。記事内の目次は大章・小章のタイトルを含み、それぞれにアンカーテキストリンクが埋め込まれているため、読者は興味のある部分へ素早くジャンプできます。既にある程度の経験があるか、実際の操作で一部のステップを完了している読者は、自身のニーズに応じて基礎部分を飛ばし、該当する章タイトルを直接クリックして参考にしたい内容へ迅速に移動することが可能です。

• WordPressプラグインディレクトリでWooCommerceをインストールする
  1. WordPressのプラグインディレクトリからWooCommerceを検索してインストールする
  2. WooCommerceを有効化する
• WooCommerceの決済システム連携
  1. WooCommerceでのPayPal決済の導入
  2. WooCommerceでのクレジットカード決済の導入
• WooCommerceの商品管理
  1. WooCommerceの商品管理画面へのアクセスパス
  2. WooCommerceの商品登録方法
  3. WooCommerceの商品情報編集
  4. WooCommerceの商品データ設定
  5. WooCommerceの商品カテゴリおよびタグの管理
  6. WooCommerceの商品URL設定
• WooCommerceの商品ページ編集
  1. Elementorのテーマビルダーへのアクセス方法
  2. WooCommerceの商品カテゴリページの編集
  3. WooCommerceの商品詳細ページの編集

一、WordPressプラグインディレクトリでWooCommerceをインストールする

通常のWordPressサイトを高機能なECプラットフォームへと変換するには、まず最初の技術的なステップとして、WordPressのプラグインディレクトリからWooCommerceをインストールして有効化することが必要です。 WooCommerceプラグインのインストールが完了すれば、EC機能をサイトに追加できるようになり、さらに商品ページの編集や機能設定などの作業へと進むことが可能になります。 WooCommerceを有効化すると、商品一覧表示、カート、決済、注文管理などの主要なEC機能が利用可能になり、加えて、決済システム、税率設定、配送オプションなどの高度な機能を統合するための土台が整います。 本章では、WordPressプラグインディレクトリでWooCommerceを検索・インストールする手順と、プラグイン一覧画面で有効化する操作方法を、筆者が読者とともに一つひとつ解説していきます。以下の手順に従って操作してください。

1、WordPressプラグインディレクトリでWooCommerceを検索・インストールする

（1）WordPress管理画面からプラグインディレクトリにアクセスする

上図の赤枠で示された部分のように、マウスをWordPress管理画面の左サイドバーの「プラグイン」上にホバーさせ、表示されたメニューから「新規追加」をクリックすると、以下のようなWordPressプラグインディレクトリの操作画面に移動します。

（2）WooCommerceプラグインを探してインストールする

WordPressプラグインディレクトリ画面の右上にある、上図の赤枠で示された検索ボックスにインストールしたいプラグイン名「WooCommerce」を入力します。入力後にエンターキーを押すと、検索結果が表示されます。その結果の中で、図の赤枠で示されたWooCommerceプラグインの右側にある「今すぐインストール」ボタンをクリックすると、WooCommerceがWordPressシステムにインストールされます。

2、WooCommerceを有効化する

WooCommerceプラグインのインストールが完了し、有効化が成功すると、注意深い読者の方はすでにお気づきかもしれませんが、WooCommerceプラグインの右側のボタン表示が「今すぐインストール」から「有効化」に変わります。この時点で「有効化」ボタンをクリックすれば、WooCommerceプラグインが即座に有効になり、さらに設定や使用の準備が整います。

二、WooCommerceの決済システム導入

WooCommerceによる商品管理だけでなく、B2C独立サイトにおいて、商品のオンライン販売を実現するためには、適切な決済システムの導入が非常に重要なステップです。一般的に、PayPalと国際的に通用するクレジットカード決済システムが最も一般的な2つの支払い方法であり、これらはサイト訪問者に便利で安全な決済体験を提供します。B2C独立サイトにおいて、決済システムの充実度はユーザーの支払い利便性に直結し、それが売上のコンバージョン率に決定的な影響を与えます。スムーズな決済フローはユーザー体験を向上させるだけでなく、カート放棄率の低減にもつながり、結果的にサイトの販売パフォーマンスを大幅に向上させます。本節では、PayPalと国際クレジットカード決済という2つの重要な決済システムをWooCommerceに導入する方法を詳しく解説します。わかりやすい手順と実践的な操作画面を通じて、読者はこれらの支払い方法を設定し、ご自身のB2C独立サイトにおいてスムーズなオンライン決済ソリューションを提供し、グローバル市場での売上コンバージョン率向上を支援する方法を学べます。

1、WooCommerceでPayPal決済を導入する

注意：WooCommerceでPayPal決済を導入する前に、必ず電子商取引サイト用のPayPalビジネスアカウントを所有していることを確認してください。これはWooCommerceがPayPal決済を正常に導入するための必須条件であり、個人用のPayPalアカウントはECサイトの決済システムとして使用できません。もしまだビジネス用PayPalアカウントの登録と設定が完了していなければ、まずは当ブログの「企業用PayPalアカウントの登録方法・設定方法」記事を参考に、手順通りにビジネスアカウントを申請し、決済機能が正常に有効化されていることを確認した上で、後続の導入作業を進めてください。

（1）WooCommerce支払い設定の初期画面からPayPal決済追加へ進む

上図のように、WooCommerceのインストールと有効化が完了すると、WordPress管理画面の左側メニューに新たに「支払い」項目が表示されます（図中の赤枠参照）。「支払い」ボタンをクリックすると、右側の操作画面にWooCommerceの支払い設定初期画面が表示されます。この画面内で、赤枠で示された「PayPal Payments」欄の右側にある「開始」ボタンをクリックすると、WooCommerceにPayPalを決済方法として導入するための設定プロセスに進みます。

（2）PayPal Payments設定ステップ1：PayPal Paymentsのインストール

前述の操作でWooCommerce支払い設定の初期画面から「PayPal Payments」の「開始」ボタンを押すと、右側の画面は上図のようにPayPal Paymentsのインストール手順画面に切り替わります。PayPal Paymentsのインストールは完全自動化されており、特に追加操作は不要です。インストールが完了すると、操作画面上の「開始」ボタンをクリックして、さらに詳細な設定作業へ進むことができます。

（3）PayPal Payments設定ステップ2：PayPal Paymentsの有効化

前のステップで「開始」ボタンをクリックすると、右側の操作画面は上図のようにWooCommerce設定の支払いタブ画面に切り替わります。ブラウザのスクロールバーを少し下にスクロールすると、現在の画面に「Activate PayPal」ボタン（上図の赤枠部分）が表示されます。「Activate PayPal」ボタンをクリックして、PayPal決済の残りの設定手順を完了してください。

（4）PayPal Payments設定ステップ3：PayPalログイン情報の入力

上図のように、このステップではポップアップ表示されるPayPalログインウィンドウにて、ビジネス用PayPalアカウント情報を正確に入力する必要があります。操作の妨げを避けるため、まずは赤枠で示された「同意する」ボタンをクリックしてCookie設定を承認し、関連する通知を閉じて操作をスムーズにします。続いて、メールアドレス入力欄にビジネスPayPalアカウントの登録メールアドレスを入力してください。このメールアドレスがPayPalログイン用のアカウントとなります。同時に、国/地域の欄はアカウント登録時に選択した地域と一致させる必要があります。そうしないとログイン失敗やアカウント認証エラーが発生する可能性があります。

（5）PayPal Payments設定ステップ4：PayPalアカウントのログインパスワード入力

上図に示されている通り、PayPalログインアカウントと登録時の国/地域を正しく選択した後、現在のPayPalパスワード入力欄にログインパスワードを入力します。正確に入力が完了したら、「ログイン」ボタンをクリックしてPayPalのログイン認証プロセスを進めます。

（6）PayPal Payments設定ステップ5：PayPalが要求する会社または組織情報の提供

上図のように、WooCommerceでPayPal決済システムを導入する際のPayPalログイン認証ステップで、システムはPayPalビジネスアカウントの登録情報を自動的に読み取り、企業情報の提出による認証を求めます。もしPayPalビジネスアカウント情報が既に完全であれば、追加入力は不要で、「同意して送信」ボタンをクリックするだけでこのステップを完了できます。もし情報が不完全と表示された場合は、指示に従い不足している項目を補完してください。必要なすべての項目を正確に入力後、「同意して送信」ボタンを押すことでPayPal決済システムとの連携が円滑に完了します。提出したPayPalビジネスアカウント情報の一致検証に合格すると、WooCommerceにおけるPayPal決済導入作業はすべて完了です。この時点で、再度WooCommerce支払い設定の初期画面に戻り、PayPal Paymentsの状態が有効になっているか確認してください。もし有効化されていない場合は、「有効化」ボタンをクリックして起動してください。

2、WooCommerceでのクレジットカード決済システムの導入

WooCommerceにクレジットカード決済システムを導入する過程では、国内の越境EC企業は通常、まずクレジットカード決済システムの提供業者と契約を締結し、その後提供業者から技術サポートを受けてプラグインのインストールと設定を完了させます。一般的には、このインストール作業はWordPress構築チームのエンジニアと決済システム提供業者の技術者が連携して行います。しかし、すべてのクレジットカード決済システムのプラグインがWooCommerceの公式プラグインディレクトリに存在するわけではありません。一部のサービス提供業者はプラグインファイルやダウンロードリンクを直接提供するため、手動アップロードでのインストールと有効化が必要となります。どのようなインストール方法を用いる場合でも、提供業者の技術サポートのもとで、クレジットカード決済システムが問題なく有効化され、オンライン決済機能が実現されます。もし、国外のクレジットカード決済システム提供業者（例えば、Stripe、Checkoutなど）を利用する場合は、まずアカウント登録を行い、WooCommerceでの認証や決済連携に必要なAPI IDや秘密鍵を取得する必要があります。地域や言語の違いから、国外のクレジットカード決済システム提供業者のプラグインインストールおよび設定は、ユーザー自身で行うケースが多いです。国内外の主要クレジットカード決済システム提供業者についてあまりご存知でない場合は、ぜひ以前博主が公開した『独立サイト国際クレジットカード決済チャネル』の記事を参考にしていただき、各種クレジットカード決済システムブランドの詳細情報を把握し、ご自身のビジネスニーズに最適な決済サービス提供業者を選択してください。

（1）WooCommerceの支払い設定初期画面からクレジットカード決済システム提供業者のディレクトリへ移動

上図のように、支払い設定の初期画面で「もっと見る」を選択すると、クレジットカード決済システム提供業者のプラグインディレクトリに進み、ご自身が利用したい、もしくは契約済みの決済サービス提供業者のプラグインを探せます。

（2）WooCommerceのクレジットカード決済システム提供業者ディレクトリからプラグインを選択してインストール

上図の赤枠部分のように、例としてStripeを使ってインストールをデモします。Stripeの欄内で、評価の左側にある「Free download」ボタンをクリックすると、下記のStripeプラグインダウンロードページに遷移します。

Stripeインストール手順一：WooCommerceのクレジットカード決済提供業者ディレクトリで「Add to store」を操作

前述の手順で「Free download」ボタンをクリックすると、WooCommerceクレジットカード決済提供業者ディレクトリのStripeホームページに移動します。上図のように、赤枠で囲まれた「Add to store」ボタンを見つけてクリックし、StripeプラグインをWooCommerceのカートページに追加します。注意すべき点は、StripeをWooCommerceに接続するプロセスは通常のプラグインのようにWordPressの管理画面内で直接インストールするのではなく、WooCommerceのクレジットカード決済提供業者ディレクトリを通じてオンラインでインストール手続きを完了させることです。この過程でWooCommerceアカウントのカートに追加されますが、この操作自体は料金が発生せず、あくまでインストール手続きの一部です。

Stripeインストール手順二：WooCommerceアカウントを作成してカートにログイン

上図のように、ここはWooCommerceのカートページです。このページでは、まずWooCommerceアカウントを作成し、サイトの関連情報を入力しなければStripeの接続作業を続行できません。赤枠で囲まれた「Create account」リンクをクリックし、WooCommerceアカウントの登録手続きを完了してログインすると、システムは自動的にカートページに戻ります。その後、画面の指示に従い各入力欄に必要な情報を記入し、最後にカートページ下部の「確認購入」ボタンをクリックすると、Stripeプラグインの取得手続きが完了します。

Stripeインストール手順三：StripeをWooCommerceストアに追加

続いての操作は、StripeをWooCommerceに追加し、StripeをWooCommerceの決済方法として設定することです。画面右上の「Add to store」ボタン（上図の赤枠で囲まれたボタン）をクリックし、次のステップに進みます。

Stripeインストール手順四：Stripeインストールのサイトドメインを入力

現在の画面の操作ウィンドウにて、赤枠で囲まれた入力欄にStripeプログラムをインストールするサイトのドメインアドレスを入力します。情報を入力し終えたら「確認」をクリックし、StripeプラグインがWooCommerceに正常にインストールされます。この操作により、StripeとWooCommerceの機能・データ連携が実現し、ECサイトがStripeを使った決済処理を円滑に行えるようになります。

Stripeインストール手順五：WooCommerceアカウントにStripeとのデータ接続権限を付与

上図のように、StripeプラグインのインストールとWooCommerceとのデータ連携によりクレジットカード決済機能を実装する過程で、WooCommerceがStripeとの接続を確立できるように権限付与操作が必要です。これがWooCommerceにStripeをインストールする最後のステップです。権限付与が完了すれば、WooCommerceの設定画面でプラグインのインストール状況を確認でき、StripeのIDや秘密鍵を使ってログイン設定を行い、決済機能を正常に稼働させられます。

Stripeインストール手順六：Stripeのインストール完了

WooCommerceのクレジットカード決済提供業者ディレクトリでのStripeプラグインのインストール手続き完了後、WooCommerceの設定内にある「支払い」オプション（上図赤枠参照）でStripeが正しくインストールされているか確認できます。「支払い」項目にStripeの決済方法が追加されていれば、インストールは成功しています。あとは右側の「設定を完了」ボタンをクリックし、Stripeの設定ページで登録したStripeアカウントのログイン認証とID・秘密鍵を順に入力して設定を完了させると、WooCommerceの製品コンポーネントや商品ページでStripeのクレジットカード決済サービスが利用可能になります。

三、WooCommerceの商品管理

WooCommerceの商品管理機能は、その魅力的で成熟したコアな強みの一つであり、ECサイトに必要なあらゆる面を包括しています。商品登録や表示内容の設定はもちろん、商品データの管理やカテゴリー運用においても、WooCommerceは強力かつ柔軟なサポートを提供します。ユーザーは商品の大きな画像、サムネイル、動画表示、詳細な商品説明文などの要素を簡単に設定でき、商品の見せ方をわかりやすく魅力的にすることが可能です。また、WooCommerceは価格設定、在庫、重量、サイズなど、商品に関する細かいデータの設定にも対応しており、店舗運営者が効率的に商品情報を管理し、在庫管理を最適化するのに役立ちます。さらに重要なのは、WooCommerceは柔軟な商品カテゴリーやタグ機能を備えており、商品タイプや用途などのさまざまな軸で分類できるため、ユーザーが簡単に商品を探して絞り込めるようになっています。商品のページURL設定についても、WooCommerceは簡単にカスタマイズできる方法を提供しており、店舗運営者はニーズに応じてSEOに優しいリンク構造を設計でき、検索エンジンランキングやユーザー体験を効果的に向上させられます。これらの機能により、WooCommerceは商品管理を効率的かつ高い操作性で実現し、WordPressのECサイトに強力なバックエンドサポートを提供しています。

1、WooCommerceの商品管理へのアクセス方法

上図の赤枠で示されているように、WooCommerceの商品管理にアクセスするには、WordPress管理画面左側のツールバーにある「商品」メニューをクリックします。すると、ページ右側の内容エリアが商品管理の初期画面に切り替わり、ここがWooCommerceの商品一覧管理画面となります。この画面で商品を閲覧・編集・追加・削除できます。

2、WooCommerceでの商品登録方法

上図の赤枠の通り、WooCommerceで新しい商品を登録する方法は2つあります。1つはWordPress管理画面左側の「商品」メニュー内にある「新規追加」ボタンをクリックする方法、もう1つはWooCommerceの商品管理初期画面の上部にある「新規追加」ボタンをクリックする方法です。どちらの方法でも商品編集画面に入り、新しい商品の追加作業を開始できます。

3、WooCommerceの商品内容編集

上図はWooCommerceの商品編集モードの画面です。WooCommerceの商品管理初期画面（商品一覧ページ）で、商品リストの名前をクリックするか、リスト上にマウスを乗せて表示される「編集」リンクをクリックすることで、特定の商品編集ページにアクセスできます。WooCommerceの商品編集ページでは、独立サイトの運営担当者が商品に対して豊富な要素や素材を追加し、商品展示の効果を高めてユーザー体験を最適化することが可能です。以下に商品編集ページ内の、商品要素や表示素材の追加に関する重要な機能を紹介します。

（1）商品タイトル

編集ページの上部（上図の赤枠で示された位置）には、商品タイトルを入力するためのテキストボックスがあります。このタイトルは商品詳細ページや一覧ページに直接表示されるため、ユーザーが検索や理解しやすいように、キーワードを含んだ簡潔で明確なタイトルの使用が推奨されます。

（2）商品説明

WooCommerceの商品の説明は、以下の例のように2種類に分かれています：短い説明と完全な説明。1枚目の例の赤枠で示された左側のテキストが短い説明、2枚目の例の赤枠で示されたテキストが完全な説明です。

短い説明の例図：

完全な説明の例図：

短い説明

商品の短い説明の編集領域は、商品編集ページの上部ではなく、ページ下部付近にあります（上図の赤枠で示されたエリア）。ブラウザのスクロールバーを下にスクロールして近くまで移動すると確認できます。WooCommerceは「短い説明」というフィールドを提供しており、商品詳細ページの目立つ位置に商品の主な特徴を表示するために使用されます。

完全な説明

完全な説明は長い説明とも呼ばれ、編集領域はページの上部にあり、商品タイトルのすぐ下に位置しています（上図参照）。この完全な説明編集エリアは、より詳細な商品紹介を書くためのもので、使用方法、仕様、利点などを含みます。リッチテキスト編集に対応しており、画像、リスト、リンク、フォーマット済みテキストの追加が可能で、内容をより魅力的にできます。

（3）商品画像

WooCommerceは2種類の商品の画像をサポートしています：商品画像（つまり商品のカバー画像）と商品ギャラリーです。それぞれの編集場所と操作方法は以下の通りです。

商品画像（いわゆる商品のカバー画像）

商品画像（いわゆる商品のカバー画像）は商品のメイン表示画像であり、商品詳細ページのトップ画像および商品コンポーネントのカバー画像として使用されます。商品画像の編集機能は商品編集ページの右側（上図の指定された位置）にあり、画像を直接クリックして変更および更新が可能です。

商品ギャラリー

「商品ギャラリー」機能は「商品画像」の下に位置しており、「商品ギャラリー画像を追加」ボタンをクリックすることで複数の画像をアップロードし、現在の商品ギャラリーとして設定できます。アップロードされた画像は商品詳細ページの表示ウィンドウでスライドショー形式で表示され、商品の異なる角度や使用シーンを紹介し、商品の魅力を高めます。

（4）メディア挿入（メディアファイルの追加）

商品説明および商品短い説明の編集エリアには、上図赤枠で示された「メディアを追加」ボタンがあります。ユーザーはこの「メディアを追加」ボタンをクリックして画像、動画、その他の添付ファイルを挿入でき、商品の紹介を視覚的に強化できます。

4、WooCommerce商品データの設定

ブラウザのスクロールバーをページ中央までドラッグすると、上図赤枠で示された「商品データ」設定エリアが表示されます。WooCommerceの商品編集ページでは、このエリアに商品価格、在庫、配送、商品属性などの複数の設定項目が含まれています。以下で、各設定項目の具体的な機能と使用方法を詳しく説明します。

（1）一般

「一般」タブは商品の基本的な販売情報を設定するためのもので、商品通常価格およびセール価格の設定を行います：

• 通常価格： 商品の標準販売価格を入力します。これは割引がない場合の購入価格です。
• セール価格： 期間限定割引や特価販売の価格を設定します。セール価格の適用期間を設定することで、WooCommerceが指定した日時に自動的に割引価格の適用開始および終了を行います。

（2）在庫

「在庫」タブでは、商品の在庫数量や購入制限を管理できます：

• 在庫管理： このオプションを有効にすると、商品の在庫数量を入力でき、在庫がなくなった場合はWooCommerceが自動的に販売を停止します。
• 在庫数量： 現在販売可能な在庫数を入力し、販売のたびに自動で更新されます。
• 在庫状況： 手動で商品の在庫状況を調整できます。例として「在庫あり」「在庫なし」「入荷待ち」などがあります。
• 個別販売： このオプションをチェックすると、顧客は1回の購入につき1個のみ購入可能になります。限定版商品や特別な販売戦略に適しています。

（3）配送

「配送」タブでは、商品の重量、サイズ、および適用される配送クラスを設定できます：

• 重量（キログラム）： 商品の実際の重量を入力します（単位はWooCommerceの設定によりキログラムまたはポンドなど）。送料計算に使用されます。
• 外形寸法（センチメートル）： 商品の長さ、幅、高さを定義します。物流コストの計算や特定の送料ルールの適用に役立ちます。
• 送料クラス： WooCommerceはカスタム配送クラスの作成をサポートしており、特定の送料ルールを割り当てるために使用されます。WooCommerceの設定で送料テンプレートを設定した後、ここで「送料クラス」のドロップダウンメニューから適用する送料クラスを選択できます。

（4）関連商品

「関連商品」タブは、商品に関連した販売戦略を設定し、客単価やコンバージョン率の向上を目指します：

• クロスセル： カートページでおすすめする商品を設定します。例えばカメラ購入時にメモリーカードをおすすめするような関連商品です。
• アップセル： 商品詳細ページで表示されるおすすめ商品を設定します。通常はより高価または上位版の商品を提案します。例：ベーシックモデル購入時に高性能モデルをおすすめ。

（5）属性

「属性」タブでは、商品の仕様やバリエーション情報を定義できます。例としてカラー、サイズ、素材などがあります：

• カスタム属性： 「色：赤、青」や「素材：綿、ポリエステル」など、手動で商品特性を追加できます。
• グローバル属性： WooCommerceの「商品 > 属性」で既に定義済みの共通属性をここで直接適用可能で、複数の商品で同じ属性設定を共有できます。
• バリエーション対応： バリエーション商品では属性を使い異なる商品バージョンを作成します。例：「サイズ：S/M/L」は複数のSKUに対応します。

（6）高度設定

「高度」タブは追加の製品設定機能を提供します：

• 購入メモ： 購入後に表示されるメッセージを入力できます。例：「ご購入ありがとうございます！発送は3〜5日以内を予定しています。」
• メニュー順序： WooCommerceカタログ内の商品表示順序を手動で調整します。数字が小さいほど上位に表示されます。
• レビュー許可： 商品ページで顧客がレビューや評価を投稿できるかを設定します。ソーシャルプルーフマーケティングに適しています。

5、WooCommerce商品カテゴリとタグ管理

WooCommerceの商品カテゴリとタグ管理の場所は上図の左右の赤枠で示されており、左側ツールバーの「商品」＞「カテゴリ」または「タグ」、および右側の「商品カテゴリー」や「商品タグ」エリアから管理できます。 商品カテゴリを作成したら、該当のカテゴリをチェックすることで、現在の商品をそのカテゴリに属させることが可能です。 注意点として、商品タグを作成するたびに、WooCommerceは商品ページに類似した新しいURLを動的に生成します。SEO対策を行わないと、検索エンジンの重複ページ問題を引き起こし、SEO効果に悪影響を及ぼす可能性があります。 そのため、商品カテゴリおよびタグを作成する際には必ずSEO最適化を同時に行い、不必要な検索エンジンからのペナルティを避けるようにしましょう。

6、WooCommerce商品のURL設定

WooCommerceの商品編集ページでは、カスタムURL設定機能が商品タイトルの下、タイトルに隣接した場所にあります（上図の赤枠参照）。この機能は、商品の詳細ページのURL末尾（スラッグ）を個別に設定できるようにし、サイトのURL構造を最適化するものです。URLの右側にある「編集」ボタンをクリックすることで、運営者は手動でスラッグを変更でき、SEOルールやユーザーの閲覧習慣に適した形に調整できます。 適切な商品URLの設定は、検索エンジンのクロール効率を高めるだけでなく、ユーザー体験の向上にも寄与します。例えば、WooCommerceのデフォルト商品URLには自動生成されたIDや意味のない文字が含まれる場合がありますが、カスタムスラッグを使用するとURLをより簡潔で理解しやすくし、商品に関連するキーワードを含めることでページの可読性と検索順位を向上させることが可能です。 さらに、URLの安定性も重要で、一度商品URLが確定し検索エンジンにインデックスされると、頻繁に変更しないことがSEO効果の維持や既存リンクの無効化防止に役立ちます。

四、WooCommerce商品ページ編集

WooCommerceの商品ページは、Elementorを編集ツールとして利用でき、非常に柔軟かつカスタマイズ可能です。これにより技術者はブランドのニーズやユーザー体験に合わせてスタイルの設計・開発がしやすくなります。 Elementorのテーマビルダーを使用すると、「Products Archive」（商品アーカイブページ）や「Single Product」（単一商品詳細ページ）のテンプレートファイルを作成・カスタマイズでき、WooCommerceの商品カテゴリーページや個別商品ページのレイアウト、インタラクション、機能を指定可能です。 Elementorのテンプレート設計ルールは非常に柔軟で、ユーザーはページの細部まで正確にコントロールできます。技術者はビジュアルインターフェースで素早くページ要素を調整できるだけでなく、ルーティング設定によって特定の商品ページや特定のカテゴリーページにスタイルを適用することも可能です。 表示方法、商品画像、ボタンのスタイル、商品説明やその他の情報のレイアウトなど、Elementorは独立サイトの技術者がニーズに応じて詳細にカスタマイズできるため、各ページがブランドイメージとユーザー要望に完全にマッチするように設計できます。

1、Elementorのテーマビルダーへのアクセス方法

管理者アカウントでWordPressサイトの管理画面にログインすると、フロントエンドページの上部にWordPressのデフォルトツールバーが表示されます。マウスを「Elementorで編集」にホバーすると、Elementorの操作メニューが表示されます。そのメニュー内で再度「テーマビルダー」（上図の赤枠部分）をクリックすると、Elementorのテーマビルダー操作ページにアクセスできます。ここでは、Elementorで作成された様々なページテンプレートファイルの作成および管理が可能です。

2、WooCommerce商品カテゴリーページの編集

（1）WooCommerce商品カテゴリーページテンプレートファイルの作成

Elementorのテーマビルダー操作ページにて、まず左側メニューから上図のように「Products Archive」を選択し、WooCommerceの商品アーカイブページのテンプレート設定画面に入ります。次に、ページ右上の赤枠で示された「Add New」ボタンをクリックすることで、新しいWooCommerce商品カテゴリーページのテンプレートファイルを作成できます。Elementorのデフォルト動作として、「Add New」ボタンをクリックすると、自動的に商品カテゴリーページテンプレートの編集画面に遷移します。

（2）WooCommerce商品カテゴリーページテンプレートファイルの編集

現在のElementor編集画面において、ユーザーは左側の「Product Archive」（商品アーカイブ）と「WooCommerce」モジュールを使い、直感的にコンポーネントをドラッグ＆ドロップしてWooCommerce商品カテゴリーページのレイアウトや内容をカスタマイズできます。 「Product Archive」モジュールでは、「Archive Title」（アーカイブタイトル）を選択して現在のカテゴリ名を表示したり、「Archive Products」（アーカイブ商品）で該当カテゴリ内の商品リストを表示したり、「Archive Description」（アーカイブ説明）を用いてカテゴリの詳細な説明を追加したりすることができます。これらのコンポーネントを組み合わせることで、商品カテゴリーページに階層感が生まれ、ユーザーの閲覧体験が向上します。

また、「WooCommerce」モジュール内には、「Products」（商品）、「Product Categories」（商品カテゴリー）、「Custom Add To Cart」（カスタムカートに追加）などの機能コンポーネントも用意されています。ユーザーはニーズに応じて、商品カテゴリーページを他のページ要素と組み合わせることができます。例えば、「WooCommerce Breadcrumbs」（WooCommerceパンくずリスト）を使ってページのナビゲーション性を高めたり、「Menu Cart」（メニューカート）を使用してページ内にカートボタンを追加し、ユーザーがいつでも選択した商品を確認できるようにしたりすることが可能です。Elementorのビジュアル編集機能を活用すれば、レイアウトの自由な調整やスタイルの変更ができ、商品カテゴリーページの表示をブランドのイメージやユーザー体験により適合させることができます。また、Elementorはリアルタイムプレビューにも対応しており、編集中に即座にページの仕上がりを確認できるため、最終的な商品カテゴリーページが期待通りのデザインになることを保証します。

（3）WooCommerceカテゴリーページテンプレートファイルの公開と適用ルールの設定

WooCommerceカテゴリーページテンプレートファイルの公開および適用ルール設定の第一歩：

ページ左側の下図赤枠で示された「公開」ボタンをクリックします。

WooCommerceカテゴリーページテンプレートファイルの公開および適用ルール設定の第二歩：

下図のページ上にある「Add Condition」ボタンをクリックし、テンプレートファイルの適用条件を追加します。

WooCommerceカテゴリーページテンプレートファイルの公開および適用ルール設定の第三歩：

下図に示す適用条件のドロップダウンメニューから「商品カテゴリー」を選択し、カテゴリー名を入力します。

WooCommerceカテゴリーページテンプレートファイルの公開および適用ルール設定の第四歩：

上記の操作を完了し、WooCommerceカテゴリーページテンプレートファイルを公開して適用ルールを設定したら、画面右下の「Save & Close」ボタンをクリックして公開を完了します。その後、適用ルールを設定したカテゴリーのページを開くと、作成・デザインしたレイアウトがページに適用されているのが確認できます。

3、WooCommerce商品詳細ページ編集

（1）WooCommerce商品詳細ページテンプレートファイルの作成

まず、上図のElementorテーマビルダーのページ左側で作成したい「Single Product」のテンプレートタイプを選択します。次に、「Single Product」右側のコンテンツエリア上部（上図赤枠で示された位置）にある「Add New」ボタンをクリックすると、WooCommerce商品詳細ページテンプレートファイルを作成し、直接テンプレート編集モードに移行します。

（2）WooCommerce商品詳細ページテンプレートファイルの編集

Elementorを使ってWooCommerce商品詳細ページテンプレートファイルを編集する際、ユーザーはウィジェットをドラッグ＆ドロップすることでページのレイアウトや機能を自由にカスタマイズできます。上のスクリーンショットからわかるように、Elementorのサイドバーには「Add To Cart（カートに追加）」、「Product Price（商品価格）」、「Product Title（商品タイトル）」、「Product Images（商品画像）」などWooCommerce関連の重要なウィジェットが多数用意されています。これらのウィジェットを編集エリアにドラッグすることで、オリジナルの魅力的な商品展示ページを作成し、ユーザー体験やコンバージョン率の向上を図れます。

編集中は、それぞれのウィジェットのスタイル、レイアウト、インタラクションを柔軟に調整可能です。例えば、商品価格はカスタムフォントや色、背景を設定して目立たせたり、商品画像はスライダー、ズーム、360°回転ビューなどの表示モードを設定して視覚的なインパクトを強化できます。また、「Product Related（関連商品）」や「Upsells（アップセル）」などのウィジェットはユーザーへの効果的な商品提案をサポートし、売上アップに貢献します。さらに、Elementorのナビゲーション機能により異なるレイアウトエリア間の切り替えがスムーズになり、編集効率も向上します。これらのウィジェットやレイアウト設定を適切に活用することで、ブランドイメージに合ったプロフェッショナルな商品詳細ページテンプレートを作成し、全商品または特定カテゴリの商品詳細ページに柔軟に適用できるため、WooCommerceショップ全体のビジュアルとユーザー体験を大幅に向上させることができます。

（3）WooCommerce商品詳細ページテンプレートファイルの公開および適用ルール設定

WooCommerce商品詳細ページテンプレートファイルの公開および適用ルール設定の第一歩：

ページ左側の下図赤枠で示された「公開」ボタンをクリックします。

WooCommerce商品詳細ページテンプレートファイルの公開および適用ルール設定 第二歩：

下図の操作ウィンドウで「Add Condition」ボタンをクリックし、テンプレートファイルの適用条件を追加する設定画面に進みます。

WooCommerce商品詳細ページテンプレートファイルの公開および適用ルール設定 第三歩：

Elementorの製品詳細ページテンプレートファイルの適用ルール設定では、ユーザーはニーズに応じてテンプレートの適用範囲を柔軟に設定できます。このステップは非常に重要で、商品詳細ページのスタイルが適切なページに正しく適用されるかどうかを決定します。各適用条件の役割をより明確に理解するために、以下のような一般的な使用シーンに細分化して説明します：

① すべての商品詳細ページに適用

新しく作成した商品詳細ページテンプレートをWooCommerceショップ内のすべての商品ページに適用したい場合は、「すべての商品（All Products）」を選択します。これにより、新規追加された商品も既存の商品も自動的にこのテンプレートを使用し、サイト全体の商品詳細ページの統一感が保たれます。

② 特定の商品カテゴリに適用

異なるカテゴリの商品には異なる詳細ページレイアウトが必要になる場合があります。例えば、電子製品カテゴリはより複雑な仕様表示が必要ですが、衣料品カテゴリは画像表示やカラーオプションに重点を置くかもしれません。この場合、「商品カテゴリ（Product Category）」を適用条件として選び、具体的なカテゴリ（「電子製品」や「衣料品」など）を指定し、そのカテゴリに属するすべての商品詳細ページにのみテンプレートを適用します。

③ 特定のサブカテゴリに適用

商品カテゴリ体系が複雑な場合、テンプレートの適用範囲をさらに細かく設定できます。例えば、「衣料品」カテゴリの下に「メンズ」と「レディース」というサブカテゴリがある場合、「メンズ」商品のためだけにテンプレートを設計したいなら、「商品サブカテゴリ（Product Subcategory）」を適用条件として選択し、「メンズ」カテゴリを指定します。こうすることで、このテンプレートは「メンズ」カテゴリ内の商品にだけ適用され、他のカテゴリには影響を与えません。

④ 特定の商品タグに適用

WooCommerceでは、「商品タグ（Product Tags）」を使って商品をマークできます。例えば「新商品」「ベストセラー」「セール」などです。Elementorでもテンプレートを特定のタグが付いたすべての商品に適用可能です。例えば、「期間限定セール」タグが付いているすべての商品に特定の詳細ページテンプレートを使いたい場合、「商品タグ」を適用条件として選択し、該当タグ名を入力します。

⑤ 特定のユーザー役割に適用（高度な適用）

会員制サイトや卸売ビジネスのサイトでは、異なるユーザーグループに異なる商品詳細ページを表示したい場合があります。例えば、小売ユーザーと卸売業者では価格表示や商品説明が異なる必要があります。高度なWooCommerceサイトでは、プラグインでElementorの機能を拡張し、ユーザー役割に基づいて異なるテンプレートを適用できるようにすることも可能です。

WooCommerce商品詳細ページテンプレートファイルの公開および適用ルール設定 第四歩：

上記の適用条件の設定が完了したら、図示の右下の「Save & Close」ボタンをクリックします。これにより、Elementorは商品詳細ページテンプレートを指定したページに自動的に適用します。その後、ユーザーはフロントエンドのページで動作をテストし、テンプレートファイルが正しく機能していることを確認し、必要に応じてテンプレートのレイアウトや内容をさらに最適化できます。

結び： 本記事を通じて、普通のWordPressサイトを強力なECプラットフォームに変換する方法を理解いただけたかと思います。WooCommerceプラグインのインストールと有効化から始まり、PayPalやクレジットカードなどの決済システムの接続方法を解説し、便利な決済機能をサイトに実装しました。次に、商品管理機能の詳細、製品表示、分類、データ設定などの操作方法について説明し、Elementorエディターを使った商品ページスタイルのカスタマイズ方法を紹介しました。これらのステップを通じて、WooCommerceのECサイトをスムーズに構築・最適化し、ユーザー体験の向上と売上増加を実現できます。WooCommerceは機能が非常に豊富なECシステムであるため、本記事では一部の機能紹介に留まる部分もあります。WooCommerceのさらなる機能設定については、筆者が以前公開した『WooCommerceの機能パラメーター設定』の記事をご参照ください。両記事を併せて読むことで、WooCommerceの技術的な実践をより包括的に理解し、ECサイトの開発と管理能力を高めることができます。

最後に、もし時間が限られていて、学習や技術実践にかけるコストが大きく、技術面の学習や実操作に深く関わるつもりがない場合は、本記事を読むことでWordPress上にWooCommerceを構築し、電子商取引機能や商品オンライン販売の原理を理解することができますが、実際の技術作業は専門家に任せることをおすすめします。専門的なことは専門家に依頼し、弊社のWordPress構築および技術開発サービスをご利用ください。ロジックシデジタルテクノロジー(SZLOGIC)のチームにご連絡いただき、WooCommerceの開発をお任せいただけます。

この記事はロジックシー・デジタルテクノロジー株式会社（SZLOGIC）によって著作権を所有しています。個人的なシェアや学習は歓迎しますが、無断で商業目的での使用や転載は厳禁です。