取扱説明書

WordPress / Contact Form 7 向け
商品マスター・商品選択・お問い合わせ連携プラグイン

Download(工事中)

Ver.1.0.32

1. ProductOrderについて

WordPress上で商品マスターを管理し、商品ページやお問い合わせフォームから商品を選択できるようにするプラグインです。
Contact Form 7と組み合わせることで、選択した商品・数量・金額をお問い合わせ内容として送信できます。

機能一覧

  • 商品ID・商品名・画像・税別価格・カテゴリを商品マスターで一元管理
  • 通常表示とシンプル表示の2種類の商品選択UI
  • 選択内容をブラウザ内に保持し、別ページへ移動しても引き継ぎ可能
  • Contact Form 7のメール本文へ選択商品を連携
  • 追加登録した商品の合計金額をフロント画面へ表示

2. 管理画面

インストール後[お問い合わせ]-[商品マスター]を開きます。
Contact Form 7が利用できない環境では、ProductOrderが独立した管理メニューとして表示されます。

3. 商品を登録する

商品マスター画面の「商品を追加」欄から以下の商品情報を登録します。

項目内容
商品ID商品を識別する固有ID。例：CHR-0001、STS-0024
商品名画面やメールに表示する商品名
画像WordPressのメディアライブラリから選択
価格（税別）商品の基準価格。税込価格は設定された税率から自動計算
カテゴリ商品を分類するためのカテゴリ名

4. 商品をページに表示する

4-1. 通常表示

商品画像・商品名・商品ID・価格・数量操作などを含む商品カードを表示します。表示する要素は管理画面の「通常表示 cart_addの設定」で調整できます。

4-2. シンプル表示

商品詳細ページなど、商品情報がすでにページ内にある場合に適した簡潔な追加ボタンです。管理画面で「ボタンの上に価格を表示」を有効にすると、税別価格と、設定に応じて税込価格をボタン上部に表示します。

ボタン文言はtext属性で自由に変更できます。商品名を含めたい場合は{name}を利用できます。

4-3. シンプル表示をCSSで調整する

シンプル表示には専用クラスが付いているため、テーマ側のCSSから細かく調整できます。

シンプル表示用Class一覧

.csic-simple-product
.csic-simple-product-prices
.csic-simple-product-price
.csic-simple-product-price-tax-exclusive
.csic-simple-product-price-tax-inclusive
.csic-simple-product-button

4-4. 商品をカテゴリごとにまとめる

product_accordionは囲み型ショートコードです。中にcart_addを並べると、開閉できるカテゴリ表示としてまとめられます。ショートコードで作成した場合、カテゴリの表示順はページ内にショートコードを記述した順番になります。

自動的な商品一覧表示では、カテゴリに個別の表示順設定はありません。ページごとに見せる順序を決めたい場合はproduct_accordionを使用してください。

7. 選択内容・合計を表示する

[product_cart_summary]

現在選択されている商品の件数、税別合計、税込合計、明細、リセット操作を表示します。画面下部へ固定する設定も利用できます。

  • 選択件数は丸い数字バッジで表示
  • 「明細表示」から選択商品の内訳を確認
  • 「リセット」で選択内容をすべて解除
  • 選択商品が0件の場合に合計表示を隠す設定が可能
  • ライト／ダークの2種類の表示テーマを選択可能

8. 価格・税設定

商品マスター画面下部の「価格・税設定」で税率を設定します。標準値は10%です。
「税込価格を併記する」を有効にすると、登録した税別価格から税込価格を自動計算して表示します。

100,800円(税別)〜
110,880円(税込)〜

商品マスターには税別価格を登録します。税込価格は表示時に計算され、1円単位で四捨五入されます。

9. Contact Form 7と連携する

9-1. フォーム側

Contact Form 7のフォーム内に次のhiddenフィールドを追加します。

[hidden product_products]

9-2. メール本文側

Contact Form 7の「メール」設定で、選択商品の明細を挿入したい位置に次のメールタグを記述します。

[product_products]

送信時には商品マスターを基準として商品情報と価格を再構築します。ブラウザ側に保持された価格をそのまま信用してメールへ送る仕組みではありません。

旧バージョンとの互換性のため[stage_products]も利用できますが、新規設定では[product_products]の使用を推奨します。

10. 選択内容の保存について

選択した商品はブラウザのlocalStorageに保存されます。そのため、同じサイト・同じブラウザであれば、商品ページから別の商品ページやお問い合わせページへ移動しても選択内容を引き継げます。

  • 別の端末や別のブラウザとは共有されません。
  • プライベートブラウズでは通常のブラウザと保存領域が異なる場合があります。
  • ブラウザのサイトデータを削除すると選択内容も消える場合があります。
  • 別タブですでに開いているページは、現在の仕様ではリアルタイム同期されません。再読み込みすると最新の選択内容を読み込みます。
  • Contact Form 7の送信成功後は選択内容がクリアされます。

11. 表示設定

商品マスター画面下部から、主に次の表示設定を変更できます。

  • 通常表示：画像、商品名、商品ID、税別価格の表示／非表示
  • シンプル表示：ボタン上部の価格表示／非表示
  • 合計表示を画面下に固定
  • 選択商品がない場合は合計表示を非表示
  • 合計表示テーマ：ライト／ダーク
  • 税込価格を併記する／しない
  • 税率

12. 主なショートコード一覧

ショートコード用途
[cart_add id="商品ID"]通常の商品カード
[cart_add_button id="商品ID"]シンプルな商品追加ボタン
[product_cart_summary]選択件数・合計・明細・リセット
[product_accordion title="カテゴリ名"] ... [/product_accordion]商品を開閉カテゴリにまとめる
[product_inquiry_products]商品カタログを自動表示する従来形式

14. 導入時の基本例

商品ページ側：

[cart_add_button id="CHR-0001" text="見積もり依頼に追加"]

お問い合わせページ側：

[product_cart_summary]

[[hidden product_products]]

Contact Form 7のメール本文側：

【選択商品】
[[product_products]]