要約：WooCommerceストアのページをカスタマイズする方法
WooCommerceストアページは、ストアの商品アーカイブです。テンプレートファイルから構築されているため、通常のページのように編集することはできませんが、適切なツールがあれば完全に再設計することができます。
- 概要 – WooCommerceのarchive-product.phpテンプレートから生成される、ストアのメイン商品リスト
- 方法1：SeedProd – WooCommerceブロック、300以上のテンプレート、完全なデザインコントロールを備えたドラッグ＆ドロップビルダー（コード不要）
- 方法2：WordPressエディター – サイトエディター（ブロックテーマ）またはWooCommerceカスタムizer（クラシックテーマ）を使用した組み込みオプション
- SeedProdの使用目的 – カスタムレイアウト、バナー、注目のセクション、ブランドに合わせたWooCommerceストアのデザイン
- WordPressエディターの使用目的 – 並べ替え順序、1行あたりの商品数、列の変更などの簡単な表示調整
WooCommerceストアを初めて設定したとき、販売を開始することに興奮していましたが、デフォルトのストアページが平凡で、ブランドにまったく合わないことにすぐに気づきました。
もしあなたが同じ状況なら、心配しないでください。WooCommerceはWordPressにeコマース機能を追加するための最も人気のある方法であり、一行のコードを書かなくても、WooCommerceストアのレイアウトを際立たせる簡単な方法があります。
SeedProdのようなドラッグ＆ドロップビルダー（コード不要）または組み込みのWordPressエディターを使用して、WooCommerceストアページをカスタマイズできます。どちらの方法も30分未満で完了し、開発者は必要ありません。
これらは、デフォルトのストアページを、よりクリーンで、より魅力的で、訪問者を購入者に変えるのにずっと効果的なものに変えるために私が使用した正確な方法です。
WooCommerceストアページとは何ですか？
WooCommerceストアページは、ストアのすべての商品を一覧表示するデフォルトの商品アーカイブページです。WooCommerceをインストールすると、テーマのレイアウト設定を使用してこのページが自動的に作成されます。
ストアのメインカタログまたはストアフロントと考えてください。通常、顧客は特定の商品ページにクリックする前にここで閲覧します。
デフォルトでは、ストアページは商品リストからコンテンツを取得し、以下を表示します：
- 商品画像
- タイトルと短い説明
- 価格
- 商品カテゴリとタグ
- 星評価とレビュー（有効な場合）
WordPressテーマとWooCommerceテンプレートファイルを使用して動的に生成され、ブランドに合わせてカスタマイズしてコンバージョンを向上させることができます。
適切に設計されたストアページは、訪問者が探しているものをすばやく見つけるのに役立ち、購入プロセスでの摩擦を減らし、売上を増加させます。
WordPressエディターでWooCommerceストアページを直接編集しても、期待どおりには機能しません。ストアページは、WooCommerceがPHPフックとショートコードを使用して商品アーカイブを動的に表示するために使用する、archive-product.phpという名前のテンプレートファイルから生成されます。
だから、ショップページで「ページを編集」をクリックしても、WooCommerceのショップページテンプレートや商品グリッドを制御することはできません。カスタマイズするには、SeedProdのようなプラグインが必要になります。これはテンプレートを独自のデザインに置き換えたり、組み込みのWooCommerceカスタマイザーやサイトエディターのオプションを使用したりします。
WooCommerceのショップページをカスタマイズすべき理由
実店舗に入ったときに、すべての商品が棚に無造作に散らばっているのを想像してみてください。看板もなく、カテゴリーもなく、おすすめ商品もない。おそらくすぐに店を出てしまうでしょう。
多くの買い物客が、デフォルトのWooCommerceショップページにアクセスしたときに経験するのはまさにこれです。文脈や方向性のないプレーンな商品グリッドは、高い直帰率と販売機会の損失につながります。
ショップページをカスタマイズすると、以下のことができます。
- ユーザーエクスペリエンス（UX）を向上させることで、顧客がお探しのものを簡単に見つけられるようにする
- コンバージョンを増加させることで、ベストセラー、セール、または高利益率の商品を強調する
- SEOを改善することで、キーワードを豊富に含んだコンテンツとスキーママークアップを追加する
- 直帰率を下げることで、より良いナビゲーションと視覚的な階層を提供する
- ブランドの信頼を構築することで、お客様の声、レビュー、またはユーザー生成コンテンツを表示する
最適化されたWooCommerceストアのデザインは、訪問者をバイヤーに変えるための重要な部分です。まだストアをゼロから構築している場合は、WordPressでオンラインストアをセットアップする方法に関するこのガイドが良い出発点になります。
WordPressでWooCommerceショップページをカスタマイズする方法
WordPressでWooCommerceショップページをカスタマイズするには、いくつかの方法があります。詳しく見ていく前に、オプションを簡単に見てみましょう。
| 方法 | 最適 | コードが必要？ |
|---|---|---|
| SeedProd | 完全なデザインコントロール、カスタムレイアウト、バナー、特集セクション、ブランドに合わせたWooCommerceショップ | いいえ |
| WordPressエディター（サイトエディター / カスタマイザー） | 簡単なレイアウト変更、商品の並び順、列数、追加プラグイン不要 | いいえ |
| カスタムコード | ツールでは提供されない高度な変更 | はい（開発者推奨） |
方法1：SeedProdを使用してWooCommerceショップページをカスタマイズする
最初の方法では、SeedProdを使用してカスタムWooCommerceショップを構築します。
SeedProdは、WordPress向けの最高のドラッグ＆ドロップウェブサイトビルダーであり、100万人以上のユーザーがいます。コードなしでカスタムWordPressテーマ、コンバージョン率の高いランディングページ、レスポンシブなウェブサイトレイアウトを作成できます。
パフォーマンステストでは、SeedProdはElementorの1,882msに対し556msで読み込まれ、HTTPリクエストは半分でした。これは、ページスピードが重要なカスタムWooCommerceショップにとって強力な選択肢となります。
このプラグインを使用すると、WooCommerce統合機能を使用してオンラインストア全体を作成することもできます。数回クリックするだけで、ショップページ、商品ページ、ショッピングカート、チェックアウトなどをカスタマイズできます。
SeedProdには300以上のプロフェッショナルなテーマとテンプレートが用意されています。そこから、使いやすいコンテンツブロックとセクションを使用して、WooCommerceストアのデザインをカスタマイズできます。
SeedProdでWooCommerceショップページをカスタマイズするには、これらの手順に従ってください。
ステップ 1. SeedProd ウェブサイトビルダーをインストールする
最初のステップは、SeedProdウェブサイトビルダープラグインのコピーをダウンロードすることです。
注意： SeedProdは、シンプルなランディングページを作成するための無料バージョンを提供しています。ただし、ここでは、必要なWooCommerce機能のために SeedProd Eliteプラン を使用します。
次に、WordPressウェブサイトにSeedProdをインストールする必要があります。ヘルプが必要な場合は、 WordPressプラグインのインストール の手順に従ってください。
SeedProdをインストールして有効化した後、SeedProd » 設定に移動し、プラグインのライセンスキーを入力してください。
SeedProdウェブサイトにログインし、「ダウンロード」セクションからコピーすることで、ライセンスキーを見つけることができます。
ライセンスキーを入力し、次のステップに進む前に ライセンスキーの確認 ボタンをクリックしてください。
ステップ2.カスタムWooCommerceテーマを作成する
SeedProdのテーマビルダー機能を使用して、WooCommerceショップページをカスタマイズします。これにより、既存のWordPressテーマが上書きされ、カスタマイズされたものに置き換えられます。
WordPressダッシュボードから SeedProd » Theme Builder に移動すると、それを見つけることができます。
SeedProdでeコマーステーマを作成するには、2つの方法があります。
- テーマの各部分（テンプレート）を個別に作成する
- 既製のWordPressテーマテンプレートで、すべてのテーマテンプレートを作成する
このチュートリアルでは2番目のオプションを使用します。これにより、WooCommerceウェブサイトのすべての部分が自動的に作成されるためです。
画面上部の テーマ ボタンをクリックして、SeedProdのテーマテンプレートギャラリーを起動します。オンラインストアのデザインを含む多くのテーマから選択できます。
このチュートリアルでは、「家具店」テーマを使用します。
テーマをインポートするには、サムネイルにカーソルを合わせ、チェックマークアイコンをクリックします。
下のスクリーンショットに示すように、SeedProdはテーマのすべてのテンプレートを自動的に作成します。これには以下が含まれます：
各テンプレートは、SeedProdのドラッグアンドドロップビルダーでカスタマイズできます。ステップ3でショップページテンプレートをカスタマイズする方法を説明します。
ステップ3. WooCommerceショップページをカスタマイズする
SeedProdでWooCommerceショップページをカスタマイズするには、「ショップページ」テンプレートにカーソルを合わせ、 デザインを編集 リンクをクリックします。
リンクをクリックすると、ショップページテンプレートがSeedProdのビジュアルドラッグアンドドロップページビルダーで開きます。
左側には、ページに追加できるブロックとセクションがあります。右側では、ページがどのように見えるかをリアルタイムでプレビューできます。
デフォルトでは、ショップページにすべての商品のリストが表示されます。新しいレイアウト、コンテンツブロック、セクションを追加することで、これを変更できます。
たとえば、セールやプロモーションを紹介するスクロールバナーを追加したいとします。その場合は、 イメージカルーセル ブロックをドラッグして、カスタムバナー画像をアップロードできます。
次に、ブロック設定でカルーセルをダークまたはライトテーマに変更したり、スライダーを自動再生したり、画像キャプションを表示したりしてカスタマイズできます。
注目の商品やベストセラー商品を強調したい場合はどうすればよいでしょうか？そのためには、ページに新しいセクションを追加し、下にスクロールしてWooCommerceブロックパネルに移動し、ベストセラー商品ブロックをページにドラッグします。
このブロックは、トップセラー商品を均一なグリッドで表示します。
カスタム背景色を指定することで、この新しいページセクションをより目立たせることができます。
次に、ベストセラー商品ブロックの詳細設定で、色、タイポグラフィ、カートに追加ボタンを変更できます。
SeedProdのWooCommerceブロックを使用して、カテゴリ別に商品を表示することもできます。そのためには、商品グリッドブロックをドラッグし、「クエリタイプ」をカスタムクエリに変更して、カテゴリで選択オプションをクリックします。
そこから、商品グリッドに含めるカテゴリを選択できます。
ショップページに追加できるその他のブロックには、次のようなものがあります。
- お客様の声で信頼性と信憑性を高める
- カウントダウンタイマーでセールに緊急性を作り出す
- よくある質問を表示するアコーディオン
- ユーザー生成コンテンツを表示するためのFacebookまたはTwitter埋め込み
WooCommerceのショップページタイトルを簡単に変更することもできます。
ショップページに満足したら、画面右上にある緑色の保存ボタンをクリックします。
これで、同じプロセスに従って、WooCommerceストアの他の部分をカスタマイズできます。「テーマエディター」のいずれかの「デザインを編集」をクリックし、ブランドに合わせてレイアウトとスタイルをカスタマイズします。
ステップ4. カスタムショップページを公開する
WooCommerceサイトが希望どおりの外観になったら、公開する準備ができました。そのためには、 SeedProd » テーマエディター に移動し、右上隅にある「SeedProdテーマを有効にする」トグルを「はい」の位置に切り替えます。
これで、WooCommerceのショップページをウェブサイトでライブプレビューできます。
方法2：WordPressエディターを使用してWooCommerceショップページをカスタマイズする
サードパーティビルダーを使用したくない場合は、WordPressとWooCommerceにレイアウトを調整するための組み込みツールが含まれています。どちらのオプションを使用するかは、アクティブなeコマーステーマによって異なります。
サイトエディター（ブロックテーマ）を使用する
サイトでブロックテーマ（Twenty Twenty-FourやTwenty Twenty-Fiveなど）を使用している場合は、サイトエディターでWooCommerceショップページテンプレートを直接編集できます。
WordPressダッシュボードから外観 » エディターに移動します。テンプレートリストを開き、商品カタログテンプレート（一部のテーマではショップと表示されます）を探します。それをクリックしてテンプレートエディターを開きます。
そこから、ブロックを追加、削除、または並べ替えて、WooCommerceショップのレイアウトを変更できます。完了したら、保存をクリックします。
クラシックカスタマイザー（クラシックテーマ）を使用する
サイトでクラシックテーマを使用している場合、WooCommerceはWordPressカスタムizerに直接表示設定を追加します。
WordPressダッシュボードから外観 » カスタマイズに移動します。次に、カスタマイズオプションを表示するにはWooCommerce » 商品カタログをクリックします。
「ショップページの表示」ドロップダウンメニューをクリックし、レイアウトを選択します。
たとえば、「カテゴリーを表示」を選択すると、ショップページに商品カテゴリーのみが表示されます。
または、「商品を表示」を選択すると、商品のみが表示されます。
「カテゴリーと商品を表示」オプションを使用すると、まず商品カテゴリーを表示し、次に商品のグリッドを表示することもできます。
さらに、次のように商品を表示できます。
- 人気
- 平均評価
- 最新
- 価格
また、各ページに表示する1行あたりの商品数と行数を選択することもできます。
これは、WooCommerce Customizerを使用してスタイル設定されたショップページのプレビューです。
FAQ：WooCommerceショップページのカスタマイズ
WordPressでWooCommerceのショップページを直接編集できないのはなぜですか？
WooCommerceのショップページは、通常のページコンテンツとして保存されるのではなく、archive-product.phpというテンプレートファイルから生成されます。「ページを編集」をクリックするとページオブジェクトにアクセスできますが、商品グリッドとレイアウトはブロックエディターではなく、WooCommerceのPHPテンプレートシステムから取得されます。デザインを変更するには、SeedProdのようなテンプレートをオーバーライドするツール、または組み込みのCustomizerとSite Editorオプションが必要です。
WooCommerceのショップページに表示される商品をどのように変更しますか？
WordPressの個々の商品設定から商品の表示を制御できます。商品を「おすすめ」に設定して目立たせたり、公開ステータスを調整して表示したり非表示にしたり、商品カテゴリーやタグを使用して表示されるものを整理したりできます。WooCommerce Customizerを使用すると、外観 » カスタマイズ » WooCommerce » 商品カタログの下で、デフォルトの並べ替え順序（人気順、平均評価順、新着順、価格順）を変更することもできます。
WooCommerceのショップページテンプレートファイルの名前は何ですか？
WooCommerceのショップページは、archive-product.phpテンプレートファイルを使用します。これは、WooCommerceプラグインフォルダ内のwoocommerce/templates/にあります。コードでカスタマイズするには、テーマのwoocommerce/フォルダにコピーしてそこで変更します。これにより、プラグインのアップデート時に変更が上書きされるのを防ぐことができます。
WooCommerceのショップページにバナーまたはおすすめセクションを追加するにはどうすればよいですか？
最も簡単な方法は、SeedProdのドラッグアンドドロップビルダーを使用することです。SeedProdでショップページテンプレートを開き、画像カルーセルブロックを商品グリッドの上にドラッグしてスクロール可能なバナーを作成します。おすすめ商品のセクションについては、新しいセクションを追加し、ベストセラー商品またはおすすめ商品ブロックをドロップします。各セクションは、カスタム背景、色、タイポグラフィで個別にスタイル設定できます。
WooCommerceのショップページと商品ページの違いは何ですか？
ショップページ（商品アーカイブとも呼ばれます）は、すべての商品をグリッド表示する一覧ページです。商品ページは各商品の個別のページで、詳細な説明、画像、価格、カートに追加ボタンが表示されます。通常、顧客は最初にショップページにアクセスし、閲覧してから個々の商品ページに移動します。どちらもSeedProdでカスタマイズできます。
このガイドが、WooCommerceのショップページをカスタマイズする方法を学ぶのに役立ったことを願っています。
SeedProdを使用すると、コードを一行も触ることなく、WooCommerceのショップレイアウトを完全に制御できます。ドラッグ＆ドロップビルダーにより、WooCommerceストアをカスタマイズしたことがなくても、簡単に設定できます。
WooCommerceの売上を伸ばす準備はできましたか？
ついでに、WooCommerceコンバージョン追跡を設定する方法に関するこのガイドや、おすすめのWooCommerceアフィリエイトプラグインに関するこのガイドもご覧ください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
