WooCommerceでバリエーションのある商品を作成してみる

「属性」はカスタマイズを書ける内容のタイトルのようなイメージをして下さい。
※ここで金額やバリエーションの詳細設定はしません。

①②に登録するものが入れられたら「属性を追加」を行います。

図では、色とサイズの2つの属性を追加してみました。
※あくまでタイトルという認識です。色であれば、「赤、青、緑」などと登録するのはこちらでは行いません。

バリエーションのある商品を作成する

今回はシャチハタの補充インキを用いて、商品を作成してみます。「商品データ」の部分以外は、「基本的な商品」と同じ様に設定をしていきます。

「基本商品の追加方法」は以下の記事にて取り上げています。

2023.03.31

WordPressでECサイトを作ってみる「WooCommerce」② | 商品追加をしてみる

ECサイト（通販サイト）をWordPressで「WooCommerce」のプラグインを使用し構築していくことが出来ます。 WooCom...

「商品データ」から「バリエーションのある商品」を選択します。

「商品データ＞属性」の「既存のユーザーを追加」から設定する属性を選択します。

今回は図のように「色」と「サイズ」を設定してみます。

「色」を追加してみましょう。
図の①「値を作成」を選択するとポップアップが出てきますので、②「色」を入力し、「OK」を選択します。

同じ要領で他の色も追加していくと

「色」の項目の「値」に「紫、赤、藍色…」と設定できることがわかります。

「サイズ」も同じ要領で作ってみましょう。

図例では、サイズを「20ml」「60ml」の２つを作ってみました。洋服などの場合は、「Sサイズ」「Mサイズ」「Lサイズ」などになるかと思います。

「商品ページ上に表示」「バリエーションのために使用」にチェックをした上で、「属性を保存」を選択します。

属性の保存が無事できたら、「商品データ＞バリエーション」を選択し、「バリエーションを生成」を選択します。

先程行った属性の登録から、バリエーションは自動で生み出されます。

「バリエーションを生成」ごポップアップが出てきますので、「OK」を選択します。

図例の場合は、「色が3種類」×「サイズが2種類」ですので、6バリエーションが追加されます。
ポップアップは「OK」を選択します。

図例の様に、6つのバリエーションがちゃんと登録されたことが分かります。

バリエーションの項目を選択すると、1つ1つの詳細が設定できますので、「通常価格」をはじめ必要な箇所に入力をしていきます。

今回は20mlの場合は560円、60mlの場合は780円としました。

設定ができたら、バリエーションの下部にある「変更を保存」を選択します。

確認してみる

バリエーションの中で重量・寸法・説明を書き換えたい場合は、入力すると下図のように反映されます。
※選択されていない状態の場合は、親クラス「商品データ＞配送」の内容が反映されます。

さいごに

属性を先程の様に追加した場合、属性のスラッグは自動的に同じになります。「紫」の場合、スラッグも「紫」になってしまいます。なるべくスラッグは半角英数字の方が良いですので、「ワードプレスの管理画面＞商品＞属性＞条件設定」から変更が可能です。

「編集」「クイック編集」で図の様にスラッグを英語に変えることが出来ます。
また、この画面からも色を追加していくことが可能です。

このバリエーションの機能を使っていけば、複雑なバリエーション商品などの登録もしていくことが可能です。