WooCommerceでカテゴリーとサブカテゴリーを表示する方法

Eコマースサイトの商品をきちんと分類し、適切に整理しておくことで、顧客は必要な商品を見つけやすくなります。しかし、商品カテゴリの数が多い大規模なEコマースサイトでは面倒な作業となります。

しかし、そのような場合でも カテゴリーとサブカテゴリーの作成 商品を整然と並べることで、顧客のショッピング体験を向上させ、ショップのナビゲーションを容易にする。これは無視できない。

この記事では ステップ・バイ・ステップ・ガイド WooCommerceストアの入手方法 商品カテゴリーとサブカテゴリーを表示するあなたのウェブサイトがユーザーエクスペリエンスを向上させるのに役立ちます。

関係なく WooCommerce初心者 それなのに eコマースのベテランこれらのヒントはすべて役に立つ。

なぜWooCommerceに商品カテゴリーを表示するのか？

WooCommerceショップに商品カテゴリを表示する重要な理由がいくつかあります：

• ナビゲーションが簡単明確なカテゴリー分けにより、顧客は必要な商品を素早く見つけることができ、ショッピング体験が向上する。
• より良い製品構成合理的な分類は、ショップのレイアウトをより整然とさせ、ユーザーの閲覧効率を向上させる。
• スケールアップ SEO ランキングカテゴリー名に関連キーワードを使うことで、検索エンジンの検索結果ページ（SERPs）で上位に表示されやすくなります。
• マーケティングとプロモーションに貢献顧客の利便性のために商品カテゴリーを表示することで、特定の商品やイベントをより効果的に宣伝し、コンバージョン率を高めることができます。

WooCommerceでデフォルトのカテゴリー、サブカテゴリー、商品を表示する方法

WooCommerceショップを設定するとき、一般的に "カテゴリー／サブカテゴリーと商品を表示する" 訪問者がホームページから直接商品を選んだり、商品カテゴリーページをクリックして商品を絞り込んだりできるようにするためです。

WooCommerceショップでカテゴリーを表示する方法

WooCommerceの設定

• 出向く WooCommerce → 設定

製品オプションを選択

• 打点 お飾り タブ

ディスプレイ設定の調整

