【WooCommerce設定ガイド】 ショートコードで商品リストを表示しよう

WooCommerce（ウーコマース）では、画像付きの商品リストを表示させるショートコードが標準で用意されています。今回はそのショートコードについて、よく使いそうなものを中心に紹介・解説します。ショップのトップページのデザインにも使えるので覚えておくと便利です。

 

ショートコードとは？

簡単に言うと、”少しのパラメータ設定で（自分でプログラムすることなく）様々な便利機能を呼び出すことができる、おまじないのようなもの”です。これはWordPressの機能です。WordPressの固定ページや投稿などの編集可能な場所にショートコードを貼り付けるだけで、記事リストや画像ギャラリーを表示させることができます。

WordPressの機能「ショートコード」について知らない方はこちらの記事が参考になると思います。

WordPressのショートコードとは？（Hivelocity）

 

WooCommerceのショートコードの使い方

ここではWooCommerceで用意されているショートコードの中で商品表示に関連するものについて説明します。

 

Recent Products：最近追加した商品

[recent_products per_page="12" columns="4"]

登録が新しい順に商品リストを表示します。

［表示例］

※次項以降については、基本的に表示例は載せていません。（商品リストの並び順や絞り込み条件が変わるだけでデザインはすべて同じです。）

 

［パラメータ］

※使用例の値はすべてデフォルト値です。パラメータを指定しない場合はこの値が使用されます。

per_page ： 商品の表示数を指定します。使用例：per_page=”12″

※per_pageという名称ですが、これは単に表示数を指定することのみに使用されます。WooCommerceのショートコードはページネーションに対応していないので、どんなに表示数が多くてもショートコードを設置したページ内にすべて表示されます。

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”date”

［orderbyに使用できる値］

date（登録日）、title（商品名）、modified（更新日）、rand（ランダム）などが使用可能です。こちらで使用可能な値について詳しく解説されています。→ 関数リファレンス/WP Query（WordPress Codex 日本語版）

order ： ソート方法（昇順/降順）を指定します。使用例：order=”desc”

［orderに使用できる値］

desc：降順

asc：昇順（逆の順番になります。この場合、商品登録が古い順になります。）

 

Featured Products：おすすめ商品

[featured_products per_page="12" columns="4"]

おすすめ商品のリストを表示します。おすすめ商品は、WordPress管理画面>「商品」で任意の商品に星マークを付ける（白抜きの星マークをクリックして星マークの内側に色が着いた状態にする）ことで設定できます。

 

［パラメータ］

Recent Productsと同じです。

 

Sale Products：セール中の商品

[sale_products per_page="12"]

セール中の商品のリストを表示します。

 

［パラメータ］

※パラメータの種類はRecent Productsと同じですが、orderby、orderのデフォルト値が異なります。

per_page ： 商品の表示数を指定します。使用例：per_page=”12″

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

 

Best-Selling Products：売れ筋商品

[best_selling_products per_page="12"]

売上個数順に商品をリスト表示します。（WooCommerce内の受注データを元にしています。）

 

［パラメータ］

per_page、columnsのみです。説明・デフォルト値はRecent Productsと同じです。

 

Top Rated Products：レビュー評価の高い商品

[top_rated_products per_page="12"]

レビューの平均評価が高い順に商品をリスト表示します。

 

［パラメータ］

※パラメータの種類はRecent Productsと同じですが、orderby、orderのデフォルト値が異なります。

per_page ： 商品の表示数を指定します。使用例：per_page=”12″

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

 

Product：商品（一つ）

[product id="99"]
[product sku="FOO"]

Post ID又はSKUを指定して商品を表示します。

［Post IDの調べ方］

2つの調べ方があります。

1. WordPress管理画面>「商品」で一覧表示されている商品にマウスポインタを合わせると、ID：○○○と表示されます。この○○○がPost IDに該当します。
2. 商品登録（編集）画面を表示している時にWEBブラウザのアドレスバーに表示されるURLの末尾に、post=○○○という部分があります。この○○○がPost IDに該当します。

［SKUの調べ方］

商品登録（編集）画面の「商品データ」欄の「一般」タブにSKUの項目があります。

 

［パラメータ］

id ： Post IDを指定します。

sku ： SKUを指定します。

 

