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

公開: 2021-12-16

優れたショップデザインを持つための重要な部分は、製品を分類できるようにすることです。あなたが正しい方法で売っているものを表示することはあなたの売り上げに大きな違いを生むことができます。商品にアクセスしやすいほど、顧客が商品をチェックアウトして購入する可能性が高くなります。そのため、このガイドでは、WooCommerceショップページにカテゴリを表示するさまざまな方法を紹介します。

ショップページにカテゴリを表示するのはなぜですか？

多種多様なカテゴリの商品を多数販売している場合は、訪問者が探しているものを簡単に見つけられるようにする必要があります。それには注意深い組織が必要です。すべての商品を一度に表示すると、買い物客を圧倒する可能性があり、リードを失う簡単な方法になる可能性があります。代わりに、ストアにメリットをもたらす方法でショップページを整理することを検討する必要があります。

そのための最良の方法の1つは、カテゴリを個別に表示して、ショップのレイアウトを最大限に活用することです。このようにして、顧客は必要な製品のカテゴリに集中し、関心のあるすべてのタイプの製品間を行き来することができます。これにより、ナビゲーションがはるかに簡単になり、必要なものをすばやく見つけて売上を増やすことができます。

カテゴリと特定のカテゴリの設定

たとえば、電子製品を販売する場合、スマートフォン、デスクトップPC、PC部品、およびその他の機器が別々のカテゴリに表示されるようにする必要があります。このようにして、顧客がコンピュータパーツに興味を持っている場合、その特定のカテゴリをチェックして、そこに必要なものを見つけることができます。同様に、必要な製品がどのカテゴリにリストされているかわからない場合は、同じカテゴリの他の製品を参照すると、それを理解するのに役立ちます。

または、ショップページに特定のカテゴリの商品のみを表示して、より小さなカタログに焦点を当てることもできます。ショップページで特定の商品のみを宣伝し、少数の高品質の商品を販売している場合はそれらを目立たせることができます。

顧客に優しいレイアウトは売り上げに大きな影響を与える可能性があるため、ショップページの構成は非常に重要です。それを念頭に置いて、WooCommerce Shopページにカテゴリを表示するいくつかの方法と、それをカスタマイズする方法を見てみましょう。

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

WooCommerceのショップページにカテゴリを表示するには、さまざまな方法があります。

ダッシュボードのテーマカスタマイザーを使用
ショートコードを使用する
プログラムで

それぞれの方法を詳しく見ていきましょう。

注：このデモでは、ストアフロントテーマを使用するため、テーマのオプションが若干異なる場合があります。ただし、ほとんどのオプションは類似しているため、このガイドに従って問題が発生することはありません。

1）WooCommerceダッシュボードでカテゴリを表示する

ショップページにカテゴリを表示する最も簡単な方法は、 WooCommerce設定を使用することです。このために、ダッシュボードで、[外観] > [カスタマイズ]に移動し、カスタマイザーサイドバーの[ WooCommerce]> [製品カタログ]をクリックします。

woocommerceショップページにカテゴリを表示-WCダッシュボード製品カタログ

ここから、ショップページの表示を使用して、[カテゴリを表示]または[カテゴリと商品を表示]を選択できます。

woocommerceショップページにカテゴリを表示-WCダッシュボードにカテゴリと製品を表示

最初のオプションではショップページに商品カテゴリのみが表示され、2番目のオプションでは商品カテゴリと残りの商品が表示されます。たとえば、[ショップページの表示]で[カテゴリの表示]を有効にすると、ショップページには次のような商品カテゴリのみが表示されます。

ただし、[カテゴリと製品]を選択すると、最初にカテゴリが表示され、次に製品カタログの残りの部分が表示されます。

以下のラベルの付いたカテゴリ表示オプションを使用して、製品カテゴリページで製品サブカテゴリと製品を表示/非表示にすることもできます。

カスタマイズに満足したら、[公開]をクリックして変更を保存することを忘れないでください。

この方法の最も便利な点の1つは、変更をリアルタイムでプレビューできることです。これにより、使いやすくなります。ただし、オプションが2つしかないため、あまり制御できません。より柔軟性が必要な場合は、次の方法を確認してください。

2）ショートコードを使用してカテゴリを表示する