• オプション 示す オプション
• ある ショップページには 歌で応える デフォルトのカテゴリー表示 オプションを選択する。 カテゴリーと商品の同時表示(両方表示）

変更の保存

• 打点 変更の保存 ボタンをクリックして、新しい設定を適用します。

ほら

必要な場合 WooCommerceカテゴリのカスタム表示コードは functions.php ファイル（Themesフォルダにあります）を編集します。編集前 バックアップウェブサイト事故防止のため

WooCommerceで商品カテゴリーを表示する方法

WooCommerceは以下を提供します。 woocommerce_product_category() を出力する前に製品を表示する。 分類または下位分類.この関数はプラグイン可能です。 リライト をクリックして表示をカスタマイズする。

ステップ

• とおす functions.php 書類(Themesフォルダにあります）。
• 以下のコードを挿入する。これは、ショップページに商品カテゴリーを表示するために使用されます：

function woocommerce_get_product_category_of_subcategories( $category_slug ){ { $term_html = array()
  $terms_html = array()；
  $taxonomy = 'product_cat'；

  $parent = get_term_by( 'slug', $category_slug, $taxonomy )；

  $children_ids = get_term_children( $parent->term_id, $taxonomy )；


  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $axonomy )；
        $term_link = get_term_link( $term, $taxonomy )；
        if ( is_wp_error( $term_link ) ) $term_link = ''；

        $terms_html[] = '<a href="/ja/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;name . '</a>';
  }
  リターン '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

コード解析：

• get_queried_object_id()現在のクエリのカテゴリーIDを取得します。
• get_terms( 'product_cat', $args )このカテゴリのサブカテゴリを取得します。
• woocommerce_subcategory_thumbnail( $term )カテゴリーのサムネイルを表示します。
• get_term_link( $term )カテゴリーリンクを取得し、フロントエンドに表示する。
• add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 )；関数を 商品リストループ前のWooCommerceショップページカテゴリーが最初に表示されるようにする。

効果

コードは ショップページ 商品カテゴリーを表示することで、ユーザーは特定の商品を選択する前にカテゴリーを閲覧することができ、ナビゲーション体験が向上します。

WooCommerce商品カテゴリのサブカテゴリをリストアップする方法

カスタム関数は 親商品カテゴリーのスラッグ でWooCommerceのサブカテゴリを取得し、ハイパーリンクとして表示します。

操作手順：

1. とおす functions.php 書類(現在のテーマのフォルダにあります）。
2. 以下のコードを挿入する。あるカテゴリの下にあるサブカテゴリのリストを取得するために使用される：

function woocommerce_get_product_category_of_subcategories( $category_slug ){ { $term_html = array()
  $terms_html = array()；
  $taxonomy = 'product_cat'；

  $parent = get_term_by( 'slug', $category_slug, $taxonomy )；

  $children_ids = get_term_children( $parent->term_id, $taxonomy )；


  foreach($children_ids as $children_id){
        $term = get_term( $children_id, $axonomy )；
        $term_link = get_term_link( $term, $taxonomy )；
        if ( is_wp_error( $term_link ) ) $term_link = ''；

        $terms_html[] = '<a href="/ja/' . esc_url( $term_link ) . '/" rel="tag" class="' . $term->slug . '">' . $term-&gt;name . '</a>';
  }
  リターン '<span class="subcategories-' . $category_slug . '">' . implode( ', ', $terms_html ) . '</span>';
}

コード解析：

• get_term_by( 'slug', $category_slug, $axonomy )指定された分類のオブジェクトを取得します。
• get_term_children( $parent->term_id, $taxonomy ): カテゴリの下にあるすべてのサブカテゴリのIDを取得します。
• (エルゴード的 $children_ids::
  • のサブカテゴリーを取得する。 用語 オブジェクト。
  • カテゴリーリンク get_term_link( $term, $taxonomy ).
  • 生成 <a> サブカテゴリー名を表示するハイパーリンク。
• HTMLコードに戻るコンマで区切られたすべてのサブカテゴリーを表示します。

効果

このコードはWooCommerceのショップページで使用できます。 商品カテゴリーのサブカテゴリーの動的表示ユーザーが商品を閲覧したり、フィルターにかけたりするのは簡単だ。

WooCommerceのカテゴリー説明を表示する方法

WooCommerceで利用可能 商品詳細ページ用テンプレートファイル 商品が属するカテゴリの説明情報を表示するコードを追加します。

コードの説明

1. とおす wp_get_post_terms() 現在の製品の ごくひじょうほう.
2. カテゴリー配列を繰り返し処理し、カテゴリーを取得して出力する。 説明.

コードの例：

global $post；
$args = array( 'taxonomy' => 'product_cat', )；
$terms = wp_get_post_terms($post->ID,'product_cat', $args)；

$count = count($terms)；
if ($count > 0) { { $count = count($terms)

  foreach ($terms as $terms) { 以下のようになります。
        echo '<div class="woocommerce-get-product-category">';
        echo $term-&gt;description.
        echo '</div>';
 
  }
 
}

効果

このコードは 製品詳細ページ 商品のカテゴリーを表示する 記述的情報これにより、ユーザーは分類の詳細を理解しやすくなる。

WooCommerceの商品カテゴリーを表示するカスタムプラグインの作成方法

WooCommerceでは、これは通常、以下を functions.php ファイルに、商品カテゴリーとサブカテゴリーを表示するコードを追加します。もし変えたくないんだ。 functions.php.

解決策：カスタムプラグインを作成する

機能をプラグインにラッピングすることで、以下のことが可能になります。 テーマファイルの修正を避ける大丈夫だよ。 いつでも機能を有効または無効にできるよりフレキシブルに。

ステップ1：プラグインフォルダの作成

入り込む wp-content/plugins ディレクトリに新しいフォルダを作成する：
361sale-商品カテゴリ別アーカイブ

ステップ2：プラグインファイルの作成

• 先ほど作成したフォルダに新しいPHPファイルを作成すると名付けられた：361sale-product.php
• そのファイルを開き、プラグインの基本情報を追加する：

<?php
/**
 * プラグイン名: WooCommerce Product Category
 * 説明: WooCommerceの商品ページにWooCommerceのカテゴリを表示する
**/

ステップ3：カテゴリー表示機能の追加

商品カテゴリーとサブカテゴリーを取得して表示するために、プラグインファイルに以下のコードを追加します：

function 361sale_product_subcategories( $args = array() ) { { { 361sale_product_subcategories( $args = array() )

    }
add_action( 'woocommerce_before_shop_loop', '361sale_product_subcategories', 50 )；

次に、この関数に以下のコード・スニペットを追加する：

$parentid = get_queried_object_id()；

$args = array(
    'parent' => $parentid
);

$terms = get_terms( 'product_cat', $args )；

もし( $terms ) { 。

    echo '<ul class="product-cats">';

        foreach ( $terms as $terms ) { {.

            echo '<li class="category">';

                woocommerce_subcategory_thumbnail( $term ).

                echo '<h2>'; echo '
                    エコー '<a href="/ja/' .  esc_url( get_term_link( $term ) ) . '/" class="' . $term->slug . '">';
                        echo $term-&gt;name.
                    echo '</a>'; echo '
                エコー '</h2>';

            エコー '</li>';


    }

    エコー '</ul>';
 
}

上記のコードは、まず現在のクエリーのオブジェクトを取得し、そのIDを次のように定義する。 $parentid.

そして get_terms() 関数を使用して サブカテゴリー.

各サブカテゴリーについて、コードは次のようになる：

• 支出 woocommerce_subcategory_thumbnail() カテゴリーのサムネイルを表示
• カテゴリー名の外側にハイパーリンクを追加して、カテゴリーの アーカイブページ

プラグインスタイルファイルの作成

1. pluginsフォルダに css ディレクトリ
2. ある css ディレクトリに スタイル.css 書類
3. メインのプラグインファイルの名前は cloudways-product.php
4. プラグインファイルに以下のコードを追加し、CSSファイルをロードする。::

関数361sale_product_cats_css() {


    wp_register_style( '361sale_product_cats_css', plugins_url( 'css/style.css', __FILE__ ) );；


    wp_enqueue_style( '361sale_product_cats_css' ).

}

add_action( 'wp_enqueue_scripts', '361sale_product_cats_css' )；

こうすることで、プラグインが正しくロードされます。 スタイル.cssサブカテゴリーの表示スタイルをカスタマイズするために使用されます。

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

WooCommerceのショップページに商品カテゴリーを表示するのはとても簡単です：

• ワードプレスのバックエンドへカーソルを合わせる 外観 ボタンオン。
• カスタマイズ」をクリックする。 オプション

• スクロールダウン探す WooCommerce > 商品カタログ.

• 店舗ページ表示」を探す(ショップページ表示)設定のドロップダウンメニューから "分類を表示"(カテゴリーを表示）。

• 変更の保存ショップページに商品カテゴリーが表示されるようになりました。

これにより、WooCommerceのショップページを簡単に表示することができます。 製品分類ユーザーのブラウジング体験を最適化します。

さらに サイドバー 歌で応える メニュー これらの方法については後で詳しく説明する。

サイドバーに商品カテゴリーを表示する方法

ある サイドバー 商品カテゴリーを表示することは、買い物客がショップをブラウズしながら オプションのカテゴライズを常に表示そして、彼らがさらに製品を探求するのを容易にする。

設定方法

• ワードプレスのバックエンドへ渡航先 外観 > ウィジェット.
• 見つけるサイドバー(サイドバー）のドロップダウンメニューをクリックします。

• 製品カテゴリー」ウィジェットを探す.
• をドラッグする。サイドバーへのウィジェット岸辺そして設定をカスタマイズする。
• ウィジェットの追加が可能例えば、価格フィルタリング、カテゴリー・フィルタリングなど、サイドバーの機能を強化する。

このようにして、WooCommerceのサイドバーに商品カテゴリーを表示した後、顧客は次のことができます。 異なるカテゴリの製品をより簡単にブラウズできるショッピング体験を向上させる。

WooCommerceの商品カテゴリーをメニューに表示する方法

メニューに表示 製品分類 直感的な操作で、ショップで販売されている商品のカテゴリーを簡単に把握することができる。

設定方法

• ワードプレスのバックエンドへ渡航先 外観 > メニュー.

• 左上の「画面オプション」をクリック。にチェックを入れ "Product Categories"（商品カテゴリー）.

• 左側のパネルに「商品カテゴリー」オプションが表示されます。クリックで拡大し、ショップの全カテゴリーをご覧ください。
• メニューに追加するカテゴリーを選択するをクリックしてください。 「メニューに追加 ボタン。

• メニューを保存」をクリックします。 ボタンをクリックして設定を完了します。

こうすることで、WooCommerceショップの商品カテゴリーがサイトのナビゲーションメニューに表示され、顧客が素早く商品を閲覧・選択しやすくなります。

WooCommerceショップが必要とするその他の商品分類アクション

場合によっては ネッスル もしかしたら 並べる 例えば、製品の分類：

• 分類間の重複を避ける
• 画像は、ラベルを追加しなくても、すでにカテゴリーを明確に示している。
• カテゴリーの表示を特定のニーズに合わせる

以下はその一部である。 WooCommerce商品カテゴリー関連アクションこれにより、ショップカテゴリーをより柔軟に管理することができます。

WooCommerceで商品カテゴリーを非表示にする方法

WooCommerceでは、以下の2つの方法で商品カテゴリーを非表示にすることができます：

1. プラグインの使用
2. 使用コード

方法1：プラグインで商品カテゴリーを隠す

を使用することが可能です。 WooCommerceのカテゴリーと商品を隠す プラグインを使ってカテゴリーを非表示にすることができる。このプラグインは有料ツールで、次のような費用がかかります。 $4.09/月.

プラグインをインストールして有効にした後WooCommerce Optionsにあります。 製品の可視性 セッティング

手続き

1. 入り込む WooCommerce → 商品表示 → グローバル表示.
2. 非表示にしたい商品カテゴリーを選択します。
3. 変更の保存非表示のカテゴリーはショップページから消えます。

この方法は、コードを変更したくないユーザーに適しており、シンプルで管理しやすい。

WooCommerceの商品カテゴリーをコードで非表示にする方法

カスタムコードを使用して、商品カテゴリーを非表示にすることも可能です。以下は ゲットターム 商品カテゴリーの表示をコントロールするフィルター：

add_action( 'woocommerce_before_shop_loop', 'show_product_categories', 20 )；

関数show_product_categories() {

// 商品カテゴリーを表示する

echo do_shortcode( '[product_categories]' ); } } .

}

WooCommerceで商品カテゴリータイトル、商品数量、カテゴリーによるソートを非表示にする方法

WooCommerce商品カテゴリタイトルを隠す

次のコードは次のように使用できる。 商品カテゴリーのタイトルを隠す::

add_action( 'init', function() {)

remove_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' , has_action( 'woocommerce_shop_loop_subcategory_title', 'woocommerce_template_loop_category_title' ) ) ).loop_subcategory_title', 'woocommerce_template_loop_category_title' ) ).

} );

WooCommerce商品カテゴリ内の商品数を隠す

カテゴリーページを表示させたくない場合 製品数以下を使用できる。 ショートコード を隠す：

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {.

null を返します。

}, 10, 2 );

カテゴリーで並べ替え WooCommerce商品

次のコード・スニペットが使用できる。 WooCommerceの商品をカテゴリー別に並べ替える::

add_filter( 'woocommerce_subcategory_count_html', function( $markup, $category ) {.

null を返します。

}, 10, 2 );

WooCommerceカテゴリー画像サイズの設定方法

以下のステップを踏むことができる。 WooCommerceカテゴリー画像のサイズを変更する::

• ワードプレスのバックエンドへ渡航先 外観 > カスタマイズ.

• カスタマイズパネルでクリック WooCommerce > 商品画像.

• 画像設定でセレクション デフォルトサイズ もしかしたら カスタマイズ」をクリック 画像サイズを手動で設定する。

これにより、簡単に調整できる。 WooCommerceカテゴリー画像サイズショップのレイアウトとの親和性を高める。

WooCommerceの商品カテゴリー表示 よくある問題と解決策

WooCommerceショップで商品カテゴリを表示する際に、ユーザーが遭遇する可能性のある一般的な問題がいくつかあります。以下はこれらの問題の解決策です。

問題1：商品カテゴリーがメニューに表示されない

作成した商品カテゴリーが サイトメニュー 真ん中。

処方

• 入り込む 外観 > メニュー(メニュー）。
• の右上をクリックします。 「画面オプション(画面オプション）。
• ダニ "製品分類"(商品カテゴリー）オプションがあります。

• 左側の列に商品カテゴリーが表示されます。メニューに追加したいカテゴリーを選択して 「メニューに追加(メニューに追加）。

問題2：カテゴリー画像が表示されない

WooCommerceのカテゴリーページにカテゴリー画像が表示されないことがあります。

処方

• 各分類が完了していることを確認する 写真の設定.
• 入り込む 製品 > 分類(製品 > カテゴリ）。
• の下にあるカテゴリー名をクリックしてください。 "編集"(編集）。
• までスクロールしてください。 「サムネイル(サムネイル）セクションで "写真のアップロード/追加"(画像のアップロード/追加）。

• 変更の保存をクリックし、ページを更新して反映されるかどうかを確認する。

問題3：カテゴリー表示の順序が正しくない

WooCommerceのカテゴリが間違った順番で表示されることがあります。

処方

• 入り込む 製品 > 分類(製品 > カテゴリ）。
• 支出 ドラッグ・アンド・ドロップ みち 再注文.

問題4：空の商品カテゴリーが表示される

デフォルトでは、WooCommerce 商品のないカテゴリーも含め、すべてのカテゴリーが表示されます。.

処方

の空のカテゴリーを非表示にしたい場合は、以下のようにします。 ごかんけいせいぼおん functions.php 書類 以下のコード・スニペットを追加する：

add_filter( 'woocommerce_product_subcategories_args', 'hide_empty_categories' )；

関数 hide_empty_categories( $args ) { { {}を追加します。

$args['hide_empty'] = 1；

return $args；

}

問題5：カテゴリーページが検索エンジンにインデックスされない

WooCommerceのカテゴリーページ 検索エンジンにインデックスされないSEOランキングに影響する。

処方

• SEOプラグインの設定を確認する(例 ヨーストSEO もしかしたら 順位 数学に設定されていないことを確認してください。 "noindex".
• 入り込む 設定 > 読書(設定 > 読書）を確認してください。 「検索エンジンがこのサイトをインデックスしないようにする。(検索エンジンがこのサイトをインデックスしないようにする）ノーチェック.

概要

WooCommerceショップに商品カテゴリーとサブカテゴリーを表示することは、以下のことを提供するために重要です。 わかりやすく整理されたショッピング体験 重要です。商品を分類することで、顧客は必要なものを見つけやすくなる。