• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / WooCommerce / WooCommerce のバリエーションのある商品を追加して売上向上を図る

WooCommerce のバリエーションのある商品を追加して売上向上を図る

池田祐太郎 | 2023年2月28日 公開 コメントを書く

WordPress をオンラインショップとして EC サイト化するプラグインである WooCommerce では、「バリエーションのある商品」という1つの商品ページにサイズやカラー等の異なる複数の商品を掲載できる商品タイプをサポートしています。

本記事では、WooCommerce のバリエーションのある商品の機能や効果的な利用方法、および設定方法について説明します。

目次

  • 1 バリエーションのある商品とは何か
  • 2 バリエーションのある商品はどう利用すると効果的か
    • 2.1 バリエーションのある商品に向いている商品カテゴリーやジャンル例
  • 3 バリエーションのある商品機能を使って、どのような売上アップ方法があるか
  • 4 バリエーションのある商品の設定方法
  • 5 グローバル商品属性とは
    • 5.1 グローバル商品属性の設定方法
  • 6 WooCommerce のバリエーションのある商品で他社と差別化

バリエーションのある商品とは何か

WooCommerce の「バリエーションのある商品」は、同じ製品に対して異なるサイズ、色、重量、価格などの選択肢を提供する場合に便利な商品タイプです。

WooCommerce の商品設定ページから商品タイプを選択でき、このようにバリエーションのある商品が設定可能

バリエーション商品を選択することで商品の選択肢を増やすことが可能です。例えばとある商品のスニーカーに対して、26cm, 27cm, 28cm等の複数のサイズや、赤・黒・白・青等の各種カラーを選択できるようになります。このように任意の選択肢を持つ商品のことを WooCommerce ではバリエーションのある商品と呼んでいます。

WooCommerce のバリエーションのある商品を設定することでできることの例を挙げます。

  • 複数の選択肢を持つ商品を作成できる
  • 各選択肢には、異なる価格、重量、在庫レベルなどの属性を割り当てることができる
  • 各選択肢には、それぞれ異なる商品コード(SKU)を割り当てることができる
  • バリエーションのある商品は、ショップ一覧ページに表示される場合、単一の商品として表示される

バリエーションのある商品はどう利用すると効果的か

バリエーションのある商品は通常の単品の商品とは異なり、商品に対して複数の選択肢を提供することができるため、選択肢をできるだけシンプルにしつつ、顧客にとって分かりやすくすることが重要です。多すぎる選択肢を掲示してしまうと、商品ページ上で困惑してしまい、購入を諦める可能性があるためです。バリエーションが3つも4つもあると「選択肢が多くてわかりづらい」……となる可能性が高いです。

また、各バリエーションごとに商品画像をできるだけ設定し、選択肢ごとに異なる画像を表示することにより、商品の違いを視覚的に理解しやすくなります。例えば、赤いTシャツを選択すると画像も赤く変わるようなイメージです。

バリエーションに「カラー」「サイズ」を設定した例。通常は白いシャツの画像が表示されている
カラーを「赤」に変更すると赤いTシャツの画像に変更され、視覚的に別の商品を選択していることがわかる

バリエーションのある商品に向いている商品カテゴリーやジャンル例

単一商品だけで完結すればバリエーションのある商品に設定する必要はありません。基本的に商品に選択肢があれば各ジャンルでバリエーションのある商品が利用できます。一例を挙げます。

  • アパレル:サイズ、色、スタイル、素材など
  • 食品:味、サイズ、パッケージタイプなど
  • 家具:色、材質、サイズ、デザインなど
  • 電化製品:色、サイズ、機能、ブランドなど
  • スポーツ用品:サイズ、色、種類、ブランドなど

追加したバリエーションのある商品それぞれに商品画像や SKU、価格や在庫管理、商品説明等が設定できるため、より柔軟な商品ページを作ることができ、顧客に多くのオプションを提供することで売上向上が見込めます。

バリエーションのある商品機能を使って、どのような売上アップ方法があるか

バリエーションのある商品は、商品の選択肢を提供することができるため、顧客が製品に関心を持つ可能性を高めることができます。

顧客は、自分の好みに合った商品を購入するために、商品の選択肢に注目します。バリエーションのある商品機能を使って、顧客にとって魅力的な選択肢を提供することで、購入意欲を高めることができます。例えば、アパレル商品では、色やサイズ、素材などの選択肢を提供することができます。顧客にとって魅力的な選択肢を提供することで、売上をアップすることができます。

様々なバリエーションを選べる例。自分好みに選択でき、オプション毎に価格が追加される。

また、バリエーションのある商品には、選択肢ごとに異なる価格や特徴があるため、顧客にとってわかりやすい情報を提供することが重要です。商品ページで、各バリエーションの説明文や画像、サイズ表などを提供することで、顧客にとって魅力的な商品となる可能性が高くなります。

以上のような方法でバリエーションのある商品を設計することで、競合他社との差別化や顧客満足度の向上につながり、結果的に売上向上に結びつく可能性があります。

バリエーションのある商品の設定方法

WooCommerce でバリエーションのある商品を設定する方法をご紹介します。

新規商品追加にて新規作成画面に切り替えます。

WooCommerce の「商品」→「新規追加」から新規タイトルを設定した状態

少し画面を下に下がると、「商品データ」という項目があります。デフォルトでは「基本的な商品」となっているのを、「バリエーションのある商品」に変更します。すると「バリエーション」タブが追加されるのがわかります。

「属性」の一つ後ろに「バリエーション」が追加された

