WooCommerceでは用意されているショートコードを使うことで、セール中の商品や売れ筋の商品、個別で指定した商品のみを表示するページを作成できます。表示する順番なども自在に指定できるので、商品をさまざまな角度から訴求可能です。

そこで今回は、WooCommerceの商品一覧ページをショートコードで作成する方法を解説いたします。

ショートコードでつくれる商品一覧ページとは

例えば、以下のような商品一覧ページを簡単に作成できます。

  • セール中の商品一覧
  • おすすめの商品一覧
  • 売れ筋の商品一覧
  • レビューの高い順の商品一覧
  • 表示順やカテゴリー、個別に指定した商品の一覧

WooCommerceにあらかじめ用意されているショートコードをページにコピペするだけです。

固定ページ内にショートコードをコピペした例

特に商品数が多いネットショップでは、すべての商品を効率的にアピールすることが難しくなるので、指定した商品のみを表示できる一覧ページが貢献します。

商品一覧ページのショートコード一覧

WooCommerceで使える商品一覧ページ向けのショートコードをこちらにまとめました。表示したい商品ごとにショートコードをコピペしてご活用ください。

セール中の商品一覧

[sale_products]

セール中の商品一覧を表示するショートコードです。値下げしている商品などを1箇所にまとめて訴求する際にご活用いただけます。

利用シーン値下げ商品一覧ページをつくって、キャンペーンバナーのリンク先に設置するなど

おすすめの商品一覧

[featured_products]

おすすめの商品のみを一覧表示するショートコードです。管理画面から個別に指定した商品のみを表示できます。WooCommerceの商品管理画面の下記箇所で★となっている商品のみが表示される仕様です。

おすすめ商品のスター設定箇所

ページ作成後でも、商品一覧から★をクリックすれば自動で追加されます。

利用シーン・管理者が訴求したい商品を一覧からワンクリックで指定して表示したいとき
・作成したページの商品をワンクリックで変更したいとき

売れ筋の商品一覧

[best_selling_products]

商品を販売個数の多い順で一覧表示するショートコードです。簡易的な商品のランキングページとしてご活用いただけます。

利用シーン人気商品のランキングページ等、販売個数順で表示したいとき

レビュー高い順の商品一覧

[top_rated_products]

商品をレビュー評価が高い順に表示するショートコードです。ユーザーの評価が高い順に商品が表示されるので、純粋な販売個数とはまた異なる角度から商品を訴求できます。購入を検討している方にとって、他のユーザーの評価は何より信ぴょう性の高い情報です。

利用シーンユーザーの評価を基準に商品をアピールしたいとき

WooCommerceでは商品レビューを承認制にすることもできます。スパム防止のために設定しておくのがおすすめです。

2022.12.23

2023.11.11

【WooCommerce】商品レビューを承認制にする方法

本格派なネットショップがつくれるWordPressプラグイン「WooCommerce」ですが、商品のレビューをお客さんに書いていただく機能があります。 レビュー機能自体はワンクリックで有効化可能で、下記記事内の「高度な設定」でご紹介しています。 今回はそんなWooCommerceの商品レ...

すべての商品一覧

[products]

すべての商品一覧を表示するショートコードです。WooCommerce有効化時に生成されるショップページ（例：https://example.com/shop/）と同じようにすべての商品が表示されます。

ですので、基本的には後述する並び順やカテゴリーを指定する属性と組み合わせて利用します。

利用シーン並び順やカテゴリー、商品個別のIDを指定して商品を表示したいとき

並び順やカテゴリーを指定する属性一覧

WooCommerceには、表示順や商品カテゴリーなどを指定する属性も用意されており、先述のショートコードと組み合わせて使えます。指定できる便利な属性は以下の通りです。

並び順

並び順を指定したい場合は、次の属性を使います。

[orderby="任意の値"]

例えば、次のような値を利用可能です。

  • 日付順（公開された順）：date
  • 読み込むたびにランダム：rand
  • 販売個数順：popularity

▼セール中の商品をランダムに表示する例

[sale_products orderby="rand"]

カテゴリー

表示する商品のカテゴリーを指定したい場合は、次の属性を使います。

[category="カテゴリーのスラッグ"]

▼「アクセサリー」カテゴリーに属するおすすめの商品を表示する例

[featured_products category="accessory"]

表示する商品数

表示する商品数も次の属性を用いて指定可能です。

[limit="数値"]

▼商品をレビューの高い順で10個表示する例

[top_rated_products limit="10"]

商品ID

商品を個別に指定して表示するショートコードです。セールやおすすめ（★）などに属していない商品もIDで指定して表示可能です。

[ids="商品のID"]

商品のIDは、管理画面の商品一覧で商品にカーソルを合わせると確認できます。

商品IDの確認箇所

▼全商品の中からID115、120、125の商品のみを表示する例

[products ids="115,120,125"]

※商品IDが複数の場合は「,」で区切ります。

まとめ：組み合わせ次第で幅広い見せ方が可能

WooCommerceで使えるショートコードと属性を使いこなすことで、幅広い見せ方で商品を訴求できます。複数組み合わせると、例えばこのような見せ方も可能です。

「アクセサリーカテゴリーに属するおすすめの商品を販売個数順で10個表示する」

[featured_products category="accessory" limit="10" orderby="popularity"]

※複数の属性の間は半角スペースをあけます。

具体的に条件を指定できるので、商品数が多い場合に効果的にご活用いただけます。ぜひショートコードと属性を組み合わせて、商品一覧ページをカスタマイズしてみてください。

WooCommerce対応テンプレート
合わせて読みたいWooCommerceの関連記事

第1回 ：WooCommerceとは？
第2回 ：インストール
第3回 ：基本設定
第4回 ：商品登録
第5回 ：デジタルコンテンツ販売
第6回 ：クーポンの設定
第7回 ：レビューの承認制
第8回 ：おすすめの決済サービス
第9回 ：Stripeの導入
第10回 ：PayPalの導入
第11回 ：指定の商品のみを表示（当記事）
第12回 ：マイアカウントのカスタマイズ
第13回 ：カートボタンのリンク先を変える