WooCommerce ショップページに製品カテゴリを表示する方法

公開: 2024-05-03

WooCommerce セットアップの操作は、新規ユーザーにとっても熟練ユーザーにとっても同様に困難な場合があります。この包括的なガイドでは、WooCommerce のショップページに製品カテゴリを表示する方法について、明確で段階的な手順を説明します。この記事では、これらのプロセスをわかりやすく説明することで、すべての WooCommerce ストアオーナーがサイトの機能とユーザーエクスペリエンスを効果的に強化できることを保証します。

よくある質問

WooCommerce で製品カテゴリ名を表示するにはどうすればよいですか?

WooCommerce ストアで製品カテゴリ名を表示するには、 WordPress ダッシュボードにアクセスする必要があります。 [外観] > [カスタマイズ] > [WooCommerce] > [製品カタログ]に移動します。ここには、 [ショップページの表示]オプションがあります。カテゴリ、製品、またはその両方を表示することを選択できます。カテゴリを選択すると、ショップページのカテゴリのみがリストされます。

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

WooCommerce カテゴリページにサブカテゴリを表示したい場合は、ダッシュボードの[WooCommerce] > [設定]セクションに移動します。 [製品]タブの [表示設定] で、 [デフォルトのカテゴリ表示で両方を表示] を選択すると、アーカイブページで親カテゴリの横にサブカテゴリが表示されます。

WooCommerce で特定のカテゴリの商品を表示するにはどうすればよいですか?

特定のカテゴリの製品を特集するには、投稿またはページエディターでショートコードを使用できます。ショートコード[products category='your-category-slug'] は、 「your-category-slug」を表示したいカテゴリのスラッグに置き換えて、希望のカテゴリのスラッグでカスタマイズできます。

WooCommerce ショップページに商品説明を表示するにはどうすればよいですか?

WooCommerce ショップページに商品説明を表示するには、通常、テーマファイルを操作します。ただし、テーマの更新を考慮したより安全なルートを確保するには、追加のフックと編集を可能にするプラグインを使用するか、テーマに WooCommerce 設定のカスタマイザーで製品説明を直接表示するオプションがあるかどうかを確認してください。

カテゴリを設定する

WooCommerce では、商品をカテゴリ別に整理することは、顧客がショップをナビゲートできるようにするための重要なステップです。

カテゴリはストアを構造化し、類似したアイテムをグループ化するための階層として機能します。本の章と同じように、カテゴリを使用すると、種類に基づいて製品を簡単に見つけることができます。

まず、親カテゴリを作成します。これは広範なグループとして機能します。これを主要な章と考えてください。この下にサブカテゴリを追加して、製品をさらに分類できます。

このセクションでは、ストアに新しいカテゴリを追加し、既存のカテゴリを調整する方法について説明します。

新しい製品カテゴリの追加

カテゴリを管理する場合、 [製品] > [カテゴリ]に移動すると、新しいカテゴリを追加するか、既存のカテゴリをカスタマイズするオプションが表示されます。

WordPress 管理者の製品、カテゴリセクションでカテゴリを追加および編集します。

WooCommerce に新しい製品カテゴリを追加するには:

WordPress ダッシュボードで[製品] > [カテゴリ]に移動します。
[新しいカテゴリの追加]セクションで次のようにします。

名前: カテゴリの名前を入力します。
Slug : URL に対応したバージョンの名前を入力します (オプション)。
親: 該当する場合、親カテゴリを選択して階層を作成します。
説明: カテゴリの短い説明を書きます。
表示タイプ: このカテゴリの表示タイプを選択します。これにより、カテゴリのランディングページに何が表示されるかが決まります。
サムネイル: このカテゴリを表す画像をアップロードします。

表示タイプを使用すると、カテゴリページでの商品の表示を制御できます。製品、サブカテゴリ、または両方の組み合わせだけを紹介することができます。

カテゴリページに表示する内容を選択します。

詳細を入力したら、 「新しいカテゴリを追加」ボタンをクリックして新しいカテゴリを保存します。

既存のカテゴリの編集

既存の製品カテゴリを編集するには:

WordPress ダッシュボードから[製品] > [カテゴリ]に移動します。
カテゴリのリストが表示されます。編集するカテゴリの上にマウスを置き、 [編集] をクリックします。
ここから、カテゴリを変更できます。

名前
ナメクジ
親
説明
画面タイプ
関連するサムネイル

必ず「更新」ボタンを押して変更を適用してください。

WooCommerceのショップページに商品カテゴリーを表示する方法

