ECサイトで商品にラッピングや、オリジナルメッセージ、印刷文字などを入れたい場合があります。WordPressのECサイト構築プラグインであるWooCommerceを利用している場合、有償の拡張機能「Product Add-Ons」を用いることで、様々な追加オプションの設定を追加していくことが可能です。
Product Add-Onsをインストールするまでは、以下の記事にて取り上げています。
[clink url="https://recross.co.jp/product-add-ons-1/"]
以下では、「印鑑」を実例に商品の追加をします。 |
・印鑑は内容を彫刻する必要があります。(Tシャツなどに印刷をする場合も同じ手法で行えます。) ・印鑑ケースをオプションで購入できるようにします。(プレゼント梱包なども同じ手法で行えます。) |
カスタマイズ可能な商品の作成
基本的な商品の設定方法については、基本的な商品の作成「物理的な商品」の場合とほとんど変わりませんので、以下の記事を参照してください。
[clink url="https://recross.co.jp/start_woocommerce02#1532-c2"]
「関連商品」「属性」「高度な設定」「Pinterest」については、今回は設定せずに進みます。
アドオンを作成する
アドオン作成画面では最初に「①名前」「②優先順位」「③商品カテゴリー」を設定します。
この部分は、詳細を設定するグループの設定のようなイメージを持つと分かりやすいかもしれません。
※詳細は次のステップのフィールドで設定していきます。
①名前 | アドオンを互いに区別するために使用されます。これは Web サイトには表示されません。デフォルトでは、自動的に入力された数値が入っています。 |
②優先順位 | 複数のアドオンがアクティブ化されている場合に表示する順序を指定します。優先度1のアドオンは、優先度10のアドオンよりも上位になります。 |
③商品カテゴリー | [すべての製品]に設定するか、アドオンを適用するカテゴリを選択します。
タグが無い状態ですと、アドオンが無効になります。 |
設定できたら、左下の「公開」を選択することで一度保存をすることが可能です。
フィールドを追加する
複数選択可 | ユーザーが選択できるオプションのリストを表示します。ドロップダウン、画像、またはラジオ ボタンとして表示します。 |
チェックボックス | 顧客がチェックを入れる/外すことができる1つまたは複数のチェックボックスを表示します。 |
短いテキスト | 5つの組み込みタイプがあります。これは、ユーザーが任意のテキストを入力できるテキスト フィールドを示しています。ただの文字、単なる数字、両方、 またはメールアドレスのみ。 |
長いテキスト | ユーザーが複数行のテキストを書き込むことができるテキスト フィールドを表示します (文字数制限は可能)。 |
ファイルのアップロード | ユーザーがファイルをアップロードできるようにします。 |
顧客定義の価格 | ユーザーが製品価格に追加される数値を入力できるフィールドが表示されます。 |
数量 | ユーザーが数値を入力できるスピナーを表示します。 |
見出し | アドオンの間に見出しを追加して、アドオンをセクションにグループ化します。 |
それでは1つずつを見ていきましょう。
複数選択可
色やサイズなど、事前に定義されたオプションのセットから1つ選択してもらうことが出来ます。
①表示形式…「ドロップダウン」「ラジオボタン」「画像」から好きなものを選択します。
※今回は「画像」にしていますが、画像にするとどんなものか図を付けることが出来ます。
②タイトル…オプションのタイトルを設定しましょう。
③タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式(テーマ依存)を任意に設定します。
④説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
⑤必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑥オプション・金額…表示形式で「画像」を選択した場合は、画像を入れられます。「オプションを入力」にはユーザーが分かりやすい内容を入れましょう。無料のオプションの場合は、金額欄は空欄にします。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
図では1つ(1行)のみの設定ですが、下部の「オプションを追加」で複数の設定をすることもできます。
チェックボックス
ギフト包装やアップグレードなど、ユーザーが1つまたは複数のオプションを選択することが出来ます。
③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤オプション・金額…「オプションを入力」にはユーザーが分かりやすい内容を入れましょう。無料のオプションの場合は、金額欄は空欄にします。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
図では2つ(2行)のみの設定ですが、下部の「オプションを追加」で複数の設定をすることもできます。
短いテキスト
印鑑であれば彫刻内容がここに当たりますが、Tシャツの文字や、短い1行のテキストを入力することが出来ます。
③タイトルの書式設定…タイトルが表示されたくない場合は、「非表示」を選択しましょう。表示する場合は書式(テーマ依存)を任意に設定します。
④説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
⑤必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑥文字の長さを制限…チェックをすると文字制限を設定したい場合の最小最大値の設定を行うことが出来ます。
⑦価格を調整…チェックをすると価格の設定を行うことが出来ます。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
長いテキスト
ギフトカードに入れたい文章や、住所・特別な指示や備考など、複数行に及ぶ想定がされるテキストの入力をしてもらうことが可能です。
③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤文字の長さを制限…チェックをすると文字制限を設定したい場合の最小最大値の設定を行うことが出来ます。
⑥価格を調整…チェックをすると価格の設定を行うことが出来ます。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
ファイルをアップロード
印刷をしたい内容の写真や、イラストレーター形式のデータを入稿してもらいたい場合などは、「ファイルをアップロード」のフィールドを設定することによって簡単に設定することが可能です。
③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤価格を調整…チェックをすると価格の設定を行うことが出来ます。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
Tシャツなどへの印刷で画像を添付してもらいたい場合や、印刷するデータのaiデータの添付入稿などは、この機能で行えます。 ※ファイル形式の指定が2023年5月現在できません。ウィルスなどの攻撃を防ぐことは添付されたデータの展開時にショップ側で行うしかありませんので、ご注意ください。 |
最大ファイルサイズについて |
アップロードしてもらうファイルサイズの制限のサイズ変更については、.htaccessファイル、wp-config.phpのファイルや、php.iniにて行ってください。 ※変更内容については、ワードプレス全体のアップロードファイル容量に影響されます。 変更方法はワードプレスのバックアップ等を作成するプラグイン「All-in-One WP Migration」の記事下部の変更方法と同じになりますので、以下の記事を参考にしてください。 |
顧客定義の価格
寄付やチップのように、ユーザーの任意の価格を設定でき、その価格が合計に追加されます。
※あまり利用することはないかもしれません。
③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤価格範囲を制限…チェックをすると価格の設定を行うことが出来ます。
数量
数量フィールド タイプを使用して、顧客が数量を調整できる製品アドオンを作成できます。
印鑑だとしたら、注文に対してケースの数を指定して、数量ベースで金額加算されてほしい場合。
ギフト商品だとしたら、紙袋の数を数量ベースで加算したい場合。
など
商品の注文数量とオプションの注文数量に相違が発生する場合に使いやすいオプション設定です。 |
③説明を追加…チェックをすると任意の説明を入れることが出来ます。html記載でのリンクも可能です。
④必須項目…チェックをするとオプションが選択されていないとカートへ入れることが出来なくなります。
⑤数量範囲を制限…チェックをすると数量に制限をかけることが出来ます。
⑥価格を調整…チェックをすると価格の設定を行うことが出来ます。
定額 | 注文数量に関係なく定額が加算されます。 |
数量ベース | 注文数量に応じて、オプション分も「同じ個数分×金額」が加算されます。 |
割合ベース | 親商品の合計価格の割合を加算します。オプション同士の割合計算はされません。 |
見出し
任意の場所に見出しの設定ができます。また、見出しを使用してアドオンをセクションに分割します。
設定が完了すると実際の商品画面では図のようにオプションが出現します。
参考図の場合は、
<p style="color: red;">○○○○○○○○○</p>
として、赤文字にしています。
※表示のされ方はテーマにより異なります。
アドオンのインポート・エクスポート
上記設定では、商品カテゴリーを「すべての商品」にしましたが、任意の商品のみに適用させる場合などは、カテゴリーを指定せず、アドオンのエクスポートを用いて、商品にインポートをします。
もしくは商品側で設定したものをエクスポートし、アドオンとして登録(インポート)することも可能です。
「商品」からエクスポートして、アドオンへ「インポート」することも可能です。
さいごに
必要なアドオンをすべて選択する前に小計を表示するかどうかは、アドオンの最初の画面で設定することが出来ます。
選択項目2つ以上の商品の場合途中過程の金額が出てこないことは、ユーザーにとって金額が不明瞭ととらわれやすいため、なるべく小計の見通し表示はオンにしておいた方良いと思います。
アドオンの追加は、アドオンの画面から「新規追加」します。
アドオンの編集は、アドオンの画面から対象のアドオンを選択し編集します。
アドオンへのフィールドの追加はいくつでも可能です。
アドオンのフィールド順序(オプションの順番)は自由に変更可能です。
WooCommerce公式拡張機能である「Product Add-Ons」は、様々なオプションを設定して、ショップを充実させていける良質なプラグインです。
※リクロスネットショップの実際の印鑑商品と、今回設定したオプションは異なります。予めご了承ください。 |