WooCommerce日本語解説サイト - WordPressでネットショップを作ろう!

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

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

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

 

ウィジェットとは?

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

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

ウィジェットの設定(AdminWeb)

 

WooCommerce独自のウィジェット

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

 

 

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

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

 

 

 WooCommerceカート

[入力項目]

WooCommerce標準ウィジェット:WooCommerceカート
WooCommerce標準ウィジェット:WooCommerceカート

[表示例]

カートの表示例
カートの表示例

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

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

 

WooCommerceフィルターナビ

[入力項目]

WooCommerce標準ウィジェット:WooCommerceフィルターナビ
WooCommerce標準ウィジェット:WooCommerceフィルターナビ

[表示例]

フィルターナビの表示例
フィルターナビの表示例

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

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

 

WooCommerceレイヤーナビ

[入力項目]

WooCommerce標準ウィジェット:WooCommerceレイヤーナビ
WooCommerce標準ウィジェット:WooCommerceレイヤーナビ

[表示例]

レイヤーナビの表示例
レイヤーナビの表示例

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

 

WooCommerce価格フィルター

[入力項目]

WooCommerce標準ウィジェット:WooCommerce価格フィルター
WooCommerce標準ウィジェット:WooCommerce価格フィルター

[表示例]

価格フィルターの表示例
価格フィルターの表示例

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

 

WooCommerce商品カテゴリー

[入力項目]

WooCommerce標準ウィジェット:WooCommerce商品カテゴリー
WooCommerce標準ウィジェット:WooCommerce商品カテゴリー

[表示例]

商品カテゴリーの表示例
商品カテゴリーの表示例

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

 

WooCommerce商品タグクラウド

[入力項目]

WooCommerce標準ウィジェット:WooCommerce商品タグクラウド
WooCommerce標準ウィジェット:WooCommerce商品タグクラウド

[表示例]

商品タグの表示例
商品タグの表示例

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

 

WooCommerce商品リスト

[入力項目]

WooCommerce標準ウィジェット:WooCommerce商品リスト
WooCommerce標準ウィジェット:WooCommerce商品リスト

[表示例]

商品リストの表示例
商品リストの表示例

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

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

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

 

WooCommerce商品検索

[入力項目]

WooCommerce標準ウィジェット:WooCommerce商品検索
WooCommerce標準ウィジェット:WooCommerce商品検索

[表示例]

商品検索の表示例
商品検索の表示例

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

 

WooCommerce新着レビューリスト

[入力項目]

WooCommerce標準ウィジェット:WooCommerce新着レビューリスト
WooCommerce標準ウィジェット:WooCommerce新着レビューリスト

[表示例]

新着レビューリストの表示例
新着レビューリストの表示例

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

 

WooCommerce最近閲覧された商品

[入力項目]

WooCommerce標準ウィジェット:WooCommerce最近閲覧された商品
WooCommerce標準ウィジェット:WooCommerce最近閲覧された商品

[表示例]

最近閲覧された商品の表示例
最近閲覧された商品の表示例

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

 

WooCommerce評価の高い商品リスト

[入力項目]

WooCommerce標準ウィジェット:WooCommerce評価の高い商品
WooCommerce標準ウィジェット:WooCommerce評価の高い商品

[表示例]

評価の高い商品リスト
評価の高い商品リスト

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

 

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

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

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

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

 

 

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

 

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

関連記事

コメントをどうぞ

メールアドレスは公開されません。

CAPTCHA