ストアを設定するときに、WooCommerce のショップページに製品カテゴリを表示すると、ユーザーナビゲーションと製品発見が強化されます。ショップページに商品カテゴリを表示するさまざまな方法を見てみましょう。

WooCommerce 設定の使用

WooCommerce 設定を使用してショップページにカテゴリを表示するには、まず WordPress ダッシュボードにログインします。

[外観] > [カスタマイズ]に移動します。
[カスタマイザー] メニューで[WooCommerce]をクリックし、 [製品カタログ]を選択します。
ここで、ショップページの表示オプションを見つけます。ドロップダウンメニューをクリックすると、次のいずれかを選択できます。

製品を表示する
カテゴリを表示
カテゴリと製品を表示する

カスタマイザーを使用してWooCommerceのショップページにカテゴリーを表示する方法。

ショップページに必要な表示オプションを選択します。このデフォルトの方法は簡単で、コーディングの知識は必要ありません。

ショップページをカスタマイズする

レイアウトやショップページでのカテゴリの表示方法をより詳細に制御するには、ブロックエディターで編集できる新しいページを作成することを選択できます。この方法を使用すると、デフォルトの WooCommerce ショップページと同様に製品と製品カテゴリを表示できます。

ダッシュボードの[ページ]に移動し、 [新規追加]を選択します。
テーマが提供するエディターを使用してショップページをデザインします。テーマがサポートしている場合は、ブロックまたはページビルダーを使用できます。さまざまな製品ブロック、フィルター、および WooCommerce ショートコードは、ページに他の製品の詳細を追加するのに役立ちます。
「カテゴリ別製品」または「製品カテゴリ」ブロックを挿入します。
デザインに満足したら、ページを公開し、ショップページのように使用します。

ショートコードによるカスタマイズ

組み込みブロックに加えて、WooCommerce ショートコードを使用してショップページをカスタマイズし、特定のカテゴリを表示することもできます。

カテゴリを表示するページを編集するか、ショップページなどの商品を表示する新しいページを作成します。
ショートコードブロックを追加して、 [product_categories]ショートコードをページに挿入します。
次のような属性を使用してショートコードを調整できます。

数値: 表示されるカテゴリの数に制限を設定します。
columns : 列数を設定します。
orderby : nameやslugなどの特定の属性でカテゴリを並べ替えます。
order : 順序の方向を昇順または降順に設定します。
ids : 特定のカテゴリ ID を表示します。
parent : 特定の親カテゴリのカテゴリのみを表示します。
Hide_empty : 製品のないカテゴリを非表示にします。
slug : カテゴリをスラッグ別に表示します。

例えば：

 [product_categoriesnumber="12" columns="4" orderby="name" order="ASC"]

このショートコードは、4 つの列に最大 12 個のカテゴリを表示し、カテゴリは名前の昇順に並べ替えられます。

オンライン販売をお考えですか?

10Web AI Ecommerce Website Builder を使用してカスタムオンラインストアを数分で作成し、ビジネスをオンラインにしましょう。

ストアを生成する

高度なカテゴリ表示オプション

ウィジェット、プラグイン、テーマ、またはカスタムコードを使用して、WooCommerce ショップページに製品カテゴリを表示することもできます。

ウィジェットで変更する

ウィジェットを利用して、ショップページに商品カテゴリを表示できます。

たとえば、製品カテゴリウィジェットを使用すると、ショップのサイドバーにカテゴリのリストまたはドロップダウンを配置できます。

これを追加するには、 [外観] > [ウィジェット]に移動し、製品カテゴリウィジェットを目的のサイドバーまたはウィジェット領域にドラッグします。

商品カテゴリウィジェットを使用して、ショップページのサイドバーに商品カテゴリを表示します。

ここで、カテゴリごとの製品数を表示するか、空のカテゴリを非表示にするかを選択できます。

追加機能のためのプラグインの使用

多数の WooCommerce プラグインとテーマは、ショップページにカテゴリを表示するための拡張機能を提供します。

これらのプラグインは、グリッドやスライダーなどのより動的なレイアウトを作成でき、多くの場合、顧客がカテゴリをより速く見つけられるようにするための AJAX フィルタリングなどの機能が含まれています。

WooCommerce マーケットプレイスまたは WordPress プラグインディレクトリを探索して、カテゴリを希望どおりに表示するための適切なオプションを見つけてください。

コードによるカスタマイズ

子テーマの作成とテーマファイルの変更に慣れている場合は、カスタムショートコードを追加するか、WooCommerce フックを変更して、カテゴリの表示方法と場所を調整できます。

コードが間違っているとサイトの機能が中断される可能性があるため、この方法はコーディングの知識がある人に最適であることに注意してください。サイトのファイルに変更を加える前に、バックアップを実行することをお勧めします。

