WooCommerceでは用意されているショートコードを使うことで、セール中の商品や売れ筋の商品、個別で指定した商品のみを表示するページを作成できます。表示する順番なども自在に指定できるので、商品をさまざまな角度から訴求可能です。
そこで今回は、WooCommerceの商品一覧ページをショートコードで作成する方法を解説いたします。
目次
ショートコードでつくれる商品一覧ページとは
例えば、以下のような商品一覧ページを簡単に作成できます。
- セール中の商品一覧
- おすすめの商品一覧
- 売れ筋の商品一覧
- レビューの高い順の商品一覧
- 表示順やカテゴリー、個別に指定した商品の一覧
WooCommerceにあらかじめ用意されているショートコードをページにコピペするだけです。
特に商品数が多いネットショップでは、すべての商品を効率的にアピールすることが難しくなるので、指定した商品のみを表示できる一覧ページが貢献します。
商品一覧ページのショートコード一覧
WooCommerceで使える商品一覧ページ向けのショートコードをこちらにまとめました。表示したい商品ごとにショートコードをコピペしてご活用ください。
- セール中の商品一覧
- おすすめの商品一覧
- 売れ筋の商品一覧
- レビューの高い順の商品一覧
- すべての商品の一覧（後述の属性と組み合わせて活用）
セール中の商品一覧
[sale_products]セール中の商品一覧を表示するショートコードです。値下げしている商品などを1箇所にまとめて訴求する際にご活用いただけます。
おすすめの商品一覧
[featured_products]おすすめの商品のみを一覧表示するショートコードです。管理画面から個別に指定した商品のみを表示できます。WooCommerceの商品管理画面の下記箇所で★となっている商品のみが表示される仕様です。
ページ作成後でも、商品一覧から★をクリックすれば自動で追加されます。
・作成したページの商品をワンクリックで変更したいとき
売れ筋の商品一覧
[best_selling_products]商品を販売個数の多い順で一覧表示するショートコードです。簡易的な商品のランキングページとしてご活用いただけます。
レビュー高い順の商品一覧
[top_rated_products]商品をレビュー評価が高い順に表示するショートコードです。ユーザーの評価が高い順に商品が表示されるので、純粋な販売個数とはまた異なる角度から商品を訴求できます。購入を検討している方にとって、他のユーザーの評価は何より信ぴょう性の高い情報です。
WooCommerceでは商品レビューを承認制にすることもできます。スパム防止のために設定しておくのがおすすめです。
本格派なネットショップがつくれるWordPressプラグイン「WooCommerce」ですが、商品のレビューをお客さんに書いていただく機能があります。 レビュー機能自体はワンクリックで有効化可能で、下記記事内の「高度な設定」でご紹介しています。 今回はそんなWooCommerceの商品レ...
すべての商品一覧
[products]すべての商品一覧を表示するショートコードです。WooCommerce有効化時に生成されるショップページ（例：https://example.com/shop/）と同じようにすべての商品が表示されます。
ですので、基本的には後述する並び順やカテゴリーを指定する属性と組み合わせて利用します。
並び順やカテゴリーを指定する属性一覧
WooCommerceには、表示順や商品カテゴリーなどを指定する属性も用意されており、先述のショートコードと組み合わせて使えます。指定できる便利な属性は以下の通りです。
並び順
並び順を指定したい場合は、次の属性を使います。
例えば、次のような値を利用可能です。
- 日付順（公開された順）：date
- 読み込むたびにランダム：rand
- 販売個数順：popularity
▼セール中の商品をランダムに表示する例
[sale_products orderby="rand"]
カテゴリー
表示する商品のカテゴリーを指定したい場合は、次の属性を使います。
▼「アクセサリー」カテゴリーに属するおすすめの商品を表示する例
[featured_products category="accessory"]
表示する商品数
表示する商品数も次の属性を用いて指定可能です。
▼商品をレビューの高い順で10個表示する例
[top_rated_products limit="10"]
商品ID
商品を個別に指定して表示するショートコードです。セールやおすすめ（★）などに属していない商品もIDで指定して表示可能です。
商品のIDは、管理画面の商品一覧で商品にカーソルを合わせると確認できます。
▼全商品の中からID115、120、125の商品のみを表示する例
[products ids="115,120,125"]
※商品IDが複数の場合は「,」で区切ります。
まとめ：組み合わせ次第で幅広い見せ方が可能
WooCommerceで使えるショートコードと属性を使いこなすことで、幅広い見せ方で商品を訴求できます。複数組み合わせると、例えばこのような見せ方も可能です。
「アクセサリーカテゴリーに属するおすすめの商品を販売個数順で10個表示する」
[featured_products category="accessory" limit="10" orderby="popularity"]
※複数の属性の間は半角スペースをあけます。
具体的に条件を指定できるので、商品数が多い場合に効果的にご活用いただけます。ぜひショートコードと属性を組み合わせて、商品一覧ページをカスタマイズしてみてください。
- WordPressテーマ「EGO.」：アパレル・セレクトショップ・インテリア・家具・スポーツ用品
- WordPressテーマ「Ankle」：雑貨・アクセサリー・ギフト
- WordPressテーマ「common」：デジタルコンテンツ（写真・イラスト・セミナー・レッスン動画など）
- WordPressテーマ「BASARA」：和菓子・日本酒・和食器・呉服・和楽器・日本画・書道作品
- WordPressテーマ「RIKYU」：物販（あらゆる業種）
第1回 ：WooCommerceとは？
第2回 ：インストール
第3回 ：基本設定
第4回 ：商品登録
第5回 ：デジタルコンテンツ販売
第6回 ：クーポンの設定
第7回 ：レビューの承認制
第8回 ：おすすめの決済サービス
第9回 ：Stripeの導入
第10回 ：PayPalの導入
第11回 ：指定の商品のみを表示（当記事）
第12回 ：マイアカウントのカスタマイズ
第13回 ：カートボタンのリンク先を変える
コメント