Products：商品（複数）

[products ids="1, 2, 3, 4, 5"]
[products skus="foo, bar, baz" orderby="date" order="desc"]

Post ID又はSKUを複数指定して、商品リストを表示します。

 

［パラメータ］

※一部パラメータの種類はRecent Productsと同じですが、orderby、orderのデフォルト値が異なります。

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

ids ：Post IDを指定します。（カンマ区切りで複数指定可。）

skus ： skuを指定します。（カンマ区切りで複数指定可。）

 

Product Category：商品カテゴリー（一つ）に属する商品

[product_category category="appliances"]

指定した一つの商品カテゴリーに属する商品のリストを表示します。

 

［パラメータ］

※一部パラメータの種類はRecent Productsと同じですが、orderby、orderのデフォルト値が異なります。

per_page ： 商品の表示数を指定します。使用例：per_page=”12″

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

category ： 商品カテゴリーをスラッグで指定します。使用例：category=””

［スラッグの調べ方］

WordPress管理画面>「商品」>「カテゴリー」で右側に登録済みの商品カテゴリーがリスト表示されます。このリストの「スラッグ」の値をcategoryの指定に使用してください。

※categoryを指定しない場合、該当するカテゴリーが存在しない場合、商品は表示されません。

商品カテゴリーの登録方法についてはこちらの記事で解説しています→　『【WooCommerce設定ガイド】 商品登録の前準備 – 商品カテゴリー等の登録方法』

 

Product Attribute：指定した属性値を持つ商品

[product_attribute attribute='color' filter='black']

属性名とその値（属性に定義済みの値）を指定して商品のリストを表示します。

 

［パラメータ］

※一部パラメータの種類はRecent Productsと同じですが、orderby、orderのデフォルト値が異なります。

per_page ： 商品の表示数を指定します。使用例：per_page=”12″

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

attribute ： 属性名を指定します。使用例：attribute=”color”

filter ： attributeで指定した属性に定義済みの値を指定します。使用例：filter=”black”

属性の登録方法についてはこちらの記事で解説しています→　『【WooCommerce設定ガイド】 商品カテゴリー等の登録方法』

 

商品カテゴリーのリスト表示

Product Categories：商品カテゴリー（複数）のリスト

[product_categories number="12" parent="0"]

指定した複数の商品カテゴリー（商品カテゴリーアーカイブページへのリンク）を表示します。（商品リストの表示ではありません。）親商品カテゴリーを指定することで、それに紐付くすべての子商品カテゴリーを表示対象にすることもできます。

［表示例］

※商品カテゴリーにサムネイルが設定されている場合、四角の部分は設定した画像が表示されます。
※（）内の数字は、その商品カテゴリーに属する商品の数を表しています。

 

［パラメータ］

number ： 1ページあたりの表示数を指定します。使用例：number=”null”

orderby ： 商品リストのソートキーを指定します。使用例：orderby=”title”

order ： ソート方法（昇順/降順）を指定します。使用例：order=”asc”

columns ： 1行あたりの表示数を指定します。使用例：columns=”4″

hide_empty ： 商品カテゴリーに属する商品が一つも存在しない場合は、そのカテゴリーを表示しないようにする設定です。（”1″で有効、”0″で無効になります。）使用例：hide_empty=”1″

parent ： 親商品カテゴリーを指定します。使用例：parent=””

※ここで指定した商品カテゴリーに紐付くすべての子商品カテゴリーが表示対象になります。
※parent=”0″を指定すると、トップレベルのカテゴリーのみを表示対象にします。

ids ： 商品カテゴリーをIDで指定します。（カンマ区切りで複数指定可能）使用例：ids=””

［商品カテゴリーのIDの調べ方］

商品カテゴリーの編集画面を表示している時にWEBブラウザのアドレスバーに表示されるURLの末尾に、tag_ID=○○○という部分があります。この○○○が商品カテゴリーのIDに該当します。

 

 

 

本記事はこちらの記事の一部（商品リスト表示に関するもの）をピックアップして翻訳・解説しています。→ Shortcodes included with WooCommerce（WooThemes）

WooCommerceのショートコードの説明は以上です。次は「WooCommerce専用ウィジェットの設定」です。

 

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