方法 1: archive-product.phpを変更する

子テーマにarchive-product.phpファイルがまだない場合は、ディレクトリ構造を維持しながら、WooCommerce プラグインフォルダー ( woocommerce/templates/ ) の WooCommerce テンプレートディレクトリから子テーマディレクトリにコピーすることで、ファイルを作成できます。

このファイルを変更する基本的な例を次に示します。

archive-product.phpをコピー: このファイルをwp-content/plugins/woocommerce/templates/archive-product.phpからwp-content/themes/your-child-theme/woocommerce/archive-product.phpにコピーします。
ファイルを編集して製品カテゴリを含めます。次のスニペットをファイルの先頭またはカテゴリを表示したい場所に追加できます。
```
 <?php echo '<div class="product-categories">' ; echo do_shortcode ( '[product_categories number="0" parent="0"]' ); echo '</div>' ; ?>
```
これは、 [product_categories]ショートコードを使用して、すべてのトップレベルの製品カテゴリを表示します。 number属性を調整して表示されるカテゴリの数を制限したり、数値属性を削除してすべてのカテゴリを表示したりできます。

方法 2: functions.phpで WooCommerce フックを使用する

この方法では、テンプレートファイルをオーバーライドする必要がなく、多くの場合、将来の WooCommerce アップデートに対してより安全です。次のスニペットを子テーマのfunctions.phpファイルに追加します。

 add_action('woocommerce_before_shop_loop', 'display_product_categories', 15);

関数display_product_categories() {
    if (is_shop() || is_product_category()) {
        echo do_shortcode('[製品カテゴリ番号="0" 親="0"]');
    }
}

この関数はwoocommerce_before_shop_loopにフックされ、商品がショップページに表示される前に実行されます。現在のページがショップまたは製品カテゴリのページであるかどうかを確認し、そうであれば製品カテゴリを表示します。

挿入する場所の選択:

テンプレートファイル ( archive-product.php ) を変更する場合: この方法を使用すると、ページ上の他の要素に対してカテゴリが表示される場所を正確に制御できます。
functions.phpファイルを使用する場合: この方法は、更新によって変更される可能性がある WooCommerce テンプレート構造から独立して変更を保持するため、一般に安全です。

これらの変更は、WooCommerce ショップページに製品カテゴリを効果的に表示するのに役立ちます。さらにカスタマイズが必要な場合は、サイトのデザインに合わせてショートコード属性を調整したり、スタイルを追加したりする必要がある場合があります。

視覚的なレイアウトの強化

WooCommerce ショップをカスタマイズする場合、視覚的に魅力的な製品カテゴリの表示は、ユーザーエンゲージメントと売上に大きな影響を与える可能性があります。

カテゴリ画像の追加

商品カテゴリーを目立たせるには、カテゴリー画像を追加することが必須です。

これは、衣料品、T シャツ、パンツ、アクセサリーなど、ストアの商品を顧客に案内するためのシンプルかつ効果的な方法です。

WordPress ダッシュボードで[製品] > [カテゴリ]に移動します。ここで各カテゴリを編集してサムネイルをアップロードし、視覚的な一貫性を確保し、ショップのホームページでアピールすることができます。

カテゴリのサムネイルを追加します。

テーマオプションを使用して外観をカスタマイズする

ショップページのレイアウトの外観は、アクティブなテーマに大きく影響されます。Astraのようなテーマは、WooCommerce ストアに固有の豊富なカスタマイズ機能を提供します。

WooCommerce フレンドリーなテーマには、ショップページをカスタマイズするためのオプションが追加されることがよくあります。

[外観] > [カスタマイズ]に移動すると、テーマオプションにアクセスして、ホームページテンプレートと全体のデザインを変更できます。ここでは、個々の商品を目立たせることなく、ショップページに商品カテゴリを表示する方法を調整できます。

検索エンジンとコンバージョンの最適化

WooCommerce ショップをセットアップするときは、サイトがスムーズに動作し、商品カテゴリが SEO に適していることを確認することが、可視性とコンバージョンを高める鍵となります。

WooCommerce を使用すると、カテゴリに豊富な製品説明を追加できます。これは買い物客の観点からだけでなく、SEO の観点からも役立ちます。これらの説明はショップページの製品カテゴリと一緒に表示されるため、キーワードが豊富で有益であることを確認してください。これは、検索ランキングと顧客の決定の両方に影響を与える可能性があります。

ナビゲーションについては、顧客と検索クローラーがストア内で商品をどのように見つけるかを考慮することが重要です。明確なカテゴリラベルを持つ論理メニューを作成すると、ユーザーエクスペリエンスとサイトのクローラビリティが向上します。

