woocommerceのバリエーションのある商品設定。オプションで色やサイズなどを選べる様にしよう

ECサイト無料開業

woocommerceでは商品毎に例えば「カラー」や「サイズ」を選択し、カートへ入れることができるように設定が可能です。

いわゆるオプションですね。これを設定することにより、靴の商品ページで「赤」の「25.0cm」という指定が可能となります。

「赤」で「25.0cm」「25.5cm」・・・・・、「青」で「25.0cm」「25.5cm」・・・・・をそれぞれ全て別の商品として登録してしまうと、ズラ~~~っと同じ商品が並んでしまうことになりますよね。
超ウザいお店になるので、直ぐにお客様が離脱してしまう可能性が高くなるでしょう。(実際たまにそういうサイトもありますが・・・ww)

 

ゴショクレッド
ゴショクレッド

そもそも赤だけでいいだろう。なぜなら圧倒的に赤がカッコいいからだ!

WPマン
Webマン

いやいや(汗)選ぶのはお客さんなんで・・

ゴショクレッド
ゴショクレッド

フンっ!オプションなどそもそも不要だっ!

ゴショクグリーン
ゴショクグリーン

スミマセン!責任もって連れて帰ります。レッド!さぁ!行くよっ!!・・さようなら。お騒がせしました~~(レッド:ブツブツ)

WPマン
Webマン

レッド自己中だわ~。グリーンは大変そうだな~

人の好みはそれぞれですよね・・・(汗)

さて、結構な手間ではありますが、売れるECサイトになる様、労力は惜しまずに設定していきましょう。

商品属性の設定

先ずは「商品」の「属性」の設定が必要です。

ダッシュボード「商品」の中の「属性」をクリックします。

すると属性を追加する画面が表示されます。

「名前」に例えば“カラー”と入力し、「スラッグ」は“1”として「属性を追加」をクリックします。これで「カラー」という属性が追加されました。

属性を追加すると右の欄に表示されます。ここではもう一つの属性として「サイズ」も追加しました(スラッグは“2”)。

「条件」の欄にそれぞれ「条件設定」が表示されるので、それをクリックします。

 

「カラー」属性の「条件設定」を開いた画面です。ここでカラーの種類を一つ一つ登録していきます。

「名前」に“レッド”・“ブルー”・“ブラウン”と登録します。「スラッグ」はそれぞれ“1”・“2”・“3”としました。

 

同じく「サイズ」属性の「条件設定」を開いて販売する靴のサイズを全て登録します。

「スラッグ」は表示の順番として利用します。ここでは小さいサイズから“1”・“2”・“3”・・・と設定しました。

これで商品の属性の設定は終わりです。

各商品の「バリエーションのある商品」設定

では、各商品の編集画面でバリエーションを設定していきましょう。

先ず、当該商品の編集画面を開きます。

画面下の「商品データ」の「属性」をクリックし、プルダウンメニューから「バリエーションのある商品」を選択します。

 

プルダウンメニューの「カスタム商品属性」で「カラー」を選択し、右横の「追加」をクリックします。

 

すると「カラー」の設定画面が表示されるので、「バリエーションのために使用」だけにチェックを入れます。

また、「すべて選択」をクリックすると先程、商品属性で設定した3色の色が値として表示されます。

もし不要な色がある場合は各値の「×」をクリックして削除した後、「属性を保存」をクリックします。

 

「サイズ」も同様に設定をし、「属性を保存」をクリックして保存します。

 

次はいよいよバリエーションの作成です。左の「バリエーション」をクリックすると「追加バリエーション」というプルダウンメニューが表示されるので、「すべての属性からバリエーションを作る」を選択し、右横の「表示」をクリックします。

 

画面上部にウインドウ表示されるので「OK」をクリックします。

 

これですべてのオプションの組み合わせでバリエーションが作成されました。(カラー3種×サイズ6種=18バリエーション)

尚、各バリエーションの価格を設定する必要があります。「追加バリエーション」と表示されているプルダウンメニューをクリックしてください。

 

バリエーションすべてに同じ条件を適用させる設定項目が表示されるので、「標準価格を設定」をクリックした後、右横の「表示」をクリックします。

 

値の入力ウインドウが表示されるので販売価格を入力して「OK」をクリックします。

これですべてのバリエーションの価格が“6,500円”で設定されました。

尚、バリエーション毎に価格を変えたい場合については、「♯○○○」と表示されている各バリエーションの詳細設定画面内で各々に設定してください。

各バリエーションのどこでもいいのでクリックをすると上の詳細設定画面が表示されます。

通常価格以外にもバリエーション毎に設定できる項目があるので適宜設定してください。

商品ページの確認

商品ページを見ると「カラー」と「サイズ」のプルダウンメニューが表示され、オプションを選択してお買い物ができるようになりました。

 

カートでは商品名の後ろに選択したオプション名が表示されます。

このように、woocommerceでは用意された機能を有効に使うことでユーザービリティーの向上を図ることができます。海外製プラグインのため、設定が難しい面がネックではありますが、当サイトでは引き続き、woocommerceの使い方について分かり易く説明していきたいと思います。

今回はここまで。

ゴショクピンク
ゴショクピンク

地球の平和と皆さんのWEBビジネスの成功をお祈りしています。お疲れさまでした。

コメント

タイトルとURLをコピーしました