ページビルダーまたはカスタムデザインのショップページを使用してカスタムショップページを設定している場合は、WooCommerceショートコードを有効にして製品カテゴリを表示できます。これにより、ダッシュボードを使用するよりも、表示する内容と製品カテゴリの表示方法をより細かく制御できます。さらに、この方法を使用して、WordPressのページや投稿にカテゴリを表示できます。

これを行うには、ショップページに次のショートコードを追加するだけです。

 [ product_categories ]

これにより、ショップページに商品カテゴリが表示されます。しかし、それだけではありません。追加の属性を使用して、ショートコードをカスタマイズできます。たとえば、商品カテゴリの順序を変更したり、親カテゴリのみを表示したり、空のカテゴリを非表示にしたり、カテゴリの数を定義したりすることができます。

WooCommerceショートコードの使用方法について詳しくは、この投稿をご覧になることをお勧めします。また、使用できるすべてのカテゴリ属性の詳細については、このサイトを確認してください。

グーテンベルクを使用している場合は、ショップページに移動し、ショートコードブロックを追加して、 [ product_categories ]ショートコードを貼り付けます。

次に、ショートコードの使用方法を見てみましょう。 WooCommerce Shopページにカテゴリを表示する場合は、カテゴリIDの昇順で、次のショートコードを使用します。

 [ product_categories orderby = “id” order = “ASC” ]

woocommerceショップページにカテゴリを表示-カスタムショートコード

これは、次のようにショップページに表示されます。

woocommerceショップページにカテゴリを表示-ショートコードの結果

WooCommerceショップページで特定のカテゴリを表示する方法

ショートコードメソッドを使用して、特定のWooCommerce製品カテゴリを表示することもできます。

これを使用するには、製品カテゴリのスラッグを使用する必要があります。カテゴリスラッグは、 [製品]> [カテゴリ]で表示できます。

WooCommerceshoページにカテゴリを表示-製品スラッグ

特定の製品のスラッグがわかったら、次のようにショップページで使用できます。

 [ product category category=”slug” ]

スラッグテキストを対応するカテゴリスラッグに置き換えるだけです。たとえば、スラッグがShowの場合、ショートコードは次のようになります。

フロントエンドには、次のようなものが表示されます。

[ product categories ]で使用できるのと同じ属性を使用して、さらにカスタマイズすることもできます。

3）プログラムでカテゴリを表示する

WooCommerceショップページにカテゴリを追加するもう1つの方法は、少しのコードを使用することです。この方法は、コーディングスキルがあり、テーマファイルを構成できるユーザーに推奨されます。 PHPの知識とは別に、CSSの基本的な知識も持っていることをお勧めします。これらの言語に慣れていない場合は、上記の方法に従うことをお勧めします。

いくつかのコアファイルを編集するので、このプロセスを開始する前に、サイトをバックアップし、子テーマをまだ作成していない場合は作成することをお勧めします。方法がわからない場合は、最高の子テーマプラグインをいくつか見てください。

さて、これ以上面倒なことはせずに、WooCommerceショップページでカテゴリを表示する方法を見てみましょう。

ショップページにカテゴリを表示する機能を追加する

子テーマを設定したら、 [外観]> [テーマエディター]に移動して、テーマのfunctions.phpファイルを開きます。そこに到達したら、右側のテーマファイルサイドバーにあるfunctions.phpファイルをクリックします。

WooCommerceshoページにカテゴリを表示-関数ファイル

これで、次のスクリプトをエディターに貼り付けて、カスタム関数を追加する準備が整いました。

この関数は、残りのショップページ製品をロードする前に製品カテゴリを追加します。これは、残りの製品カタログを表示する前に、すべての製品カテゴリ項目を追加するための優れた方法です。

 function product_subcategories（$ args = array（））{
$ 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>';
}

}

add_action（ 'woocommerce_before_shop_loop'、 'product_subcategories'、50）;

上記のように、この関数はカテゴリセクションをWooCommerceショップページに追加します。ただし、希望どおりに表示されない場合や、サイトのスタイルと一致しない場合があります。これは、新しく作成したカテゴリセクションのスタイルを設定する必要があるためです。

カスタムカテゴリセクションのスタイリングの設定

次に、カスタマイズ可能なCSSをテーマカスタマイザーの[追加のCSS]セクションに追加しましょう。 WordPressダッシュボードで、 [外観]> [カスタマイズ]に移動してテーマの[カスタマイザー]メニューを開き、[追加のCSS]をクリックします。

woocommerceショップページにカテゴリを表示-カスタマイザー追加CSS

