WooCommerce製品をカテゴリ別に表示する方法

公開: 2020-08-16

カテゴリ別のWooCommerceディスプレイ製品 WooCommerceストアを運営していて、WordPressでカテゴリ別に商品を表示したいですか？ この投稿では、WooCommerce製品をカテゴリ別に表示する方法について詳しく説明しています。 WooCommerceに精通している場合は、製品カテゴリが、顧客による適切な表示とアクセスのために製品を整理する上で重要な役割を果たすことをご存知でしょう。

カテゴリ別にWooCommerce製品を表示する

箱から出してすぐに、WooCommerceは、製品、カテゴリ、サブカテゴリ、または製品とカテゴリの両方など、アーカイブページに表示できるものに関するいくつかのオプションを提供します。 ただし、ほとんどのWooCommerceユーザーは、製品とカテゴリ/サブカテゴリの両方を表示する3番目のオプションを選択します。 woocommerceカテゴリを並べ替える

このオプションを使用すると、訪問者はホームページから直接製品を選択するか、クリックして製品カテゴリのアーカイブに移動して検索を絞り込むことができます。

ただし、これに関する主な欠点は、カテゴリ/サブカテゴリを一緒に表示し、2つを分離しないことです。 これにより、画像のサイズが異なるため、レイアウトが少し乱雑に見えます。

専門家の観点からは、画像が同じサイズであっても、アーカイブページの行の1つにカテゴリと製品の両方が含まれている場合、カテゴリに[カートに追加]ボタンがないため、その行はまとまりがないように見えます。すべての要素が同じ寸法であるとは限りません。

この簡単なチュートリアルでは、商品を表示する前に、カテゴリを別のリストに表示する方法を学習します。

  • アーカイブページにカテゴリとサブカテゴリを出力するために使用されるWooCommerceのコードを識別または区別します。
  • コードのカスタムプラグインを作成します。
  • 商品リストの前にカテゴリまたはサブカテゴリを配置する関数を記述します。
  • 出力のカスタムスタイルを作成します。

a）製品とカテゴリまたはサブカテゴリの両方を表示する

製品とカテゴリまたはサブカテゴリの両方を表示する手順。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観メニュー]> [カスタマイズ]をクリックします。 Shopページをクリックして、 WooCommerce> ProductCatalogを選択します。 [ショップの表示]オプションで、[カテゴリと商品を表示]を選択します。 [カテゴリの表示]オプションで、次のように[サブカテゴリと製品を表示]を選択します。 カテゴリ別にWooCommerce製品を表示する
  3. 行った変更を保存することを忘れないでください。
  4. これが結果になります： カテゴリ別にWooCommerce製品を表示する

b）WooCommerce製品カテゴリを表示する

ただし、以下のコードスニペットを使用してWooCommerce製品カテゴリを表示できます。これは、functions.phpファイルに配置する必要があります。

WooCommerce製品カテゴリを表示する手順

従う必要のある手順は次のとおりです。

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観]メニュー> [テーマエディター]をクリックします。テーマエディターページが開いたら、WooCommerce製品カテゴリを表示する関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。
 function woocommerce_product_category（$ args = array（））{

    $ woocommerce_category_id = get_queried_object_id（）;

  $ args = array（

             '親' => $ woocommerce_category_id
  ）;

  $ terms = get_terms（ 'product_cat'、$ args）;

  if（$ terms）{

             echo '<ul class = "woocommerce-categories">';

             foreach（$ terms as $ term）{

             echo '<li class = "woocommerce-product-category-page">';

            woocommerce_subcategory_thumbnail（$ term）;

             エコー '<h2>';

             echo '<a href = "'。esc_url（get_term_link（$ term））。'"class="'。$term->slug。' "> ';

             echo $ term-> name;

             エコー '</a>';

             エコー '</ h2>';

             エコー '</ li>';

             }

             エコー '</ ul>';

  }

}

add_action（ 'woocommerce_before_shop_loop'、 'woocommerce_product_category'、100）;
  1. これが結果になります： カテゴリ別にWooCommerce製品を表示する

ただし、製品を適切に表示するには、カスタムCSSが必要です。 これは、このチュートリアルの後半で行います。

コードのしくみ

このコードは、製品を出力するループを実行する前に、カテゴリまたはサブカテゴリを出力するwoocommerce_product_category() functionを使用するだけで機能します。 関数はプラグ可能であるため、テーマをオーバーライドできます。

c）WooCommerce製品カテゴリのサブカテゴリを一覧表示します

親製品カテゴリのスラッグを利用するカスタム関数を使用すると、WooCommerce製品カテゴリのサブカテゴリを簡単に取得できます。

