【WooCommerce設定ガイド】 専用ウィジェットをサイドバーに設定しよう

前回はWooCommerce（ウーコマース）の商品リストを表示するショートコードについて解説しました。今回はサイドバーに商品リストなどを簡単に表示できるWooCommerce独自のウィジェットについて解説します。サイドバーは重要なナビゲーションなので、しっかりと押さえておきましょう。

記事の最後でネットショップとしてのサイドバーの考え方にも触れていますので、是非参考にしてください。

 

ウィジェットとは？

すごく簡単に言うと”サイドバーに様々な表示ができるモジュールのようなもの”です。ウィジェットにはいくつかの項目が用意されていて、クリックで選択したり、テキストを入力するだけで、記事リストを表示させたり、カテゴリー一覧を表示させることができます。

WordPressのウィジェットをあまり知らない人はこちらの記事が参考になると思います。

→ ウィジェットの設定（AdminWeb）

 

WooCommerce独自のウィジェット

WooCommerceには独自のウィジェットが用意されています。WooCommerceの場合は記事リスト→商品リスト、投稿カテゴリー一覧→商品カテゴリー一覧になると考えていただけると分かりやすいと思います。また、何かを表示するだけでなく、一覧表示されている商品を絞り込む機能を持っているものもあります。

 

 

ウィジェットの紹介と表示例

WooCommerceに標準で用意されているウィジェットについて説明します。

 

 

 WooCommerceカート

サイドバーにユーザーのカートが表示されます。×（バツ）をクリックするとカートから商品を削除することができます。

オプションでカートが空の場合は非表示にできます。

 

WooCommerceフィルターナビ

絞り込みフィルターのナビゲーションです。ユーザーは現在適用されているものを確認でき、またそれを削除することもできます。

表示例では価格フィルターによる絞り込み（価格下限、価格上限）を表しています。

 

WooCommerceレイヤーナビ

商品カテゴリを表示時、カスタム属性で商品を絞り込むことができます。リストまたはドロップダウンでの表示ができます。

 

WooCommerce価格フィルター

ウィジェット内の価格フィルタースライダー（下限と上限）で、商品のカテゴリに表示する商品リストを絞り込むことができます。

 

WooCommerce商品カテゴリー

商品カテゴリーのリストまたはドロップダウン表示します。オプションにより、表示順・表示内容の調整が可能です。

 

WooCommerce商品タグクラウド

よく使われるタグクラウド形式で商品タグ一覧を表示します。

 

WooCommerce商品リスト

表示する商品数は任意に変更できます。

表示対象は「すべての商品」、「おすすめの商品」、「セール中の商品」から選択できます。

並び順の条件（ソートキー）は、「日付（商品登録日）」、「金額」、「ランダム」、「販売数」から選択できます。

 

WooCommerce商品検索

商品の検索フォームを表示します。

 

WooCommerce新着レビューリスト

新着レビューリストを表示します。表示数は任意に設定できます。

 

WooCommerce最近閲覧された商品

ショップ訪問者が最近閲覧した商品をリスト表示します。（ショップ訪問者の閲覧履歴によって訪問者毎に変化します。）

 

WooCommerce評価の高い商品リスト

レビュー評価の平均が高い商品リストを表示します。表示数は任意に設定できます。

 

ネットショップにおけるサイドバーの考え方

サイドバーはショップに訪れたお客様が商品を探したり、購入の意思決定をする上でとても重要な役割を担っています。WooCommerce独自のウィジェットは商品の表示に関するものがものがほとんどですが、商品以外にも表示すべき要素はあります。例として以下のような要素があります。

• 送料について
• 納期について（商品のお届けの目安）
• 営業日について（出荷業務、問い合わせ対応などが可能な日）
• ショップの新着情報（新商品、セールなどの情報）
• ショップブログの記事リスト
• バナー類
• etc

これらはショップとしてお客様に見えるところにあるべき情報の一例です。すべてサイドバーに置くべきということではなく、ヘッダーやフッターも含めて、情報の配置をしっかり考える必要があるということです。そのショップのコンセプト、ターゲットとなる客層に合わせて情報の配置を考えましょう。その中でサイドバーには何を表示するかを決めましょう。WooCommerceのウィジェットはあくまでも、その要素の一部であるということを踏まえて使用してください。

 

 

WooCommerceのウィジェットの説明は以上です。次は「ショップのトップページの作り方」です。

 

→ 『【WooCommerce設定ガイド】ショップ構築の7つのステップ』に戻る