WordPress PR

【WordPress】WooCommerceでバリエーションのある商品を追加する方法

記事内に商品プロモーションを含む場合があります

WordPressのプラグイン「WooCommerce」では、バリエーションのある商品を追加することが可能です。
例えば、商品に「Tシャツ」を登録する場合に、「色」や「サイズ」などのバリエーションを選べるオリジナルの項目を設定出来るということです。
始めて試したときは少し手間取ってしまったので、具体例を挙げて解説していきます。

前提

・プラグイン「WooCommerce」(バージョン3.5.0)有効化

・プラグイン「WooCommerce For Japan」(バージョン1.2.22)有効化

・テーマ「Storefront」(バージョン2.3.5)有効化

 

管理画面よりバリエーションのある商品を追加する

追加する項目について

ここでは、商品「Tシャツ」に、「サイズ」→「S,M,L」というバリエーションを追加する例を紹介していきます。

属性の追加

WooCommerce→商品→属性より、新規属性を追加します。
今回追加したい「サイズ」は、TシャツだけでなくYシャツだったりセーターだったり、他の商品を登録する場合も必要となりうる属性です。
予め属性を追加しておくことにより、商品を登録するタイミングで毎回値を設定しなくて済みます。

・「名前」に属性の名前を入力します。ここでは「サイズ」としています。
・「スラッグ」に属性のスラッグを半角小文字で入力します。ここでは「size」としています。

入力したら、「属性を追加」をクリックします。

「サイズ」が一覧に追加されました。
続けて「サイズ」もしくは「条件設定」をクリックします。

サイズの各項目を設定していきます。
「S,M,L」の3項目設定したいので、まずは「S」から追加していきます。

・「名前」に属性の名前を入力します。ここでは「S」としています。
・「スラッグ」に属性のスラッグを半角小文字で入力します。ここでは「s」としています。

入力したら、「サイズの新規追加」をクリックします。

「S」が一覧に追加されました。
必要な項目分、同様に追加していきます。

「S,M,L」の3項目追加しました。
項目は三本線をドラッグすることで順番を並び替えることが出来ます。

WooCommerce→商品→属性に戻ると、属性「サイズに戻る条件「S,M,L」が追加されていることが確認出来ました。
属性の追加はこれで完了です。

商品の追加

WooCommerce→商品→新規追加より、商品を追加していきます。

・タイトルに商品名を入力します。ここでは「Tシャツ」としています。
・「パーマリンク」に商品のスラッグを半角小文字で入力します。ここでは「t-shirt」としています。
・本文に商品の説明文を入力します。

次からが重要で、「商品データ」右の商品タイプを、「基本的な商品」から「バリエーションのある商品」に変更します。
「属性」をクリックし、先ほど追加した属性「サイズ」を選択し、「追加」をクリックします。

「バリエーションのために使用」にチェックを入れます。
「値」は最初空になっていますが、「すべてを選択」をクリックすると、先ほど属性で登録した値が表示されます。
最後に「属性を保存」をクリックします。

続いて、「バリエーション」をクリックし、「すべての属性からバリエーションを作る」を選択し、「表示」をクリックします。

ダイアログが表示されますが、そのまま「OK」をクリックします。

3バリエーションが追加されました。
それぞれの項目の設定をしていきますので、▼をクリックします。

詳細設定が表示されます。
すべて入力する必要はありませんので、必要な項目のみ設定します。
最低限「通常価格」を設定しておけばとりあえずOKです。

M及びLも同様に設定した後、「変更を保存」をクリックします。

「商品画像」を設定し、「商品の簡単な説明」を入力しておきます。 

最後に「公開」をクリックします。
これで商品の登録が完了しました。

実際の商品ページ

実際の商品ページを確認すると、「サイズ」の選択項目が追加されています。
サイズの値も追加した内容通りとなっています。

 

まとめ

バリエーションのある商品の登録は、手順が多くて面倒に感じるかもしれませんが、数をこなしていくうちに慣れてきます。
「Tシャツ S」「Tシャツ M」・・・のように商品数を増やしてしまうと、お客様が商品を探しづらくなってしまうので、ぜひバリエーションのある商品として登録してみてくださいね。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)