次に、次のCSSスニペットを[追加のCSS]セクションに貼り付け、Webサイトのスタイルに一致するようにカスタマイズします。

ご想像のとおり、CSSの知識があれば、さらに多くのオプションがあります。コードを追加する方法がわからない場合は、WordPressにCSSを追加する方法に関するガイドをご覧ください。

次のスニペットは、画像のサイズと画像の下のテキストを変更します。このコードはサンプルなので、自由にカスタマイズして、サイトがカテゴリセクションを設定するための適切なスタイルを指定してください。

 ul.product-cats {
マージン左：0;
}

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 li {
幅：29.4117647059％;
フロート：左;
マージン右：.8823529412％;
}

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

変更が完了したら、カスタマイザー設定を更新すると、ショップページが新しいカテゴリセクションで更新されます。

ボーナス：ショップページを改善するための追加の方法

ショップページをできるだけ顧客に優しいものにするために適用できる変更は他にもあります。これには、表示される製品の数の管理、最高評価の製品を含むセクションの追加などが含まれます。アイデアは、商品を見つけやすくし、顧客により良いショッピング体験を提供することです。ショップページをカスタマイズして売り上げを伸ばす方法を見てみましょう。

まず、商品カテゴリのすぐ下に最も人気のある商品リストを追加する方法を見てみましょう。

WooCommerceショップページで最も人気のある商品を表示する方法

製品カテゴリを追加するだけでなく、ショートコードを使用してカスタム製品カタログを追加することもできます。これには、次のショートコードを使用して表示できる最も人気のある製品セクションが含まれます。

 [ products orderby="popularity" ]

前に見たように、ここで見つけることができるショートコード属性を追加できます。

最も人気のある商品セクションをショップページに追加するには、次のショートコードを追加するだけです。この場合、2つの列に商品を表示するために、いくつかの属性を追加しています。

 [ products orderby="popularity" class="m-popular" columns="2" limit="2" ]

WooCommerceショップページにカテゴリを表示-ボーナストップレート

さらに、ショートコードを使用して、セール中の商品、ベストセラー、トップレートの商品などの複数のセクションを追加できます。

[ best_selling_products ]
[ top_rated_products ]
[ recent_products ]

最良の部分は、ショップページのさまざまな部分でこれらのショートコードを使用し、属性を追加してそれらをカスタマイズできることです。このようにして、ショップページのフローを制御し、売り上げを増やすことができます。

これらはほんの一例ですが、ショップページを最大限に活用するためにできることは他にもたくさんあります。詳細については、WooCommerceShopページをカスタマイズする方法に関する完全ガイドをご覧ください。

結論

要約すると、ショップページに商品を表示する方法は、売り上げに大きな影響を与える可能性があります。そのため、カテゴリを表示し、商品をスマートに整理することは、すべての店舗所有者にとって必須です。

このチュートリアルでは、WooCommerceショップページにカテゴリを表示するさまざまな方法を紹介しました。

テーマカスタマイザーの下のWooCommerce設定で
ショートコードの使用
カスタム関数とそれをカスタマイズするためのCSSのビットで

簡単な解決策が必要な場合は、WordPressダッシュボードのオプションを使用できます。ただし、その方法では多くのカスタマイズオプションが提供されません。もう1つのオプションは、カスタマイズ可能なショートコードを使用することです。ただし、さらに柔軟性が必要で、コーディングスキルがある場合は、プログラムで製品カテゴリを表示できます。そのためには、PHPとCSSの両方の知識が必要になることに注意してください。

さらに、最初から始めるのではなく、テンプレートを使用してショップページをカスタマイズする方法を探している場合は、そうすることもできます。ただし、このためには、テンプレートファイルを構成し、テーマファイルを変更する必要があります。ショップページをプログラムでカスタマイズしたり、WooCommerceテンプレートを設定したりするための完全なガイドがここにあります。

WooCommerceショップページをプログラムで編集する方法
WooCommerceテンプレートファイルをカスタマイズする方法

ショップページをカスタマイズして、商品カテゴリを表示しましたか？どの方法を使用しましたか？以下のコメントセクションでお知らせください。

最後に、ショップページを改善する他の方法をお探しの場合は、次の記事をご覧ください。

WooCommerceショップページをプログラムで編集する（CSSおよびPHP）
ElementorでWooCommerceショップページをカスタマイズする方法
WooCommerceショップページを修正する方法が空です