WooCommerceバリエーション商品の設定方法、Tシャツなど

WooCommerceでのTシャツ複数のサイズや色がある商品の登録方法をご紹介します。
Tシャツは同一商品にサイズにSmall/Medium/Large/X-Largeがあります。
複数商品で必要となる要素なので、まず「サイズ」を属性として登録しておくことで便利に使用することができます。

 

《属性登録》
操作メニューより[WooCommerce]-[属性]を選択します。
①名前欄に「サイズ」と入力
②スラッグ欄に「size」と入力
③[属性を追加]をクリック
④[サイズ]属性が追加されるのを確認して[単語を設定]をクリック

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 002 300x165

 

《属性の単語登録》

①名前欄に「Small」と入力
①スラッグ欄に「small」と入力
③[新規追加 サイズ]をクリック(サイズ属性にSmallを追加という意味)

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 003 300x164

 

[①〜③]の手順で「Medium」「Large」「X-Large」の追加を行います。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 004 300x165

 

一覧に登録されたことを確認します。
ストアはここの並び通りに表示されるのでドラッグして並び替えを行います。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 005 300x165

 

《商品の登録》

①操作メニューより[商品]-[商品を追加]を選択します。
②商品名入力
③[多様多種商品]を選択
④[属性]をクリック
⑤[カスタム商品属性]を選択し[追加]をクリック

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 006 300x165

 

Tシャツに「赤」「黄」「緑」の3色のバリエーションがあるとします。
⑥名前に「カラー」を入力
⑦[バリエーションでの使用]をチェック
⑧値に「赤|黄|緑」を入力(パイプによってテキストを分けています。)
[属性を保存]をクリックします。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 007 300x122

 

この設定を行うと商品ページでカラーの選択が可能になります。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 008 300x147

 

[サイズ]を選択し追加をクリックします。(属性に登録しているため表示されています)

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 009 300x123

 

⑨[バリエーションでの使用]をチェック
⑩[すべてを選択]をクリック(値欄にサイズが表示されます、商品にないサイズは[X]をクリックして削除することができます)
[属性を保存]をクリックします。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 010 300x185

 

この設定を行うと商品ページでサイズの選択が可能になります。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 011 300x134

 

[バリエーション]-[バリエーションの追加]をクリック

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 012 300x105

 

Tシャツのカラーを選択し画像と定価を指定します。(赤Tシャツの設定)

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 013 300x188

 

同様に[バリエーションの追加]をクリックして「黄/緑Tシャツ」も設定します。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 014 286x300

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 014 2 300x117

 

アイキャッチ画像を指定します。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 015 253x300

 

アイキャッチ画像を指定していると、カラー・サイズをを選択していないときも画像が表示されます。

※アイキャッチ画像を指定しないと、Tシャツのカラー・サイズ両方選択するまで画像が表示されません。

WooCommerceバリエーション商品の設定方法、Tシャツなど - tutorial variation 016 300x133

 

最後に公開ボタンをクリックすれば商品登録完了です。

Comments are closed.

この記事が気に入ったら「いいね」しよう

この記事が気に入ったら「いいね」をしてください
ありがとうございました。

Close

*
*