WooCommerceの商品カテゴリーを表示する方法（3つの方法） 

WooCommerceストアをセットアップし、商品を追加し、すべてを整然としたカテゴリーに整理しました。次に、ライブショップを見ると、カテゴリーナビゲーションが見当たらない、並べ替えられていない商品の壁が表示されます。

バックエンドの設定と、実際に買い物客が見るものとの間のそのギャップは、多くのストアオーナーを混乱させます。このガイドでは、組み込みのカスタマイザー、ショートコード、ブロック、およびSeedProdのビジュアルエディターの4つの方法を使用して、WooCommerceで商品カテゴリーを表示する方法を説明します。

WooCommerceに商品カテゴリーとタグを追加するにはどうすればよいですか？

WooCommerceにカテゴリーとタグを追加するのは簡単です。商品リストを作成するとき、またはWooCommerceダッシュボードから直接追加できます。

WooCommerceの商品カテゴリーを追加する

WordPress管理画面から商品 » カテゴリーに移動します。そこから、商品カテゴリー情報を入力します。

名前、スラッグ、親カテゴリー、説明、表示タイプ（商品、サブカテゴリー、またはその両方）、およびサムネイルを含めることができます。「新規カテゴリーを追加」をクリックして保存します。

WooCommerceの商品タグを追加する

WordPress管理画面から商品 » タグに移動します。次のページで、タグ名、スラッグ、説明を入力します。

「新規タグを追加」をクリックして保存します。

サイトにWooCommerceの商品カテゴリーを表示するにはどうすればよいですか？

カテゴリーが存在したら、買い物客が見ることができる場所に表示する必要があります。主な方法には、SeedProdのビジュアルエディター、WooCommerce Customizer、ショートコード、およびWooCommerceブロックの4つがあります。適切な方法は、テーマと必要な制御の量によって異なります。

WooCommerceのホームページに商品カテゴリーを表示するにはどうすればよいですか？

WooCommerceには、ホームページに商品カテゴリーを表示する組み込みの方法がありません。最も簡単な方法は、WordPress用のドラッグ＆ドロップウェブサイトビルダーであるSeedProdを使用することです。これにより、コードに触れることなくWooCommerceストアをカスタマイズできます。

カテゴリーがホームページに明確に表示されていると、買い物客は必要なものを探して商品グリッドをスクロールする代わりに、すぐに適切なセクションにたどり着きます。このレイアウトの変更だけで、購入前に訪問者を離れさせる摩擦を減らすことができると私は見てきました。

SeedProdを使用してホームページに製品カテゴリを追加するには、次の手順に従ってください。

ステップ1. SeedProdのインストールと有効化

SeedProdプラグインをダウンロードし、WordPressウェブサイトにインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストールに関するこのガイドに従ってください。

注意:WooCommerce機能にアクセスするには、SeedProd Eliteプランが必要です。

次に、SeedProd » 設定に移動し、ライセンスキーを入力してキーの検証をクリックします。これにより、選択したプランの機能がロック解除されます。

ライセンスキーは、SeedProdアカウントのダウンロードタブの下にあります。

ステップ2.カスタムWooCommerceテーマを作成する

次に、WooCommerceサイト用のカスタムテーマを作成します。SeedProd » テーマビルダーに移動し、テーマボタンをクリックします。

プロフェッショナルなWordPressテーマのライブラリが表示されます。好きなテーマにカーソルを合わせ、チェックマークアイコンをクリックします。

SeedProdは、テーマのすべての異なるテンプレートを自動的に作成し、テーマビルダーダッシュボードに一覧表示します。

ステップ3. WooCommerceホームページのカスタマイズ

リストでホームページテンプレートを見つけ、「デザインを編集」をクリックしてSeedProdのページビルダーで開きます。左側にブロックとセクションが表示され、右側にライブプレビューが表示されます。すべての変更はリアルタイムで更新されます。

SeedProdでホームページをカスタマイズするということは、ブロックをドラッグして配置し、クリックして編集することを意味します。商品カテゴリーを表示するには2つの方法があります。