「属性」タブをクリックし、バリエーションに使用する属性を追加します。属性というのは、その商品でのバリエーション名です。(例えば、サイズ、色、重量など)

追加方法は「カスタム商品属性」から追加する方法で説明します。(「グローバル商品属性」は後述)

「カスタム商品属性」が選択されている状態で「追加」をクリック

カスタム商品属性に対して、バリエーションの名前と値を設定します。例えば、名前を「サイズ」とした場合、値には、S、M、L、XLといったサイズとして分類・表示したい値を設定します。さらに、「バリエーションのために使用」のチェックをわすれずに入れます。

任意の「名前」「値」を設定し、チェックをしてから「属性を保存」をクリックしてバリエーションを保存する

次に、「バリエーション」タブをクリックします。基本的にはプルダウンの「すべての属性からバリエーションを作る」をクリックして全バリエーションの商品を設定します。

「すべての属性からバリエーションを作る」が選択されている状態で「実行」を押す
そうすると、追加した属性に基づいてバリエーションのある商品が自動的に追加される。今回はサイズ属性に設定した4つの値が追加されているのがわかる

登録された各商品に対して、画像、SKU、価格、在庫、商品説明などの情報を追加します。

Mサイズに対して画像、SKU、価格、商品説明を追加した例

この作業を各バリエーションに設定します。完了後、下書き保存してプレビューしてみましょう。

商品ページ例。サイズ「M」を選択すると設定した画像、SKU、価格、商品説明が正しく表示されている

カートを見てみると正しくバリエーション商品が追加されているのが確認できました。

カート画面で選択したサイズ「M」が正しく表示されているのがわかる

グローバル商品属性とは

バリエーションのある商品の設定時に、「属性」タブで「カスタム商品属性」以外に「グローバル商品属性」があると先程説明しました。

WooCommerce には、商品属性をグローバルに設定することができる機能があります。グローバルとはオンラインサイト全体で利用できる共通の属性です。グローバル商品属性に登録することで、設定した属性はすべての商品で利用できます。つまり、グローバル商品属性を設定することで、新しい商品を追加する際に毎回属性を再定義する必要がなくなるメリットがあります。

例えば、アパレルのオンラインストアを運営しており、サイズ、色、素材などの属性を設定するとします。この場合、グローバル商品属性を使用することで、これらの属性を一度設定することで新しい商品を追加する際は設定した属性を選択するだけで済むのです。これは便利です。

グローバル商品属性を設定することで、手間が大きく減りますし、入力ミスも防ぐことに繋がります。さらに、属性の追加や削除などを簡単に行うことができ商品の管理が容易になります。

グローバル商品属性の設定方法

グローバル商品属性は、WooCommerceの「商品」設定画面から設定できます。

「商品」→「属性」から設定可能

基本的な使い方であれば、「名前」「スラッグ」を入力して「属性を追加」となります。(属性の商品一覧ページを作りたい場合はチェックを入れる)

すると属性が追加されるので、名前をクリックして属性詳細画面へ遷移します。

属性が追加された例。

値を入力する画面に切り替わるので、値の名前とスラッグ、必要に応じて説明を入力して追加します。

サイズを追加している例

入力後、順番を入れ替えたい場合は右横にある三本線マークをドラッグすることで順番が入れ替わります。

S, M, L となるように順番を入れ替えた

追加した状態で新規商品追加してみます。バリエーションのある商品として「属性」タブを見てみると、今回設定したグローバル商品属性である「サイズ」が選択可能な状態になっているのが確認できました。

今回は「サイズ」属性にしたが、任意の属性が設定可能
追加後「すべて選択」とすると設定した属性の値が自動的に選択される
念の為バリエーションを追加してみたが、設定した3つの値で正しく追加されているのがわかる

WooCommerce のバリエーションのある商品で他社と差別化

以上、WooCommerce のバリエーションのある商品機能の説明と設定方法でした。設定方法は一度わかればさほど難しくなく、むしろ細かく設計できるため選択肢の多い商品にはぴったりです。

WooCommerce は WordPress のプラグインとして配布されているため、ツール自体は無料で利用可能です。

顧客のニーズに合った商品を提供し、他社ショッピングサイトにはない機能を提供することで顧客に価値を提供することに繋がります。

バリエーションのある商品を並べる EC サイト構築・リニューアルをお考えてでしたらお気軽にご相談ください。

メールコンサルティング
WordPress保守管理サービス

Filed Under: WooCommerce

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

おそらく初?プラグインで各バージョンのマイナーアップデートを実施したWooCommerce
2021年8月18日
カテゴリー: WooCommerce
サブスクECサイトをノーコードでサクッと構築してみた
2021年4月5日
タグ: サブスクリプション
カテゴリー: WooCommerce
WooCommerceで軽減税率を設定する
2019年9月18日
カテゴリー: WooCommerce

人気記事

  1. 同一サーバー上に構築するWordPressのテスト環境の作り方
  2. git pull してもエラーが出てファイルが反映されないときの対処法
  3. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  4. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  5. ダウンロードして即使えるサイトマップ(サイト構成図)のテンプレート5点
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • WordPress サイトを多言語化するプラグイン5選(自動翻訳サービス除く)
  • ウェブサイトを自動的に多言語対応する各サービスを比較します
  • WooCommerce のバリエーションのある商品を追加して売上向上を図る
  • 目次生成プラグインの TOC+ が表示されなくなったときの対処法
  • ChatGPT の有料版「ChatGPT Plus」を使ってみた

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git Google+ google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール フルサイト編集 ブログ プラグイン マーケティング リニューアル 保守管理 多言語 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.