Welcartにおける商品購入バリエーションの設定方法

同一価格のバリエーションは共通オプションとして基本設定欄で設定をしておきます。個別カスタマイズが可能です。

価格が変動するバリエーションはSKU価格を追加して対応します。

選択ボックスやボタンがあまり増えない様、価格が変動するバリエーションは商品登録自体を分けるべきです。

商品の豊富な購入バリエーションを実現する

ショッピングカートでは対象商品の豊富なバリエーションから、希望のものをスムーズに選択購入できる様にしなければなりません。

もちろんWelcartプラグインでも商品のバリエーション価格や種別の設定が可能です。

本記事ではSKU価格と商品オプションを駆使して、各商品バリエーションに対応する方法をご紹介します。

3つのバリエーション設定

商品バリエーションを一般的に大きく分けると、3つのバリエーションに分類されると思います。

同一価格帯タイプ

まずは同一価格の商品で、「色」や「サイズ」など様々な種類がある場合ですね。

例えば色は「赤」で、サイズが「Mサイズ」のシャツを買う時などがこれにあたります。

この場合どのような組み合わせを選んだとしても、商品価格自体は変わりません。

価格変動型タイプ

それに対しもう一つは、選択したバリエーションごとに価格が変わるタイプです。

例えば「5袋入り」「10袋入り」など、セット数のバリエーションです。

5袋入りよりも10袋入りの方が、当然金額は高くなりますよね。

選ぶものにより金額が変わる

個数以外にもグレードなどで、若干値段が変動する事もあるでしょう。

こういった場合は選択される種類によって、同じ商品でも値段が変動するよう設定しなければなりません。

ミックスタイプ

最後に3つ目が両者の併用タイプです。

「5個入り」「10個入り」の分類の中で、さらに「Aタイプ」「Bタイプ」などの種類を選ぶ場合がこれにあたります。

5個入りと10個入りとで値段が変わりますが、AタイプとBタイプのどちらを選んでも金額は変わりません。

Welcartで簡単に実現

Welcartではこのいずれも設定が可能となっています。

同一価格内でのバリエーションは「商品オプション」を設定し、価格が変動するバリエーションは「SKU価格」を追加して実現します。

同一価格タイプの設定方法

ではまず色やサイズなど、同一価格内で複数の種類を選ぶ場合の設定から紹介します。

共通オプションをあらかじめ登録しておく

流れとしてはまず「Welcart Shop」基本設定にある共通オプションで、頻繁につかうオプション名をあらかじめ登録しておきます。

その後、商品情報編集ページ内のオプション欄で登録した情報を読み込んで利用していきます。

共通オプションの登録

Welcart Shopの「基本設定」メニューを押して、「共通オプション」の欄へ進みます。

まずは一つ目のバリエーションから登録していきます。

新しい商品オプションの追加：というグレーのエリアがありますので、まずは右の「セレクト値」の欄へ項目を登録します。

1つ目のバリエーションが商品の色の場合

上記の様に改行を入れながら項目を縦に並べて入力します。

さらにオプション名の欄に「色」と入力します。

さらに必須項目にチェックをし、選択する項目が1つだけとなる「シングルセレクト」を選択しておきましょう。

商品オプションの追加

入れ終わったら「共通オプションの追加」ボタンを押しましょう。

そうすると上の黄色背景エリアに設定されます。

追加後に設定を変更した場合は、「更新」ボタンを必ず押しましょう。

セレクト値（2つ目）の登録

続けて2つ目のバリエーションを登録します。

先ほどと同じようにまずはグレーのエリアにある「セレクト値」の欄を登録します。

2つ目が「サイズ」の場合

上記の様に改行を入れながら項目を縦に並べて入力します。

オプション名には今回「サイズ」と入力します。

必須項目にチェックをし、選択する項目が1つだけとなる「シングルセレクト」を選択しておきます。

共通オプション（2つ目）の追加

入れ終わったら「共通オプションの追加」ボタンを押しましょう。

前回同様に黄色背景エリアに設定されます。

この調子で3つ目・4つ目と登録ができますので、使う予定のオプションを一通り登録しておきましょう。

※登録した共通オプションは削除ボタンで削除が可能です。

更新ボタンは忘れずに

あとから必須項目などにチェックを入れた場合は「更新」ボタンを必ず押しましょう。

複数オプションを入れ終わったら、このページ自体の「設定を更新」ボタンを忘れずに押して下さいね。

商品情報編集ページで共通オプションを読み込む

それでは商品のバリエーションとして、登録したオプションを呼び出して設定していきます。

商品マスターから任意の商品の「編集」ボタンを押しましょう。

商品情報編集ページ内の商品オプション欄へ進みます。

グレーエリアにあるオプションの選択ボックスを開けると、先ほど登録したオプション名が選べます。