1. カテゴリー別に商品を表示する
2. WooCommerce商品カテゴリーウィジェットを追加する

最初のオプションでは、WooCommerceブロックセクションにある商品グリッドブロックを見つけます。それをホームページのセクションまたは行にドラッグします。

商品グリッドをクリックして設定パネルを開きます。タイプドロップダウンから「カスタムクエリ」を選択し、「カテゴリーで選択」トグルを有効にします。

表示するカテゴリーの商品を選択します。Shiftキーを押しながら複数のカテゴリーを選択します。

代わりにタグでフィルタリングするには、「タグで選択」をトグルして含めるタグを選択します。

2番目のオプションでは、ウィジェットセクションに移動し、「商品カテゴリー」ウィジェットを見つけます。それをホームページのデザインにドラッグして配置します。

ウィジェットをクリックすると、タイトルを選択したり、カテゴリーを名前で並べ替えたり、ドロップダウンで表示したり、商品数を表示したり、階層を表示したりできます。

高度なタブでウィジェットのスタイルを制御します。レイアウトに満足したら、ステップ4に進んで公開します。

ステップ4. WooCommerceテーマを発行する

SeedProd » テーマビルダーに移動し、右上隅にあるSeedProdテーマを有効にするトグルを「オン」の位置に切り替えます。

ホームページをプレビューして、カテゴリーの表示をライブで確認します。

WooCommerceショップページに商品カテゴリーを表示するにはどうすればよいですか？

SeedProdを使用して、WooCommerceショップページにもカテゴリーを表示できます。SeedProd » テーマビルダーに移動し、「ショップページ」テンプレートの「デザインを編集」をクリックします。

ビジュアルエディターでページが開かれ、ショップページのデザインをカスタマイズできます。前の方法の手順に従って、カテゴリ別に商品を表示します。

商品カテゴリごとに個別のグリッドを作成することもできます。たとえば、ドリンク用、ヘアケア用などです。

新しい列を追加し、「商品カテゴリ」ウィジェットをドラッグして、カテゴリをショップページにリストまたはドロップダウンとして表示します。

プラグインなしでWooCommerceカテゴリをショップページに表示するにはどうすればよいですか？

ブロックテーマユーザー向けの重要な注意点：以下の「外観 » カスタマイズ」のパスは、クラシックWordPressテーマでのみ機能します。WooCommerceは、ブロックテーマのためにこれらのカスタマイザーのショップレイアウト設定を削除しました。ブロックテーマを使用しており、カスタマイザーにWooCommerceオプションが表示されない場合は、代わりにショートコードまたはWooCommerceブロックの方法を使用してください。

クラシックテーマでは、外観 » カスタマイズに移動し、WooCommerce、次に商品カタログをクリックします。「ショップページの表示」の下で、「カテゴリを表示」を選択します。

サブカテゴリ、商品、またはその両方を表示することを選択できます。

WooCommerceサブカテゴリをショップレイアウトに表示するにはどうすればよいですか？

外観 » カスタマイズ » WooCommerce » 商品カタログに移動し、「カテゴリの表示」の下で、ドロップダウンから「サブカテゴリを表示」を選択します。

変更を保存するには、公開をクリックします。

ショートコードを使用してWooCommerceのカテゴリーを表示するにはどうすればよいですか？

WooCommerceのショートコードを使用すると、ページビルダーやテーマの変更なしに、任意のページまたは投稿に商品カテゴリを表示できます。これは、クラシックテーマとブロックテーマの両方で機能します。

主な2つのショートコードは次のとおりです。

• [product_categories] は、サムネイルとカテゴリ名付きの商品カテゴリのグリッドを表示します。
• [product_category] は、特定の単一カテゴリの商品を表示します。

すべてのカテゴリを表示するには、WordPressのブロックエディターで任意のページを開き、ショートコードブロックを追加して、[product_categories]を貼り付けます。ページを保存してプレビューします。

レイアウトは属性を使用して制御できます。

• number は表示するカテゴリの数を制限します（例：[product_categories number="4"]）。
• columns はグリッドの列数を制御します（例：[product_categories columns="3"]）。
• ids はIDで特定のカテゴリのみを表示します（例：[product_categories ids="12,15,18"]）。
• hide_empty は、商品がないカテゴリを非表示にします（空のカテゴリを表示するには0に設定します）。

