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

WooCommerceストアの立ち上げ時には、商品の追加、ショッピングカート、決済方法の設定など、ショップの基盤作りに集中するものです。ところで、バリエーションのある商品の作成方法はご存知でしょうか。

最優先事項というわけではないものの、色やサイズなど、もしバリエーションのある商品を販売予定なら、知っておかなければ後々問題になります。

WooCommerceのバリエーションのある商品について動画での解説もご用意しています。

WooCommerceでバリエーションのある商品を作成する方法はシンプルで、複雑な専門知識は不要です。とは言え、WooCommerceを使い始めたばかりの人にとっては、ややわかりにくいかもしれません。

そんな時に、今回の記事がお役に立てるはずです。バリエーションのある商品とは何か、そしてバリエーションと属性の違い、商品の作成方法、さらにプラグインを使って商品バリエーションを最適化する方法まで、隈なく見ていきます。

では、早速始めましょう！

WooCommerceの「バリエーションのある商品」とは

WooCommerceのバリエーションのある商品とは、一言で言えば、複数のタイプ、スタイル、種類がある商品です。バリエーションには、以下のようなものが挙げられます。

• 色
• サイズ
• スタイル
• 素材

これは、WooCommerceの商品フィルターとはまた別物で、商品をフィルタリングしても、バリエーションの選択が必要になります。

バリエーションのある商品の場合、商品をカートに入れる前に、各項目の選択が求められます。多くのECサイトや会社でバリエーションのある商品が販売されており、以下のような使用事例が一般的です。

• サイズや色に種類がある衣類を販売するアパレルブランド
• 購入前にドロップダウンリストやチェックボックスでトッピングを選ぶピザ屋
• キャンバスや木などのさまざまな素材、複数のサイズでイラストや写真のプリントを販売するアーティスト
• 素材や生地を選んでオリジナルの家具の注文を受け付ける家具屋

他にも、さまざまな使用事例が考えられます。多かれ少なかれ、バリエーションのある商品の作成が必要になるショップがほとんどでしょう。

WooCommerceを使うと、組み込みの機能だけでバリエーションのある商品を作成することができ、設定も比較的簡単です。これからその手順をご説明していきますが、その前に、バリエーションと属性の違いを押さえておきましょう。

バリエーションと属性

WooCommerceにおけるバリエーションと属性の最大の違いは、バリエーションは買い物客が操作できるのに対し、属性はできない点にあります。

第一に、属性とは、バリエーションを定義するもので、色や柄など、さまざまなスタイルが含まれます。WooCommerceでは、この属性を使って、商品をソートすることも可能です。しかし、属性は単なる情報を表現する要素であり、何の機能もありません。

また、属性は、特定の商品の特徴を定義するのにも使用されます。例えば、カバンの商品ページなら、寸法、カバンの素材、持ち手の素材などを属性として一覧表示することができます。しかし、これらの情報は、あくまで商品に関する事実（属性）であり、購入者が選択できるものではありません。

これに対して、バリエーションは、その属性をバリエーションのある商品として利用し、ある属性の商品を選んで購入できるようになります。また、さまざまな属性を組み合わせて、別の商品を作成することも可能です。

例えば、ある帽子に色とロゴの属性があるとします。この属性を組み合わせて、青いイルカのロゴが入った帽子、緑色のトカゲのロゴが入った帽子といったように、何通りもの商品を販売することができます。

買い物客が決済前にコンバージョン（この場合は商品購入）の一部としてバリエーションを選択できるのに対し、属性は選択することができません。

したがって、バリエーションを設定する前に、属性を設定しておくことをお勧めします。この設定方法は簡単なのでご安心を。

バリエーションのある商品の作成方法

それでは、ここからは商品の作成方法を解説していきます。WooCommerceをまだお持ちでない場合には、事前にインストールを行なってください。また、ショップにはすでに商品が数点追加されていることを前提に見ていきます。

1. 商品属性を作成する

最初の作業は、商品属性の作成です。WordPressの管理画面から、「商品」＞「属性」に移動します。

この画面で、オンラインストアの属性を新規追加することができます。インストール後のデフォルトでは、「Color」という属性が追加されています。

今回は、例として「Size」という属性を追加します。「名前」（Size）と「スラッグ」（size）を入力したら、「属性を追加」をクリックして完了です。

次に、作成した属性名の横に表示される「条件設定」リンクをクリックします。

