前回はWooCommerce（ウーコマース）の商品リストを表示するショートコードについて解説しました。今回はサイドバーに商品リストなどを簡単に表示できるWooCommerce独自のウィジェットについて解説します。サイドバーは重要なナビゲーションなので、しっかりと押さえておきましょう。
記事の最後でネットショップとしてのサイドバーの考え方にも触れていますので、是非参考にしてください。
ウィジェットとは？
すごく簡単に言うと”サイドバーに様々な表示ができるモジュールのようなもの”です。ウィジェットにはいくつかの項目が用意されていて、クリックで選択したり、テキストを入力するだけで、記事リストを表示させたり、カテゴリー一覧を表示させることができます。
WordPressのウィジェットをあまり知らない人はこちらの記事が参考になると思います。
WooCommerce独自のウィジェット
WooCommerceには独自のウィジェットが用意されています。WooCommerceの場合は記事リスト→商品リスト、投稿カテゴリー一覧→商品カテゴリー一覧になると考えていただけると分かりやすいと思います。また、何かを表示するだけでなく、一覧表示されている商品を絞り込む機能を持っているものもあります。
ウィジェットの紹介と表示例
WooCommerceに標準で用意されているウィジェットについて説明します。
WooCommerceカート
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
サイドバーにユーザーのカートが表示されます。×（バツ）をクリックするとカートから商品を削除することができます。
オプションでカートが空の場合は非表示にできます。
WooCommerceフィルターナビ
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
絞り込みフィルターのナビゲーションです。ユーザーは現在適用されているものを確認でき、またそれを削除することもできます。
表示例では価格フィルターによる絞り込み（価格下限、価格上限）を表しています。
WooCommerceレイヤーナビ
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
商品カテゴリを表示時、カスタム属性で商品を絞り込むことができます。リストまたはドロップダウンでの表示ができます。
WooCommerce価格フィルター
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
ウィジェット内の価格フィルタースライダー（下限と上限）で、商品のカテゴリに表示する商品リストを絞り込むことができます。
WooCommerce商品カテゴリー
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
商品カテゴリーのリストまたはドロップダウン表示します。オプションにより、表示順・表示内容の調整が可能です。
WooCommerce商品タグクラウド
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
よく使われるタグクラウド形式で商品タグ一覧を表示します。
WooCommerce商品リスト
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
表示する商品数は任意に変更できます。
表示対象は「すべての商品」、「おすすめの商品」、「セール中の商品」から選択できます。
並び順の条件（ソートキー）は、「日付（商品登録日）」、「金額」、「ランダム」、「販売数」から選択できます。
WooCommerce商品検索
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
商品の検索フォームを表示します。
WooCommerce新着レビューリスト
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
新着レビューリストを表示します。表示数は任意に設定できます。
WooCommerce最近閲覧された商品
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
ショップ訪問者が最近閲覧した商品をリスト表示します。（ショップ訪問者の閲覧履歴によって訪問者毎に変化します。）
WooCommerce評価の高い商品リスト
[su_row]
[su_column size=”2/3″]
［入力項目］
[/su_column]
[su_column size=”1/3″]
［表示例］
[/su_column]
[/su_row]
レビュー評価の平均が高い商品リストを表示します。表示数は任意に設定できます。
ネットショップにおけるサイドバーの考え方
サイドバーはショップに訪れたお客様が商品を探したり、購入の意思決定をする上でとても重要な役割を担っています。WooCommerce独自のウィジェットは商品の表示に関するものがものがほとんどですが、商品以外にも表示すべき要素はあります。例として以下のような要素があります。
- 送料について
- 納期について（商品のお届けの目安）
- 営業日について（出荷業務、問い合わせ対応などが可能な日）
- ショップの新着情報（新商品、セールなどの情報）
- ショップブログの記事リスト
- バナー類
- etc
これらはショップとしてお客様に見えるところにあるべき情報の一例です。すべてサイドバーに置くべきということではなく、ヘッダーやフッターも含めて、情報の配置をしっかり考える必要があるということです。そのショップのコンセプト、ターゲットとなる客層に合わせて情報の配置を考えましょう。その中でサイドバーには何を表示するかを決めましょう。WooCommerceのウィジェットはあくまでも、その要素の一部であるということを踏まえて使用してください。
WooCommerceのウィジェットの説明は以上です。次は「ショップのトップページの作り方」です。