色を選択して「オプションを適用する」ボタンを押すと、登録されて上の黄色背景のところに表示されます。

セレクト値やオプション名が追加変更できる

オプション名やセレクト値は、登録したあとに上から書き直す事ができます。

商品によって微妙な種類違いなどがあるでしょうから、その辺りは直接編集して対応する形です。

※基本設定の共通オプションデータはきちんと残っています。

変更の必要があれば更新して、更新ボタンを押しましょう。

2つ目のオプション追加

同じ手順で、グレーエリアの選択ボックスから次のオプション名を選択し「オプションを適用する」を押します。

上の様に2つのオプションが設定されます。

※登録したオプションは削除ボタンで削除できます。

ページ上のカートボタンの状態

ここで設定した分だけ、バリエーションを選ぶ選択ボックスがページ上に表示されます。

3つオプションを登録したら、3つの選択ボックスが並ぶ訳ですね。

それに対して「カートに入れる」ボタンは一つしか表示されません。

どのように選んでも値段は変わらないからです。

価格変動型タイプの設定方法

次は個数やグレードなど、種類ごとに値段自体が変わる場合の操作です。

今回は基本設定は使わず、商品情報編集ページの「SKU価格」を設定していきます。

Welcart Shopの「商品マスター」メニューから、対象となる商品の「編集」ボタンを押しましょう。

SKU価格の設定

新しいSKUの追加：というグレーの欄があるので、まずはSKUコードと通常価格・売買価格・在庫などを入れます。

さらにSKUコードの下にある「SKU表示名」フィールドに、今回の種別名称を入力します。

例えば個数なら「5袋入り」やグレードなら「スタンダード」などの名称を入れましょう。

SKU価格の追加

入れ終わったら「SKUを追加する」ボタンを押しましょう。

そうすると上の様に黄色背景エリアに設定されます。

SKU価格（2つ目）の設定

続けて2つ目のバリエーションを登録します。

先ほどと同様の形で「新しいSKUの追加」グレーのエリアにさっきとは違うSKUコード、通常価格・売買価格・在庫を入れましょう。

SKUコードの下にあるSKU表示名フィールドに、例えば個数なら「10袋入り」やグレードなら「プレミアム」などの名称を入れます。

SKU価格（2回目）の追加

入れ終わったら「SKUを追加する」ボタンを押すと、上の黄色背景エリアに追加されます。

これを繰り返す事で、各バリエーションとそれに応じた値段が個別設定されます。

※登録したSKU価格は削除ボタンで削除が可能です。

更新ボタンは忘れずに

SKU価格の中身を変更したら「更新」ボタンを必ず押しましょう。

複数の価格を入れ終わったら、この商品情報編集画面自体の「更新」ボタンを忘れずに押しましょう。

ページ上のカートボタンの状態

ここで設定した段数分だけ、「SKU表示名」と共に専用の購入ボタンがそれぞれ表示されます。

例えばSKU価格を3つ入れていた場合は、名称が3つと価格が3つ、そして購入ボタンが3つ出てくる訳です。

ユーザーに自分の購入したいタイプ専用の購入ボタンを押してもらう事になります。

2つの併用パターン

ここまで説明した2つのパターンは、併用する事が可能です。

例えば「Aタイプ」「Bタイプ」で価格は変わりますが、AタイプBタイプ共に色が3種類あって、どの色を選んでもそのタイプの値段が変わらない場合などです。

商品オプションとSKU価格をそれぞれ追加

これは商品オプションで種類を1つ以上入れつつ、さらにSKU価格を2つ以上設定する事で実現できます。

これまで説明した方法を一緒におこなうだけです。

2つのオプションと2つの価格帯が表示された状態

ページ上ではSKU表示名と購入ボタンが複数表示され、それぞれに色を選択するボックスが付随してきます。

バリエーションで処理するか商品登録自体で分けるか

基本的に商品オプションの選択ボックスが何個あっても、1つの購入ボタンに紐づけられます。

それに対しSKU価格を増やすと、その数だけ購入ボタンが増えてしまいます。

あまり多くすると複雑になる

仮にSKU価格が3つあって商品オプションが3種あるとしましょう。

そうすると購入ボタンは3個、商品オプションボックスは3×3で9個表示される事になりますね。

これをユーザーが見たら、何をどうすればよいのか迷ってしまい離脱される可能性もあります。

価格が変わるバリエーションは商品登録自体を分ける

例えば5袋入りと10袋入りはそれぞれ別々の商品として登録するのも一つの手です。

そうすればあとは商品オプションの選択ボックスから選ぶだけで、購入ボタンは1つで済みます。

ユーザーに親切な設計を心がけるべきですね。

一押し人気コーナー紹介