ブレッドクラムを使用すると、ナビゲーションが容易になり、検索エンジンに対するサイトの構造が強化されます。

ブレッドクラムはユーザーフレンドリーであり、SEO 上の利点もあります。

最も人気のあるカテゴリ、またはセール中のカテゴリが強調表示されていることを確認します。人気と売上はコンバージョンを促進するため、簡単にアクセスできるようにすることでストアに利益をもたらします。

最後に、分析を忘れないでください。検索結果とコンバージョンの観点から、どのカテゴリのパフォーマンスが優れているかを定期的に確認します。このデータを使用して、WooCommerce 製品カテゴリの SEO 戦略を調整します。

一般的な問題のトラブルシューティング

ショップページに製品カテゴリを表示するように WooCommerce サイトを設定すると、いくつかの問題が発生する可能性があります。ここでは、最も一般的な問題のいくつかを特定して解決する方法を説明します。

カテゴリ表示の問題

商品カテゴリがショップページに期待どおりに表示されない場合は、まず表示設定が適切に構成されていることを確認してください。 [外観] > [カスタマイズ] > [WooCommerce]に移動し、 [製品カタログ]を選択します。

商品カテゴリがショップページに期待どおりに表示されない場合は、まず表示設定が適切に構成されていることを確認してください。 [外観] > [カスタマイズ] > [WooCommerce]に移動し、 [製品カタログ]を選択します。 ショップページ表示のオプションが表示されるはずです。 [ 製品を表示 ] 、 [ カテゴリを表示 ] 、または[ カテゴリと製品を表示 ]のいずれかで、希望の表示方法が選択されていることを確認してください。

場合によっては、カテゴリを設定した後でも、キャッシュの問題によりカテゴリが表示されないことがあります。ホスティングコントロールパネルとブラウザから Web サイトのキャッシュをクリアして、問題が解決するかどうかを確認します。

さらに、カテゴリ表示に関連するコードを追加した場合は、テーマのfunction.phpファイル内のコードの整合性を確認してください。

テーマやプラグインとの競合

場合によっては、問題が WooCommerce 自体にあるのではなく、他のテーマやプラグインとの競合が原因で発生することがあります。テーマの競合をトラブルシューティングするには、Twenty Twenty-One などのデフォルトの WordPress テーマに切り替えて、カテゴリー表示の問題が解決されたかどうかを確認してください。

プラグインが競合する場合は、 「プラグイン」に移動し、WooCommerce を除くすべてのプラグインを非アクティブ化します。カテゴリが正しく表示されている場合は、原因が見つかるまで他のプラグインを 1 つずつ再アクティブ化してください。特定したら、代替プラグインを探すか、プラグイン開発者に連絡して修正を依頼することができます。

互換性の問題を避けるために、WooCommerce、テーマ、プラグインを最新の状態に保つことも重要です。 [ダッシュボード] > [アップデート]に移動して、利用可能なアップデートを確認して適用します。変更を加える前に、サイトをバックアップすることが常に賢明であることを覚えておいてください。

結論

WooCommerce のショップページに製品カテゴリを表示する方法を知ることは、販売を促進し、顧客ナビゲーションを改善するために不可欠です。

シンプルなダッシュボード設定、ショートコード、高度なカスタマイズなど、ストアのレイアウトと機能を微調整するためのツールがあります。さまざまな構成を検討し続けて、ストアに最適なものを見つけてください。頑張って、魅力的な WooCommerce ショップページの作成を楽しんでください。

10Web で WordPress を簡素化

10Web マネージド WordPress ホスティングを使用すると、手動作業を省略できます。

方法を学びます

WooCommerce ショップ ページに製品カテゴリを表示する方法

よくある質問

カテゴリを設定する

新しい製品カテゴリの追加

既存のカテゴリの編集

WooCommerceのショップページに商品カテゴリーを表示する方法

WooCommerce 設定の使用

ショップページをカスタマイズする

オンライン販売をお考えですか?

高度なカテゴリ表示オプション

ウィジェットで変更する

追加機能のためのプラグインの使用

コードによるカスタマイズ

視覚的なレイアウトの強化

カテゴリ画像の追加

テーマオプションを使用して外観をカスタマイズする

検索エンジンとコンバージョンの最適化

一般的な問題のトラブルシューティング

カテゴリ表示の問題

テーマやプラグインとの競合

結論

10Web で WordPress を簡素化

10Web で WordPress を簡素化

WooCommerce ショップページに製品カテゴリを表示する方法