この画面では、その属性に関連づける用語を自由に追加することができます。今回は、「Size」属性に「Medium」を追加してみます。これは、属性を追加するのと同様の手順です。「名前」（Medium）と「スラッグ」（medium）を追加し、必要に応じて説明を入力してください。完了したら、下にある「Sizeの新規追加」ボタンをクリックします。

「Color」属性にも色を作成してみます。先ほどと同じ手順で、上のスクリーンショットのように「Green」を追加します。

このように、WooCommerceでは、属性とそれに関連する用語を制限なく追加することができます。運営するECサイトのタイプや商品の種類に応じて、属性と関連用語を作成してみてください。

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

次のステップは、作成した属性を適用する商品ページの作成です。まずは、「商品」＞「新規追加」に移動します。

商品名と説明文の入力、商品画像の追加を終えたら、「商品データ」セクションまでスクロールダウンしてください。

上部にあるドロップダウンメニューから「バリエーションのある商品」を選択します。

それから、「一般」タブを選択し、販売価格などの必要情報を入力します。

3. 属性の割り当て

これで、バリエーションのある商品の設定ができました。次に、先ほど作成した属性を追加していきます。「属性」タブを開き、割り当てたい属性を選択して、「追加」ボタンをクリックしてください。

「値(s)」セクションに、先ほどその属性に追加した関連用語がすべて表示されます。作成した商品に適用したい用語のみを選択してください（すべて適用する場合は「すべて選択」で一括選択が可能）。

フロントエンドでお客さんがこの属性を選択できるようにするには、「商品ページ上に表示」にチェックを入れます。

また、属性からバリエーションを作成するには、「バリエーションのために使用」にもチェックを入れてください。

「属性を保存」をクリックして、完了です。

4. バリエーションを追加する

最後に、商品ページにバリエーションを追加します。先ほどの画面で、「バリエーション」タブをクリックしてください。

「バリエーションを追加」と表示されたドロップダウンメニューが表示されます。横にある「実行」ボタンを押します。

すると、別のドロップダウンメニューが表示され、商品に適用する属性を複数選択することができます。

必要に応じて、各バリエーションの、標準価格、セール価格、SKU番号、在庫状況、重量、寸法などの情報を調整してください（価格は入力必須）。

バリエーションの変更を終えたら、「変更を保存」をクリックして完了です。

さらにバリエーションの追加が必要な場合は、この手順を繰り返して実行します。

商品バリエーションを最適化する方法

さて、バリエーションのある商品、そしてその作成方法が分かったところで、ここからは応用編です。商品ページの魅力を最大限引き出し、コンバージョン率アップに役立つWooCommerceプラグインと拡張機能をご紹介していきます。

WooCommerceのバリエーションのある商品について動画での解説もご用意しています。

1. Variation Swatches

最初にご紹介するのは、Variation Swatches for WooCommerce。商品の属性とバリエーションを美しく表示することができるプラグインです。バリエーションの選択をカラーチップ（色見本）、ラベル、ラジオボタン、画像などで表示することができ、商品ページが洗練されたものになります。選択しづらいドロップダウンメニューとはこれでお別れです。

また、商品ページだけでなく、商品のクイックビューでも機能し、スウォッチの形状も丸型と円形から選択可能です。さらに、対象の要素にカーソルを当てると表示されるツールチップやカスタムCSSなどの機能も組み込まれています。

Variation Swatches for WooCommerceは、無料で利用できます。

2. Additional Variation Images

WooCommerceのデフォルトでは、追加できる画像は1枚のみですが、Additional Variation Images Gallery for WooCommerceを使えば、商品バリエーションに複数の画像を追加して、ギャラリー表示することができます。

結局のところ、商品画像は多ければ多いほど良く、売上アップにつながります。このプラグインを利用すれば、買い物客がある商品ページで別のバリエーションを選択すると、それに応じて表示する画像も切り替えることができます。商品に関する情報が多いほど、買い手は商品に対する理解を深めることができ、ひいてはブランドに対する信頼度が上がります。

このプラグインも無料で利用できます。

3. Product Filter by WooBeWoo

WooBeWooによるWooCommerce Product Filterもまた、価値あるプラグインです。オンラインストアを訪れた買い物客が、カテゴリー、タグ、タクソノミー、価格、属性など、さまざまな要素で商品を並べ替えることができるようになります。

主な機能としては、販売状況、評価、在庫の有無などの条件を用いた商品のフィルタリング機能、フロントエンドでのフィルター表示方法の選択（ドロップダウンメニュー、チェックボックス、ラジオボタン、アイコンなど）などが挙げられます。また、AJAXのライブ検索対応で、Elementorと互換性があります。

