WooCommerceでショップやホームページに商品カテゴリーを表示する方法を知りたいですか？
カテゴリを表示することで、商品を整理し、買い物客を適切な場所に誘導し、コンバージョンを高めることができます。このガイドでは、コーディング不要でWooCommerceの商品カテゴリとタグを追加して表示する方法をステップバイステップでご紹介します。
クイックまとめ：WooCommerceの商品カテゴリーを表示する方法
ビデオ・チュートリアル
WooCommerceで商品カテゴリーとタグを追加する方法
WooCommerceでカテゴリーとタグを追加するのは簡単です。商品リストを作成する際、またはWooCommerceダッシュボードから新しいカテゴリーとタグを追加することができます。
WooCommerceの商品カテゴリーを追加する
WooCommerceで商品カテゴリまたはサブカテゴリを追加するには、以下の手順に従ってください：
まず、WordPressの管理画面から商品 " カテゴリーにアクセスします。そこから商品カテゴリー情報を入力します。
それを含めることができる：
- 名称
- スラッグ
- 親カテゴリー
- 説明
- 表示タイプ（商品／サブカテゴリー／両方）
- サムネイル
新しいカテゴリーを追加]ボタンをクリックして、カテゴリーリストをリストに追加します。
WooCommerce商品タグの追加
WooCommerceで商品タグを追加するには、以下の手順に従ってください：
まず、WordPressの管理画面からProducts " Tagsに アクセスします。次のページで、以下のタグ情報を入力します：
- 名称
- スラッグ
- 説明
新しいタグを追加]ボタンをクリックして、タグをリストに追加します。
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は自動的にあなたのテーマのためのすべての異なるテンプレートを作成し、Theme Builderダッシュボードに表示します。そこからビジュアルエディタで各テンプレートをカスタマイズできます。
ステップ3.WooCommerceホームページをカスタマイズする
WooCommerceのホームページにカテゴリを表示するには、ホームページテンプレートを編集する必要があります。リストでテンプレートを見つけ、"デザインを編集 "リンクをクリックしてSeedProdのページビルダーでテンプレートを開きます。
SeedProdでホームページをカスタマイズするのはとても簡単です。左側にブロックとセクション、右側にライブプレビューがあります。
コンテンツブロックをページに追加するには、ドラッグ＆ドロップするだけです。その後、任意の要素をクリックして、そのコンテンツとスタイル設定を編集できます。
SeedProdでホームページ上に商品カテゴリーを表示するには2つの方法があります：
- 商品をカテゴリー別に表示
- WooCommerce商品カテゴリウィジェットを追加する
最初の解決策を使用するには、WooCommerceブロックセクションでProducts Gridブロックを見つけます。そして、ブロックをホームページのセクションまたは行にドラッグします。
商品グリッドをクリックして、左側の設定パネルを開きます。そのパネルで、タイプドロップダウンメニューから「カスタムクエリー」を選択し、「カテゴリーで選択」トグルを有効にします。
どのカテゴリの商品をグリッドに表示するかを選択できます。シフトボタンを押しながら複数のカテゴリーを選択することができます。
選択したカテゴリの商品のみがホームページに表示されるようになります。
同様の手順で、タグ別の商品のみを出力することができます。タグで選択」オプションを切り替え、オプションから含めるタグを選択するだけです。
また、SeedPodのビジュアルエディタでは、商品カテゴリウィジェットを含むネイティブのWooCommerceウィジェットを使用することができます。
そのためには、ウィジェット・ブロック・セクションに行き、「商品カテゴリー」ウィジェットを見つけます。次に、このウィジェットをホームページのデザインにドラッグして配置します。
ウィジェットをクリックすると、以下のことができる：
- ウィジェットのタイトルを選択する
- カテゴリー名順
- ドロップダウンとして表示
- 製品数の表示
- 階層を表示
- さらに
また、Advancedタブでウィジェットのスタイリングオプションをコントロールできます。
ステップ4.WooCommerceストアの残りの部分をカスタマイズする
これでWooCommerceテーマの他のテンプレートの編集に移ることができます。
ここでは、そのためのガイドをいくつか紹介しよう：
また、サイドバーやナビゲーションメニューに商品カテゴリーを表示する方法については、この記事の続きをお読みください。
ステップ5.WooCommerceテーマを公開する
テーマの外観に満足したら、SeedProd " Theme Builderに 行き、右上のEnable SeedProd Themeトグルを「on」の位置にします。
ホームページのプレビューができるようになりました。
WooCommerceのショップページにカテゴリーを表示する
ホームページに加えて、SeedProdを使用してWooCommerceのショップページにカテゴリを表示することができます。
そのためには、SeedProd " Theme Builderに 行き、"Shop Page "テンプレートのEdit Designをクリックします。
ページがビジュアルエディターで開き、ショップページのデザインをカスタマイズすることができます。カテゴリー別に商品を表示するには、前の方法の手順に従ってください。
また、商品カテゴリーごとに別のグリッドを作成することもできます。例えば、ドリンク用、ヘアケア用などです。
先ほどの方法で、商品カテゴリーをホームページのリストやドロップダウンメニューに表示することもできます。
ショップページに新しいカラムを追加し、「商品カテゴリー」ウィジェットの上にドラッグするだけです。
これがリアルタイムでどのように見えるかの例である：
ショップページにWooCommerceカテゴリーを表示する
ウェブサイトオーナーの中には、商品タグやカテゴリーを表示するために新しいテーマを作成したくない方もいらっしゃるでしょう。その場合、WooCommerceのデフォルトのショップ設定を使用してカテゴリを出力することができます。
外観 " カスタマイズを選択し、WooCommerceと商品カテゴリーをクリックします。
ショップページの表示」で「カテゴリーを表示する」を選択します。
WooCommerceでは、ビルトイン設定を使用してカテゴリレイアウトをある程度コントロールすることができます。WooCommerceのカテゴリレイアウトをどのように表示したいかによって、サブカテゴリ、商品、またはその両方を表示することを選択できます。
ショップレイアウトにWooCommerceのサブカテゴリーを表示する
WooCommerceのデフォルト設定を使用して、ショップページにサブカテゴリーを表示することもできます。
そのためには、外観 " カスタマイズ " WooCommerce " 商品カタログに行き、"カテゴリー表示 "見出しの下にあるドロップダウンメニューから "サブカテゴリーを表示 "を選択します。
変更を保存するには、忘れずにPublishボタンをクリックしてください。
サイドバーにWooCommerceの商品カテゴリーを追加する
あなたのウェブサイトのサイドバーに商品カテゴリを追加することは、買い物客が必要なものを素早く見つけるための優れた方法です。幸運にもSeedProdはWordPressにカスタムサイドバーを簡単に追加することができます。
SeedProdでサイドバーをカスタマイズし、商品カテゴリーを表示するには、SeedProd " Theme Builderに 行き、サイドバーテンプレートを開きます。
商品グリッドブロックの上にドラッグし、クエリ表示オプションをカスタマイズして、1つのカテゴリーまたはタグの商品を表示することができます。
この例では、ブログのサイドバーに2つの異なるカテゴリーを表示するために、2つの商品グリッドブロックを使用しました。
ナビゲーションメニューにWooCommerceの商品カテゴリーを表示する
WooCommerceメニューに商品カテゴリーを追加するのはとても簡単です。外観 " メニューに移動し、右上の画面オプションタブをクリックします。
そのパネルで "Product categories "チェックボックスをクリックします。これでメニュー画面にWooCommerceの全てのカテゴリーが表示されます。
次に、「商品カテゴリー」タブを開き、メニューに追加したいカテゴリーをすべて選択し、「メニューに追加」ボタンをクリックします。
ドラッグしてメニュー上の位置を変えることができます。例えば、ショップページの下に置いて、カテゴリーのドロップダウンメニューを表示させることができます。
次に進む前にメニューを保存することを忘れないでください。これにより、買い物客がセクションごとに素早くブラウズできる、すっきりとしたWooCommerceカテゴリメニューが作成されます。
これで、あなたのウェブサイトのホームページにアクセスし、WooCommerceのナビゲーションメニューにある商品カテゴリーを見ることができます。
WooCommerceをカスタマイズするその他の方法
商品カテゴリとタグの表示は、あなたのストアを微調整する多くの方法の一つに過ぎません。その他のWooCommerceカスタマイズについては、以下のガイドをご覧ください：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品を表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceで在庫切れの商品を非表示にする方法
よくある質問
このガイドが、WooCommerceで商品カテゴリーを表示する簡単な方法を学ぶのに役立てば幸いです。ホームページ、ショップページ、メニューのいずれを整理するにしても、上記のステップを踏めば、すっきりとユーザーフレンドリーな状態を保つことができるはずです。
SeedProdを使用してストアを構築する場合、商品の表示方法を完全にコントロールすることができます。
まだサイト制作中でしたら、WooCommerceにcoming soonページを追加する方法についてのガイドがお勧めです。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
