WooCommerceでユーザーがカスタマイズできる商品を作成してみる②

ワードプレスの管理画面から「商品＞新規追加」で商品を作成していきます。

プラグインを有効化した直後、上部に図のようなメッセージが出ますので「アドオンを作成」を選択します。

または、

「ワードプレスの管理画面＞商品＞アドオン」でも同じ画面へ行くことが出来ます。

「新規作成」を選択します。

アドオン作成画面では最初に「①名前」「②優先順位」「③商品カテゴリー」を設定します。

この部分は、詳細を設定するグループの設定のようなイメージを持つと分かりやすいかもしれません。
※詳細は次のステップのフィールドで設定していきます。

詳細項目を設定していくため「フィールドを追加」を選択します。

フィールドが追加されると空のアドオンが挿入されます。

最初に「種類」を設定します。

①表示形式…「ドロップダウン」「ラジオボタン」「画像」から好きなものを選択します。
※今回は「画像」にしていますが、画像にするとどんなものか図を付けることが出来ます。
②タイトル…オプションのタイトルを設定しましょう。

③タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。
④説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
⑤必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑥オプション・金額…表示形式で「画像」を選択した場合は、画像を入れられます。「オプションを入力」にはユーザーが分かりやすい内容を入れましょう。無料のオプションの場合は、金額欄は空欄にします。

図では1つ（1行）のみの設定ですが、下部の「オプションを追加」で複数の設定をすることもできます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

チェックボックス

ギフト包装やアップグレードなど、ユーザーが1つまたは複数のオプションを選択することが出来ます。

①タイトル…オプションのタイトルを設定しましょう。
②タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。

③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤オプション・金額…「オプションを入力」にはユーザーが分かりやすい内容を入れましょう。無料のオプションの場合は、金額欄は空欄にします。

図では2つ（2行）のみの設定ですが、下部の「オプションを追加」で複数の設定をすることもできます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

短いテキスト

印鑑であれば彫刻内容がここに当たりますが、Tシャツの文字や、短い1行のテキストを入力することが出来ます。

①制限…「すべてのテキスト形式」「文字のみ」「数字のみ」「文字と数字のみ」「メールアドレスのみ」から任意のものを選択しましょう。
②タイトル…オプションのタイトルを設定しましょう。

③タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。
④説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
⑤必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑥文字の長さを制限…チェックをすると文字制限を設定したい場合の最小最大値の設定を行うことが出来ます。
⑦価格を調整…チェックをすると価格の設定を行うことが出来ます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

長いテキスト

ギフトカードに入れたい文章や、住所・特別な指示や備考など、複数行に及ぶ想定がされるテキストの入力をしてもらうことが可能です。

①タイトル…オプションのタイトルを設定しましょう。
②タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。

③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤文字の長さを制限…チェックをすると文字制限を設定したい場合の最小最大値の設定を行うことが出来ます。
⑥価格を調整…チェックをすると価格の設定を行うことが出来ます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

ファイルをアップロード

印刷をしたい内容の写真や、イラストレーター形式のデータを入稿してもらいたい場合などは、「ファイルをアップロード」のフィールドを設定することによって簡単に設定することが可能です。

①タイトル…オプションのタイトルを設定しましょう。
②タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。

③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤価格を調整…チェックをすると価格の設定を行うことが出来ます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

顧客定義の価格

寄付やチップのように、ユーザーの任意の価格を設定でき、その価格が合計に追加されます。
※あまり利用することはないかもしれません。

①タイトル…オプションのタイトルを設定しましょう。
②タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。

③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤価格範囲を制限…チェックをすると価格の設定を行うことが出来ます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

数量

数量フィールド タイプを使用して、顧客が数量を調整できる製品アドオンを作成できます。
印鑑だとしたら、注文に対してケースの数を指定して、数量ベースで金額加算されてほしい場合。
ギフト商品だとしたら、紙袋の数を数量ベースで加算したい場合。
など

①タイトル…オプションのタイトルを設定しましょう。
②タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式（テーマ依存）を任意に設定します。

③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤数量範囲を制限…チェックをすると数量に制限をかけることが出来ます。
⑥価格を調整…チェックをすると価格の設定を行うことが出来ます。

設定が完了すると実際の商品画面では図のようにオプションが出現します。
※表示のされ方はテーマにより異なります。

見出し

任意の場所に見出しの設定ができます。また、見出しを使用してアドオンをセクションに分割します。

①タイトル…オプションのタイトルを設定しましょう。
②説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。

設定が完了すると実際の商品画面では図のようにオプションが出現します。

参考図の場合は、
<p style="color: red;">○○○○○○○○○</p>
として、赤文字にしています。

※表示のされ方はテーマにより異なります。

アドオンのインポート・エクスポート

上記設定では、商品カテゴリーを「すべての商品」にしましたが、任意の商品のみに適用させる場合などは、カテゴリーを指定せず、アドオンのエクスポートを用いて、商品にインポートをします。

もしくは商品側で設定したものをエクスポートし、アドオンとして登録（インポート）することも可能です。

アドオンからエクスポートする場合は、「エクスポート」を選択し、出てくるコードを商品の「インポート」へ貼り付けます。

商品へインポートする場合は、「商品データ」の「アドオン」から「インポート」を選択し、先程エクスポートしたコードを貼り付けます。

そのままの設定ですとオプションを選択中は、途中過程・合計額が表示されません。

「ワードプレスの管理画面＞商品＞アドオン」の最初に出てくるアドオンのリストの画面の下部「小計の見通しを表示」にチェックをすると

図の様に必須項目の選択が未了であっても途中過程での金額が表示されます。

選択項目2つ以上の商品の場合途中過程の金額が出てこないことは、ユーザーにとって金額が不明瞭ととらわれやすいため、なるべく小計の見通し表示はオンにしておいた方良いと思います。

アドオンの追加は、アドオンの画面から「新規追加」します。
アドオンの編集は、アドオンの画面から対象のアドオンを選択し編集します。
アドオンへのフィールドの追加はいくつでも可能です。
アドオンのフィールド順序（オプションの順番）は自由に変更可能です。

WooCommerce公式拡張機能である「Product Add-Ons」は、様々なオプションを設定して、ショップを充実させていける良質なプラグインです。