WooCommerce製品カテゴリのサブカテゴリを一覧表示する手順

  1. WordPressサイトにログインし、管理者ユーザーとしてダッシュボードにアクセスします。
  2. [ダッシュボード]メニューから、[外観]メニュー> [テーマエディター]をクリックします。テーマエディターページが開いたら、WooCommerce製品カテゴリのサブカテゴリを一覧表示する関数を追加するテーマ関数ファイルを探します。
  3. 次のコードをphpファイルに追加します。
 function woocommerce_get_product_category_of_subcategories（$ category_slug）{

$ 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、$ taxonomy）;

    $ term_link = get_term_link（$ term、$ taxonomy）;

    if（is_wp_error（$ term_link））$ term_link = '';

    $ terms_html [] = '<a href = "'。esc_url（$ term_link）。'" rel = "tag"class="'。$term->slug。' "> '。 $ term-> name。 '</a>';
}

'<span class = "subcategories-'。$ category_slug。 '">'を返します。 implode（ '、'、$ terms_html）。 '</ span>';

}
  1. これが結果になります： WooCOmmerce製品カテゴリのサブカテゴリを一覧表示します

コードのしくみ。

WP_Termオブジェクトは、製品カテゴリの親を取得します。 次に、配列内の子IDを取得し、最後に、子ID配列をループして、子カテゴリをHTMLに表示します。

d）WooCommerceがアーカイブにカテゴリと製品を出力するために使用するコードを特定する

プラグインを作成する前の最初のステップは、WooCommerceがカテゴリとサブカテゴリを出力する方法を確実に特定することです。 これは、関連する関数を見つけるためにWooCommerceソースコードを手動で探す必要があることを意味します。

プロセスを簡略化するには、templatesフォルダーにあるarchive-product.phpを探します。 これは、WooCommerceがアーカイブページを表示するために使用するファイルです。 次に、カテゴリと製品を出力するコードを見つける必要があります。

 <？php
/ **
* woocommerce_before_shop_loopフック
*
* @hooked woocommerce_result_count-20
* @hooked woocommerce_catalog_ordering-30
* /

do_action（ 'woocommerce_before_shop_loop'）;
？>

<？php woocommerce_product_loop_start（）; ？>

<？php woocommerce_product_subcategories（）; ？>

<？php while（have_posts（））：the_post（）; ？>

<？php wc_get_template_part（ 'content'、 'product'）; ？>

<？php endwhile; //ループの終わり。 ？>

<？php woocommerce_product_loop_end（）; ？>

コードの仕組み：

woocommerce_product_subcategories() functionは、商品を出力するループを実行する前に、カテゴリまたはサブカテゴリを出力します。 この関数に注目した理由は、プラグイン可能であるためです。つまり、テーマでオーバーライドできるということです。

ただし、WooCommerceにはアイテムをクリアするためのスタイルが組み込まれているため、これは機能しません。これは、デフォルトの表示で行の先頭に表示されます。 だから何をすべきか？ 答えは簡単です。 商品だけが表示されるように、アーカイブページのカテゴリとサブカテゴリの表示をオフにする必要があります。

この後、次のステップは、製品カテゴリまたはサブカテゴリを出力する新しい関数を作成し、それをwoocommerce_before_shop_loop actionにフックします。高い優先度を使用して、そのアクションにすでにフックされている関数の後に起動するようにします。

ただし、WooCommerceは3番目の商品リストごとにクリアを追加することに注意することが重要です。 これは、 woocommerce_product_subcategories() functionまたはその編集バージョンを使用してカテゴリを表示できないことを意味します。 これについての説明は、この関数を使用してカテゴリを個別に表示する場合でも、この関数はリストされている3番目、6番目（など）のカテゴリまたは製品をクリアするということです。 これは、それをオーバーライドする関数を作成する必要があることを意味します。 これは、プラグインを作成することで実行できます。

e）プラグインの作成

最初に新しい古いものを作成し、 wp-content / pluginsディレクトリに一意の名前を付ける必要があります。 この例では、必要な機能を実現できるように、手順を実行するときに注意してください。 この名前をnjengah-separate-products-categories-in-archives使用します。

このフォルダ内に、一意の名前で新しいファイルを作成する必要があります。 このフォルダnjengah-separate-products-categories-in-archives.phpも同じ名前を使用します。

プラグインを作成する手順

  1. ファイルを開き、次のコードを追加します。
 <？php
/ **
*プラグイン名：WooCommerce製品カテゴリ
*説明：WooCommerceの製品ページにWooCommerceのカテゴリを表示します

** /
  1. 関数を作成する前に、WordPressサイトにログインして管理画面のカテゴリリストをオフにし、管理者ユーザーとしてダッシュボードにアクセスする必要があります。
  2. [ダッシュボード]メニューから、[外観メニュー]> [カスタマイズ]をクリックします。 Shopページをクリックして、 WooCommerce> ProductCatalogを選択します。 [ショップの表示]オプションで、[商品を表示]を選択します。 [カテゴリの表示]オプションで、[商品の表示]を選択します。
  3. 行った変更を保存することを忘れないでください。
  4. これが結果になります： カテゴリ別にWooCommerce製品を表示する
  5. これをプラグインファイルに追加します。
 function njengah_product_subcategories（$ args = array（））{

}

