WooCommerceで商品カテゴリをショップやホームページに表示する方法を知りたいですか？
カテゴリを表示すると、商品を整理し、買い物客を適切な場所に誘導し、コンバージョンを促進することができます。このガイドでは、コーディングなしでWooCommerceの商品カテゴリとタグを追加および表示する方法を段階的に説明します。
クイックサマリー：WooCommerceの商品カテゴリを表示する方法
ビデオチュートリアル
WooCommerceで商品カテゴリとタグを追加する方法
WooCommerceでカテゴリとタグを追加するのは簡単です。商品リストを作成するとき、またはWooCommerceダッシュボードから新しいカテゴリとタグを追加できます。
WooCommerceの商品カテゴリを追加する
次の手順に従って、WooCommerceに商品カテゴリまたはサブカテゴリを追加します。
まず、WordPress管理エリアから 商品 » カテゴリ に移動します。そこから、商品カテゴリ情報を入力します。
含めることができるもの：
- 名前
- スラッグ
- 親カテゴリ
- 説明
- 表示タイプ（商品/サブカテゴリ/両方）
- サムネイル
新しいカテゴリを追加 ボタンをクリックして、カテゴリリストを一覧に追加します。
WooCommerceの商品タグを追加する
次の手順に従って、WooCommerceに商品タグを追加できます。
まず、WordPress管理エリアから 商品 » タグ に移動します。次のページで、次のタグ情報を入力できます。
- 名前
- スラッグ
- 説明
新しいタグを追加 ボタンをクリックして、タグを一覧に追加します。
WooCommerceサイトに商品カテゴリを表示する方法
WooCommerceに商品カテゴリとタグを追加する方法を学んだ後、オンラインストアでそれらをどのように表示しますか？以下の方法に従って、ショップのさまざまなセクションにWooCommerceの商品カテゴリとタグを表示します。
ホームページにWooCommerce製品カテゴリを表示する
まず、WooCommerceのホームページで製品のカテゴリを表示する方法を見てみましょう。WooCommerceには、ホームページに製品カテゴリを表示する簡単な方法が用意されていません。
現在のオプションは次のとおりです。
- WooCommerceホームページセクションが含まれている、WooCommerce互換のWordPressテーマを使用する。
- テーマを編集して、WooCommerce製品カテゴリのショートコードを追加する。
どちらのオプションも多くの作業が必要になるため、SeedProdのようなウェブサイトビルダーを使用してWooCommerceストアをカスタマイズすることをお勧めします。
SeedProdは、WordPress向けの最高のウェブサイトビルダーです。コードなしで、WooCommerceウェブサイト全体、ランディングページ、およびカスタムWordPressテーマを作成できます。
何百もの既製のテンプレートから選択し、ドラッグアンドドロップのページビルダーで簡単にカスタマイズできます。SeedProdは、数回のクリックでサイトにWooCommerceコンテンツを追加するための多くのブロックとセクションを提供します。
SeedProdを使用してホームページに製品カテゴリを追加するには、次の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
開始するには、SeedProdプラグインをダウンロードして、WordPressウェブサイトにインストールしてアクティブ化してください。ヘルプが必要な場合は、WordPressプラグインのインストールに関するこのガイドに従ってください。
注意:WooCommerce機能にアクセスするには、SeedProd Eliteプランが必要です。
次に、SeedProd » Settingsに移動し、ライセンスキーを入力してVerify Keyをクリックします。これにより、選択したプランの機能がロック解除されます。
ライセンスキーは、ダウンロードタブの下にあるSeedProdアカウントエリアで見つけることができます。
ステップ2.カスタムWooCommerceテーマを作成する
次のステップは、WooCommerceサイト用のカスタムテーマを作成することです。これにより、SeedProdの強力なビジュアルエディターですべてのウェブサイトの部分をカスタマイズできます。
これを行うには、SeedProd » Theme Builderに移動し、Themesボタンをクリックします。
この画面には、プロフェッショナルなWordPressテーマのライブラリが表示されます。これらは、開発者を雇うことなく見栄えの良いウェブサイトをすばやく作成するための優れた方法であり、最初から始める必要はありません。
好きなテーマの上にマウスカーソルを合わせ、チェックマークアイコンをクリックするだけです。
SeedProdは自動的にテーマのすべての異なるテンプレートを作成し、テーマビルダーダッシュボードに一覧表示します。そこから、ビジュアルエディターで各テンプレートをカスタマイズできます。
ステップ3. WooCommerceホームページのカスタマイズ
WooCommerceホームページにカテゴリを表示するには、ホームページテンプレートを編集する必要があります。リストでテンプレートを見つけ、「Edit Design」リンクをクリックしてSeedProdのページビルダーで開きます。
SeedProdでホームページをカスタマイズするのは非常に簡単です。左側にブロックとセクションがあり、右側にライブプレビューがあります。
ページにコンテンツブロックを追加するのは、ドラッグアンドドロップするのと同じくらい簡単です。次に、任意の要素をクリックして、コンテンツとスタイリングの設定を編集できます。
SeedProdでホームページに商品カテゴリーを表示するには、2つの方法があります。
- カテゴリー別に商品を表示する
- WooCommerce商品カテゴリーウィジェットを追加する
最初のアプローチを使用するには、WooCommerceブロックセクションにある「商品グリッド」ブロックを見つけます。次に、そのブロックをホームページのセクションまたは行にドラッグします。
商品グリッドをクリックして、左側にある設定パネルを開きます。そのパネルで、タイプドロップダウンメニューから「カスタムクエリ」を選択し、「カテゴリーで選択」トグルを有効にします。
グリッドに表示するカテゴリーの商品を選択できます。Shiftキーを押しながら複数のカテゴリーを選択することもできます。
これで、選択したカテゴリーの商品のみがホームページに表示されます。
同様の手順で、タグ別に商品を出力することもできます。「タグで選択」オプションを切り替えて、オプションから含めるタグを選択するだけです。
SeedPodのビジュアルエディターでは、商品カテゴリーウィジェットを含むネイティブのWooCommerceウィジェットも使用できます。
これを行うには、「ウィジェット」ブロックセクションに移動し、「商品カテゴリー」ウィジェットを見つけます。次に、ホームページのデザインにドラッグして配置します。
ウィジェットをクリックすると、次のことができます。
- ウィジェットタイトルを選択する
- カテゴリーを名前順に並べ替える
- ドロップダウンとして表示する
- 商品数を表示する
- 階層を表示する
- その他多数
「詳細」タブでウィジェットのスタイリングオプションを制御することもできます。
ステップ4. WooCommerceストアの残りをカスタマイズする
次に、WooCommerceテーマの他のテンプレートの編集に進むことができます。
役立つガイドをいくつかご紹介します。
- WordPressヘッダーをカスタマイズする方法
- カスタム投稿テンプレートの作成方法
- カスタムWooCommerceチェックアウトページの作成方法
- WordPressにショッピングカートを追加する方法
この記事の残りを読んで、サイドバーとナビゲーションメニューに商品カテゴリーを表示する方法を学ぶこともできます。
ステップ5. WooCommerceテーマを公開する
テーマの外観に満足したら、SeedProd » Theme Builderに移動し、右上隅にあるSeedProdテーマを有効にするトグルを「オン」の位置に切り替えます。
これで、ホームページをプレビューして外観を確認できます。
WooCommerceショップページにカテゴリを表示する
ホームページに加えて、SeedProdを使用してWooCommerceショップページにカテゴリーを表示することもできます。
これを行うには、SeedProd » Theme Builderに移動し、「ショップページ」テンプレートの「デザインを編集」をクリックします。
ページがビジュアルエディターで開かれ、ショップページのデザインをカスタマイズできます。前の方法の手順に従って、カテゴリ別に商品を表示してください。
または、商品カテゴリごとに個別のグリッドを作成することもできます。たとえば、飲み物用のグリッド、ヘアケア用のグリッドなどです。
前の方法を使用して、ホームページに商品カテゴリをリストまたはドロップダウンメニューで表示することもできます。
ショップページに新しい列を追加し、「商品カテゴリ」ウィジェットをドラッグアンドドロップするだけです。
実際の表示例を次に示します。
ショップページにWooCommerceカテゴリを表示する
商品タグやカテゴリを表示するために新しいテーマを作成したくないウェブサイト所有者もいるかもしれません。その場合は、WooCommerceのデフォルトのショップ設定を使用してカテゴリを出力できます。
外観 » カスタマイズに移動し、WooCommerce、次に商品カテゴリをクリックします。
「ショップページの表示」という見出しの下で、「カテゴリを表示」を選択します。
WooCommerceでは、組み込みの設定を使用してカテゴリレイアウトをある程度制御できます。WooCommerceのカテゴリレイアウトをどのように表示したいかに応じて、サブカテゴリ、商品、またはその両方を表示することを選択できます。
ショップレイアウトにWooCommerceサブカテゴリを表示する
WooCommerceのデフォルト設定を使用して、ショップページにサブカテゴリを表示することもできます。
これを行うには、外観 » カスタマイズ » WooCommerce » 商品カタログに移動し、「カテゴリの表示」という見出しの下で、ドロップダウンメニューから「サブカテゴリを表示」を選択します。
変更を保存するには、必ず公開ボタンをクリックしてください。
WooCommerceの商品カテゴリをサイドバーに追加する
ウェブサイトのサイドバーに商品カテゴリを追加することは、買い物客が必要なものをすばやく見つけるのに役立つ優れた方法です。幸いなことに、SeedProdを使用すると、WordPressにカスタムサイドバーを追加することができます。
SeedProdでサイドバーをカスタマイズして商品カテゴリを表示するには、SeedProd » テーマビルダーに移動し、サイドバーテンプレートを開きます。
商品グリッドブロックをドラッグアンドドロップし、クエリ表示オプションをカスタマイズして、1つのカテゴリまたはタグの商品を表示できます。
この例では、2つの商品グリッドブロックを使用して、ブログのサイドバーに2つの異なるカテゴリを表示しました。
ナビゲーションメニューにWooCommerce製品カテゴリを表示する
WooCommerceメニューに商品カテゴリを追加するのは簡単です。外観 » メニューに移動し、右上隅にある画面オプションタブをクリックします。
そのパネルで、「商品カテゴリ」チェックボックスをクリックします。これにより、すべてのWooCommerceカテゴリがメニュー画面に表示されます。
次に、「商品カテゴリ」タブを開き、メニューに追加したいすべてのカテゴリを選択し、メニューに追加ボタンをクリックします。
その後、それらをドラッグしてメニューでの位置を変更できます。たとえば、ショップページの下にネストして、カテゴリのドロップダウンメニューを表示できます。
メニューを移動する前に保存することを忘れないでください。これにより、買い物客がセクションごとにすばやく閲覧するのに役立つ、クリーンなWooCommerceカテゴリメニューが作成されます。
これで、ウェブサイトのホームページにアクセスして、WooCommerceナビゲーションメニューの商品カテゴリを確認できます。
WooCommerceをカスタマイズするその他の方法
商品カテゴリーやタグの表示は、ストアを微調整するための多くの方法の1つにすぎません。その他のWooCommerceのカスタマイズについては、以下のガイドを参照してください。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceで魅力的な商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品をどのように表示するか
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceで在庫切れの商品を非表示にする方法
よくある質問
このガイドが、WooCommerceで商品カテゴリーを簡単に表示する方法を学ぶのに役立ったことを願っています。ホームページ、ストアページ、またはメニューを整理する場合でも、上記のステップは、物事をすっきりとユーザーフレンドリーに保つのに役立つはずです。
SeedProdでストアを構築している場合、コーディングなしで商品の表示方法を完全に制御できます。
まだサイトを構築中であれば、WooCommerceに来る前にページを追加する方法に関するこのガイドが役立つかもしれません。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