ショートコードのアプローチは、テーマを再構築せずにランディングページやカスタムページにカテゴリを表示したい場合に最も速いオプションです。ショップテンプレートの外側で構築されたページを含む、任意のページで機能します。

WooCommerceブロックを使用してカテゴリーを表示するにはどうすればよいですか？

ブロックテーマを使用している場合、WooCommerceブロックは商品カテゴリを表示するための最も最新の方法です。これらはGutenbergエディターで直接機能し、ブロックテーマではもはや利用できないカスタマイザーパスを置き換えます。

最もよく使用する2つのブロックは次のとおりです。

• 商品カテゴリリストは、すべての商品カテゴリをナビゲートできるリストを表示します。サイドバーやショップページレイアウトで便利です。
• カテゴリ別商品は、特定のカテゴリに絞り込まれた商品のグリッドを表示します。

商品カテゴリリストブロックを追加するには、ブロックエディターでページを開きます。+アイコンをクリックし、「商品カテゴリリスト」を検索して選択します。

追加後、サイドバーの設定で商品数を表示するかどうか、カテゴリ階層を表示するかどうか、トップレベルカテゴリのみを表示するかすべてのサブカテゴリを表示するかを制御できます。

この方法により、ブロックテーマのユーザーは、カスタマイザーなしでカテゴリナビゲーションをクリーンかつネイティブに追加できます。カテゴリを追加または名前を変更したときにも自動的に更新されます。

WooCommerceの商品カテゴリをサイドバーに追加するにはどうすればよいですか？

商品カテゴリをサイドバーに追加すると、買い物客はショップページに戻ることなく、探しているものを絞り込むことができます。SeedProdを使用すると、WordPressにカスタムサイドバーを追加し、ビジュアルエディターで設定できます。

SeedProd » テーマビルダーに移動し、サイドバーテンプレートを開きます。

商品グリッドブロックをドラッグし、クエリ表示オプションをカスタマイズして、1つのカテゴリまたはタグの商品を表示します。

この例では、2つの商品グリッドブロックがブログのサイドバーに2つの異なるカテゴリを表示しています。

WooCommerceのカテゴリをナビゲーションメニューに追加するにはどうすればよいですか？

外観 » メニューに移動し、右上隅にある「画面オプション」タブをクリックします。

「商品カテゴリ」チェックボックスをクリックします。これにより、すべてのWooCommerceカテゴリがメニュー画面に表示されます。

「商品カテゴリ」タブを開き、メニューに追加したいカテゴリを選択し、「メニューに追加」をクリックします。

アイテムをドラッグして位置を変更します。ショップページの下にネストすると、ドロップダウンカテゴリメニューが作成されます。

メニューを保存します。ホームページにアクセスして、WooCommerceナビゲーションメニューに商品カテゴリが表示されていることを確認します。

WooCommerceの商品カテゴリーが表示されないのはなぜですか？

カテゴリを設定したのにストアに表示されない場合は、一般的な原因をいくつか確認してください。

• 商品に割り当てられていないカテゴリ：カテゴリは、少なくとも1つの商品が割り当てられている場合にのみ表示されます。商品に移動し、各商品を開き、商品カテゴリパネルで正しいカテゴリがチェックされていることを確認します。
• 空のカテゴリはデフォルトで非表示：WooCommerceは、空のカテゴリをショップページから非表示にします。表示するには、WooCommerce » 設定 » 商品 » 表示に移動し、「空のカテゴリを非表示」のチェックを外します。
• ブロックテーマユーザー、カスタマイザーパスが削除されました：WooCommerceは、ブロックテーマのカスタマイザーからショップレイアウト設定を削除しました。代わりにショートコードまたはWooCommerceブロックメソッドを使用してください。
• キャッシュがクリアされていません：表示の変更を行った後、保存後もキャッシュされたページに古いレイアウトが表示されることがあるため、サイトとブラウザのキャッシュをクリアしてから確認してください。