このプラグインも無料で入手可能です。

4. Product Feed PRO for WooCommerce

マーケティング用に商品フィードを作成できるProduct Feed PROもお勧めです。オンラインマーケティングに有用なテンプレートが100以上用意されており、商品フィードを好きなだけ作成することができます。Google ショッピング、Facebook広告のリターゲティング、Pricerunner、Bing Ads、Skroutzなどに対応しています。

その他にも、フィールドマッピング、カテゴリーマッピング、フィルタリング、商品バリエーションなどの機能もあります。そして、FacebookピクセルとコンバージョンAPI、Google動的リマーケティング（GDR）とも互換性ありです。

このプラグインも無料で利用することができます。

5. Extra product options For WooCommerce

商品ページに要素を追加したい場合には、Extra Product Options for WooCommerceの出番です。商品ページに直接高度なフィールドを追加することができるため、自分でレイアウトを変更して、標準の商品ページエディター内で作業することなく、自社の顧客の要望に応じたページの設計が可能です。

テキスト、パスワード、非表示、メールアドレス、URL、電話番号、テキスト、選択、ラジオボタン、チェックボックス、チェックボックスグループスライダー、日付選択、色選択、見出し、段落など、17種類のカスタムフィールドが用意されています。

Extra Product Options for WooCommerceも無料で入手可能です。一部有料の機能もあり、時刻選択、HTML、配色パレット、ファイルアップロード、複数選択、データと時間範囲選択、画像グループなどが利用でき、サイトにつき39ドルで購入できます。

6. Advanced Dynamic Pricing for WooCommerce

Advanced Dynamic Pricing for WooCommerceは、分野を問わず、あらゆるECサイトに有用なプラグインです。WooCommerceストアに動的価格や割引を設定して、簡単に有効化・無効化することができます。

個々の商品、または1つの商品グループに対して、金額、パーセンテージ、および固定価格を設定可能です。その他の機能として、一括価格設定やユーザー役割に応じた価格設定も行えます。このプラグインを活用すれば、カテゴリー内すべての商品を割引したり、一定数の商品購入で割引が適用されるようにしたり、BOGO（1点買うともう1点は無料）のプロモーションを行ったりすることができます。

価格設定とセール販売の可能性を大きく広げてくれるプラグインで、無料で利用することができます。高度なルールや機能が搭載された有料版は、年間50ドルから購入可能です。

7. Product Variations Table for WooCommerce

Product Variations Table for WooCommerceは、複雑なバリエーションを展開する商品を販売するなら持っておきたい拡張機能です。各商品ページ内でバリエーションをフィルタリングして、ソートできるようになります。

商品バリエーションを表で見せ、ソートやAjaxの検索機能によって、買い物客が操作できる仕組みになっており、表の中で特定のバリエーションを指定した商品検索も可能です。また、表内の商品の横には「カートに入れる」ボタンが表示されるため、コンバージョン率を高めてくれます。さらに、バリエーションの情報をPDF、Excel、またはCSV形式でダウンロードすることも。

作成した表は、ストアの外観に合わせて編集することができ、使用が簡単なショートコードが付帯しています。この拡張機能は、年間49ドルで購入することができます。

8. YITH WooCommerce Color and Label Variations

最後にご紹介するのは、YITH WooCommerce Color and Label Variationsです。商品のバリエーションをわかりやすく表示することができ、商品ページの見た目を改善して、コンバージョンを高めてくれるプラグインです。

このプラグインを利用すると、どのようなバリエーションがあり、何が購入可能なのかが一目瞭然になり、各商品バリエーションはアイコンや画像を利用してグラフィカルに見せることができます。

有料のサービスで、年間89.99ドルで利用可能です。

まとめ

さて、いかがでしたでしょうか。ご紹介した通り、WooCommerceでバリエーションのある商品の作成方法は、意外にも簡単です。バリエーションとその仕組みさえ理解すれば、簡単に導入することができます。

今回の記事では、バリエーションのある商品とその機能、属性との違い、そして商品の作成方法と属性の追加方法を見ていきました。

加えて、バリエーションのある商品の販売を促進してくれる便利なプラグインもいくつか取り上げました。どんなWooCommerceストアにも、有益な情報になっているはずです。この記事を元にバリエーションのある商品を作成して、さっそく販売を始めてみてください。

ECサイトの売上を伸ばすWooCommerceガイド決定版も併せてぜひお役立てください。