add_action（ 'woocommerce_before_shop_loop'、 'njengah_product_subcategories'、50）;
  1. 次に、このコードを関数に追加する必要があります。
  2.  $ parentid = get_queried_object_id（）;

$ args = array（

'親' => $ parentid

）;

$ terms = get_terms（ 'product_cat'、$ args）;

if（$ terms）{

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

foreach（$ terms as $ term）{

エコー '<li class = "category">';

woocommerce_subcategory_thumbnail（$ term）;

エコー '<h2>';

echo '<a href = "'。esc_url（get_term_link（$ term））。'"class="'。$term->slug。' "> ';

echo $ term-> name;

エコー '</a>';

エコー '</ h2>';

エコー '</ li>';

}

エコー '</ ul>';

}

    これが結果になります： カテゴリ別にWooCommerce製品を表示する

上の画像からわかるように、カテゴリは適切に整理されていません。 これは、カスタムスタイルを追加する必要があることを意味します。 ただし、その前に、コードがどのように機能するかを学びましょう。

コードのしくみ

作成した関数は、現在クエリされているオブジェクトを識別し、そのIDを$parentidとして定義します。 次に、 get_terms()を使用して、現在クエリされているアイテムを親とする用語を識別します。 これがメインショップページの場合はトップレベルのカテゴリを返し、カテゴリアーカイブの場合はサブカテゴリを返します。

さらに、この関数は、for eachループとul要素を開く前に、用語があるかどうかをチェックします。 つまり、用語ごとにli要素を作成し、 category image using woocommerce_subcatgeory_thumbnail()出力し、その後にアーカイブへのリンクでカテゴリ名を出力します。

カテゴリリストのスタイルを設定する手順

これらはあなたが従う必要のあるステップですが、これを行うには、プラグイン内にスタイルシートが必要であり、それをエンキューする必要があります。

  1. CSSというフォルダーを作成し、その中にCSSというファイルを作成します。 これを機能させるには、プラグインフォルダでこれを行う必要があります。
  2. 作成済みの関数の先頭に次のコードを追加します。
 関数njengah_product_cats_css（）{




/ *スタイルシートを登録します* /

wp_register_style（ 'njengah _product_cats_css'、plugins_url（ 'css / style.css'、__ FILE__））;




/ *スタイルシートをキューに入れます* /

wp_enqueue_style（ 'njengah _product_cats_css'）;




}




add_action（ 'wp_enqueue_scripts'、 'njengah _product_cats_css'）;
  1. 次のステップは、スタイルシートを開き、以下のコードを追加することです。 ただし、WooCommerceはモバイルファーストのスタイルを使用しているため、これも使用することに注意してください。
 ul.product-cats li {
リストスタイル：なし;
マージン左：0;
マージンボトム：4.236em;
text-align：center;
位置：相対;
}

ul.product-cats li img {
マージン：0自動;
}


@media screen and（min-width：768px）{

ul.product-cats {
マージン左：0;
明確：両方;
}

ul.product-cats li {
幅：29.4117647059％;
フロート：左;
マージン右：5.8823529412％;
}

ul.product-cats li：nth-​​of-type（3）{
マージン右：0;
}

}
  1. これが結果になります： カテゴリ別にWooCommerce製品を表示する

結論

この投稿では、WooCommerce製品をカテゴリ別に表示するさまざまな方法を紹介しました。 この簡単なチュートリアルから、製品カテゴリがWooCommerceの優れた機能である理由を理解できますが、それらの表示方法が常に理想的であるとは限りません。

さらに、商品リストとは別に商品カテゴリまたはサブカテゴリを出力するプラグインを作成する方法と、カテゴリリストのスタイルを設定する方法を学習しました。 このチュートリアルの最も優れた部分は、WooCommerceテンプレートファイル内の別のアクションフックに関数をフックすることにより、ページ上のカテゴリまたはサブカテゴリのリストを出力するカスタムプラグインの作成です。

同様の記事

  1. デフォルトの商品並べ替えWooCommerceを削除する方法
  2. WooCommerceで現在の製品カテゴリ名を取得する方法
  3. WooCommerceでデジタル製品を販売する方法
  4. ユーザーエクスペリエンスを向上させるためにWooCommerceカテゴリを並べ替える方法
  5. WooCommerceの製品にGTIN番号を追加する方法
  6. WooCommerce製品ページから数量フィールドを非表示または削除する
  7. WooCommerceクーポンコードフィールドを非表示にする方法
  8. WooCommerceで価格の前にテキストを追加する方法»価格の前にテキストを追加する
  9. WooCommerceでプログラムで製品価格を変更する方法
  10. WooCommerceで画像の下に説明を移動する方法
  11. WooCommerce製品画像のズーム効果を削除する方法
  12. WooCommerceで価格の後に説明を追加する方法
  13. WooCommerceの商品画像のサイズを変更する方法
  14. WooCommerceで商品を非表示にする方法、またはカテゴリや役割で商品を非表示にする方法