商品カテゴリーはWooCommerceのSEOにどのように影響しますか？

商品カテゴリは単なるナビゲーションエイドではありません。それ自体がランキングページであり、設定方法がストアの検索パフォーマンスに影響します。

• カテゴリURLは独立したランキングページです: WooCommerceの各カテゴリには独自のURL（例: /product-category/mens-clothing/）があります。これらのページは、個々の商品ページとは別に、カテゴリレベルのキーワードでランク付けされる可能性があります。
• カテゴリの説明はキーワードコンテンツを追加します: 商品 » カテゴリの「説明」フィールドは、カテゴリアーカイブページにテキストを出力します。ターゲットキーワードを含む有用な説明は、検索エンジンに、そうでなければ薄いページになるものについて、より多くのインデックスを作成する機会を与えます。
• カテゴリと商品の間のキーワードカニバリゼーション: 商品ページとカテゴリページが同じキーワードをターゲットにしている場合、検索結果で互いに競合します。カテゴリページは広範な用語（「女性用ランニングシューズ」）、商品ページは特定の用語に使用します。
• フラットな構造はより速くランク付けされます: 深くネストされたカテゴリは、クロールの深さにおいてページをホームページから遠ざけます。よりフラットな構造は、カテゴリページをルートに近づけ、Googleが発見しやすくします。

ストアをカスタマイズするその他の方法:

• WooCommerce追加情報タブをカスタマイズする方法
• WooCommerceにカート表示ボタンを追加する方法
• WooCommerceでショップページタイトルを変更する方法
• WooCommerceで関連商品をどのように表示するか
• WooCommerceで注目の商品をディスプレイする方法

よくある質問

WooCommerceの商品カテゴリをメニューに表示するにはどうすればよいですか？

「外観 » メニュー」に移動し、「画面オプション」タブをクリックします。「商品カテゴリ」チェックボックスをオンにすると、左側のパネルにカテゴリが表示されます。追加したいカテゴリを選択し、「メニューに追加」をクリックします。これらを「ショップ」ページアイテムの下にドラッグしてネストすると、ナビゲーションにドロップダウンカテゴリメニューが作成されます。

WooCommerceの商品カテゴリがショップページに表示されないのはなぜですか？

最も一般的な原因は次のとおりです。カテゴリがどの商品にも割り当てられていない（WooCommerceはデフォルトで空のカテゴリを非表示にします）、またはCustomizerパスが削除されたブロックテーマを使用している場合です。

商品にカテゴリが割り当てられていることを確認してください。ブロックテーマを使用している場合は、Customizerの代わりに[product_categories]ショートコードまたはWooCommerceブロックメソッドを使用してください。

プラグインなしでWooCommerceカテゴリを表示できますか？

はい。WooCommerceには組み込みのショートコード[product_categories]が含まれています。WordPressエディターのショートコードブロックを使用して任意のページに追加すると、カテゴリがグリッドとして表示されます。

WooCommerce Customizerメソッド（外観 » カスタマイズ » WooCommerce » 商品カタログ）も個別のプラグインなしで機能しますが、クラシックテーマでのみ機能します。

WooCommerceカテゴリページにサブカテゴリを表示するにはどうすればよいですか？

「外観 » カスタマイズ » WooCommerce » 商品カタログ」に移動します。「カテゴリ表示」の下で、ドロップダウンから「サブカテゴリを表示」を選択し、「公開」をクリックします。

これにより、買い物客が親カテゴリをクリックしたときに表示されるものが制御されます。直接商品ではなく、子カテゴリのサムネイルが表示されます。

今日からWooCommerceストアの整理を始めましょう

最初にあった未整理の商品の大群は？買い物客が実際にナビゲートできるストアに置き換えるための4つの方法ができました。

カテゴリの表示場所と方法を完全に制御したい場合は、SeedProdのビジュアルエディターを使用すると、コードを一行も書かずにそれが可能になります。100万以上のWordPressサイトで使用されています。

ストアをまだ構築中であれば、WooCommerceに「近日公開」ページを追加する方法に関するこのガイドも気に入るかもしれません。

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。