商品毎に個別のショートメッセージを表示できる WooCommerceプラグイン『WooCommerce Product Subtitle』

記事公開：2016.10.9 最終更新：2016.11.24 1,154 0

今回は商品毎に個別のショートメッセージを設定・表示できるWooCommerce（ウーコマース）プラグイン『WooCommerce Product Subtitle』を紹介します。商品一覧や商品詳細ページで「女優の○○さん愛用モデル」や「当店で人気NO.1」などのメッセージを簡単に表示させることができるようになります。

このプラグインを使用して商品の特徴やセールスポイントを目に付きやすいところに表示することで、商品に興味を持ってもらいやすくなり、各商品詳細ページのPV（閲覧数）の向上やCVR（注文率）の向上が期待できます。

1 WooCommerce Product Subtitleとは
- 1.1 表示例
- 1.2 インストール方法
2 WooCommerce Product Subtitleの使い方
3 ショートメッセージのデザインについて
- 3.1 表示されるページによってデザインを分ける場合
4 ショートコードを利用してメッセージを任意の場所に表示する方法

WooCommerce Product Subtitleとは

WordPress公式プラグインページはこちら → https://ja.wordpress.org/plugins/wc-product-subtitle/

このプラグインは商品毎に設定したショートメッセージを商品一覧ページや商品詳細ページで表示させることができるプラグインです。また、表示方法にはいくつかのオプションが用意されており、表示位置や出力するhtmlタグの種類を指定することができます。

表示例

商品一覧ページ（商品カテゴリーアーカイブ）

※WooCommerce標準機能の商品をリスト表示するショートコードでも、このショートメッセージは表示されます。

Woocommerce Product Subtitle ショートメッセージ表示例：商品一覧ページ

商品詳細ページ

インストール方法

WordPressの管理画面>「プラグイン」>「新規追加」>”WooCommerce Product Subtitle”で検索するとこのプラグインがが表示されますので、「今すぐインストール」を押します。インストール完了後、有効化します。

WooCommerce Product Subtitleの使い方

WooCommerce Product Subtitleの設定画面には、WordPress管理画面から「WooCommerce」>「WooCommerce Product Subtitle」と進みます。

設定画面：メニュー

設定画面に入ると「Cart Page | Checkout Page | Order View Page | Shop Page | Single Product」とメニューが並んでいます。それぞれ表示先ページごとに設定できるようになっています。いずれも設定項目は同じです。

Cart Page：カートページ
Checkout Page：支払いページ
Order View Page：注文完了ページ（thank youページ）、マイアカウントページ内の「受注」タブ
Shop Page：商品一覧ページ、商品カテゴリーアーカイブ
Single Product：商品詳細ページ

設定画面：項目

どのメニュー（表示先ページ）でも設定項目は同じです。（項目の選択肢は一部異なります。）

Title Position：ショートメッセージの表示位置を選択します。ページ内の「商品タイトル」、「価格」など基準とする表示位置と、その「前（before）」、「後（after）」を選択します。
Title Element Type：ショートメッセージを出力する際のhtmlタグの種類を選択します。

表示位置について

ここではShop Page 、Single Productについて、ショートメッセージの表示位置の解説をします。

Shop Page

Shop Pageメニューの「Title Position」の選択肢

Disable / Shortcode：表示なし / ショートコードで任意の場所に表示
Product Title：商品タイトル
Product Rating：商品の評価（レビュー）
Product Price：商品価格

商品品一覧ページでのそれぞれの位置を以下に示します。（使用テーマ：storefront）

WooCommerce Product Subtitle 商品一覧ページでの表示の基準位置

上記に示した基準となる表示位置の「前（before）」か「後（after）」を選択してショートメッセージの表示位置を確定します。

Single Product

Shop Pageメニューの「Title Position」の選択肢

Disable / Shortcode：表示なし / ショートコードで任意の場所に表示
Product Title：商品タイトル
Product Rating：商品の評価（レビュー）
Product Price：商品価格
Product Excerpt：商品説明
Product Add to cart：「カートに入れる」ボタン
Product Meta：商品のメタ情報（商品コード[SKU]、商品カテゴリー、商品タグなどが表示される部分）

商品品一覧ページでのそれぞれの位置を以下に示します。（使用テーマ：storefront）

WooCommerce Product Subtitle 商品詳細ページでの表示の基準位置

上記に示した基準となる表示位置の「前（before）」か「後（after）」を選択してショートメッセージの表示位置を確定します。

商品毎のショートメッセージの設定

各商品の設定画面の「Subtitle」の項目で任意のメッセージを登録します。

ショートメッセージのデザインについて

ショートメッセージはプラグインの設定画面の「Title Element Type」オプションで指定したhtmlタグにcssクラス：product-subtitle が設定された状態で出力されますので、このcssクラスのスタイルを任意に設定することでデザインを変更することができます。

.product-subtitle {
/*
ショートメッセージのスタイル
*/
}

表示されるページによってデザインを分ける場合

どのページに出力される場合でも同じcssクラスが設定されますので、表示されるページによってデザインを変えたい場合は適切にcssセレクタを設定する必要があります。

商品一覧ページ、商品カテゴリーアーカイブでのみ適用されるcssセレクタ

.woocommerce.post-type-archive-product .product-subtitle {
/*
 商品一覧ページ用のスタイル
*/
}

.woocommerce.tax-product_cat .product-subtitle {
/*
 商品カテゴリーアーカイブ用のスタイル
*/
}

商品詳細ページでのみ適用されるcssセレクタ

.woocommerce.single-product .product-subtitle {
/*
 商品詳細ページ用のスタイル
*/
}

ショートコードを利用してメッセージを任意の場所に表示する方法

このプラグインは管理画面で表示位置を指定する以外に、ショートコードを利用して表示場所を指定することができます。

商品ページや固定ページ、投稿の編集画面のエディタ内で以下のコードを使用することで、その位置にショートメッセージを表示させることができます。

[wc-ps id="999" tag="p"]

id:Post ID（商品ID）を指定します。ここで指定した商品IDを持つ商品の「subtitle」の項目に登録された内容が出力されます。 ※

tag：ショートメッセージを出力するhtmlタグを指定します。（使用可能な値：p, amall, span, h1, h2, h3, h4, h5, h6）

※商品IDの調べ方

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

このプラグインの説明は以上になります。

商品の特徴や魅力を端的に分かりやすく表示して、お客様に商品への興味を抱かせて売上UPを目指しましょう！