WooCommerceでカテゴリー、タグ、属性を設定する方法

WooCommerceはカテゴリーやタグを使うことで商品を分類できます。また、属性を使えば、一つの商品でサイズや色が異なる複数のバリエーションを用意することも可能です。

この記事では、WooCommerceでカテゴリー、タグ、属性を設定する方法を説明します。

なお、WooCommerceとは何か、WooCommerceでショップを開設する手順については以下の記事をお読みください。

WordPressでネットショップを作れるWooCommerceの使い方

また、WooCommerceに対応した便利なテーマは、以下の記事を参考にしてください。

ネットショップを作れるWooCommerce対応のWordPressテーマ

分かりやすいように、ファッション関係の通販サイトを例に説明しています。

また、WordPressのテーマは「Storefront」を使用しています。テーマによっては設定方法などが多少変わる可能性があります。

WooCommerceでカテゴリーを設定する

WooCommerceのカテゴリーの使い方

具体例として、「シャツ」や「帽子」などのカテゴリー作ります。

WooCommerceのカテゴリーの追加方法

カテゴリーの追加は、管理画面の「商品」⇒「カテゴリー」から行います。以下の内容を入力して、最後に「新規カテゴリーを追加」というボタンをクリックしてください。

  • 名前
    ショップに表示されるカテゴリーの名称
    (例)シャツ
  • スラッグ
    URLやプログラムの内部で使われるカテゴリーの名称
    (例)shirt
  • 親カテゴリー
    親のカテゴリー。これを設定するとカテゴリーが階層表示されます。
    (例)なし
  • 説明
    カテゴリーの説明。テーマによってはショップに表示されます。
    (例)空欄
  • 表示タイプ
    カテゴリーのトップページで表示する内容
    (例)デフォルト
  • サムネイル
    カテゴリーの画像。カテゴリーのトップページなどに表示される可能性があります。

この中で「表示タイプ」は分かりにくいと思うので補足します。

WooCommerceのカテゴリーの表示タイプが商品

上のように、カテゴリーの「シャツ」をクリックすると、シャツの一覧が表示されます。このようなカテゴリーのトップページで表示する内容を決める項目が表示タイプです。

まず、表示タイプで「商品」を選択すると、先ほどシャツの一覧が表示されたようにカテゴリーの商品が表示されます。

WooCommerceのカテゴリーの表示タイプがサブカテゴリー

表示タイプの「サブカテゴリー」は子カテゴリーが存在するときに使われます。

例えば、「シャツ」というカテゴリーを親として、「Tシャツ」と「ポロシャツ」という子カテゴリーがある場合、「サブカテゴリー」を選択すると上のように子カテゴリーのリンクが表示されます。※「サブカテゴリー」を選択しても、子カテゴリーがなかったり、子カテゴリーに紐づく商品がないときは表示タイプが「商品」の扱いになります。

WooCommerceのカテゴリーの表示タイプが両方

表示タイプで「両方」を選択すると、上のように子カテゴリーのリンクと商品一覧の両方が表示されます。

WooCommerceのカテゴリーの表示タイプがデフォルト

表示タイプで「デフォルト」を選択すると、管理画面の「外観」⇒「カスタマイズ」⇒「WooCommerce」⇒「商品カタログ」にある「カテゴリー表示」で設定した表示タイプが適用されます。

個人的には、カテゴリーによって表示タイプが異なるのは不自然なので、カテゴリーを作成するときは常に「デフォルト」を選択して、「外観」から共通の表示タイプを設定するのが良いと思います。

WooCommerceのカテゴリーを商品に割り当て

カテゴリーを作成すると、商品の編集ページで割り当てができるようになります。

WooCommerceのカテゴリーをサイドバーに表示

カテゴリーをサイドバーなどに表示する場合は、「外観」⇒「ウィジェット」から「商品カテゴリー」というウィジェットを設定してください。

WooCommerceでタグを設定する

WooCommerceのタグの使い方

具体例として、「カジュアル」や「男性向け」といったシーンや用途で絞り込むタグを作ります。

WooCommerceのタグの設定方法

タグの追加は、管理画面の「商品」⇒「タグ」から行います。以下の内容を入力して、最後に「新規タグを追加」というボタンをクリックしてください。

  • 名前
    ショップに表示されるタグの名称
    (例)カジュアル
  • スラッグ
    URLやプログラムの内部で使われるタグの名称
    (例)casual
  • 説明
    タグの説明。テーマによってはショップに表示されます。
    (例)空欄

カテゴリーに比べると入力する項目が少ないので難しくはないと思います。

WooCommerceのタグを商品に割り当て

タグを作成すると、商品の編集ページで割り当てができるようになります。タグの名前を入力して「追加」ボタンをクリックするか、「よく使われているタグから選択」でタグの割り当てができます。

WooCommerceのタグをサイドバーに表示

タグをサイドバーなどに表示する場合は、「外観」⇒「ウィジェット」から「商品タグクラウド」というウィジェットを設定してください。

WooCommerceで属性を設定する

カテゴリーやタグと同じく、商品を分類する機能を持つのが「属性」です。

属性はWordPressでブログを書くときには使われないため、理解するまでに少し時間がかかるかもしれません。しかし、とても便利な機能なので、ぜひ使えるようになることをおすすめします。

WooCommerceの属性の使い方

使い方は様々ですが、色、形、サイズなどの属性を作ることができます。ここでは、上のように洋服のサイズを属性で作るケースを例に説明します。

属性のメリット

まず最初に、属性を作ると何ができるのか説明します。

WooCommerceの属性のメリット「商品の絞り込み」

一つ目は、商品を分類して絞り込みができることです。例えば、洋服の商品ごとに「L」、「M」、「S」というサイズを属性で設定して、商品一覧で絞り込めます。

しかも、カテゴリーやタグとの併用ができるので、上のように「シャツのカテゴリーでサイズがLの商品」という複合的な絞り込みが可能です。

WooCommerceの属性のメリット「バリエーションのある商品」

二つ目は、「バリエーションのある商品」を登録できるようになることです。上の例では、一つの商品に対して「Lサイズ」と「Sサイズ」の2種類があり、どれを買うか選んだ上で購入することができます。

属性の作成方法

WooCommerceの属性の設定方法

属性の追加は、管理画面の「商品」⇒「属性」から行います。以下の内容を入力して、最後に「属性を追加」というボタンをクリックしてください。

  • 名前
    ショップに表示される属性の名称
    (例)サイズ
  • スラッグ
    URLやプログラムの内部で使われる属性の名称
    (例)size
  • アーカイブを有効にしますか?
    属性のアーカイブ(一覧)ページを作るか ※詳細は後述
    (例)未選択
  • デフォルトの注文並び変え
    属性の並び順 ※詳細は後述
    (例)標準の順番

WooCommerceの属性条件のリンク

属性を追加したら、「条件設定」というリンクをクリックして属性条件を作成します。属性条件とは、例えばサイズの属性における「L」や「M」といったものです。

WooCommerceの属性条件の設定方法

以下の内容を入力して、最後に新規追加のボタンをクリックしてください。

  • 名前
    ショップに表示される属性条件の名称
    (例)Lサイズ
  • スラッグ
    URLやプログラムの内部で使われる属性条件の名称
    (例)l ※エル
  • 説明
    属性条件の説明。テーマによってはショップに表示されます。
    (例)空欄

以上で属性の作成は完了ですが、分かりにくいと思う部分を補足します。

アーカイブを有効にしますか?

WooCommerceの属性のアーカイブを有効

まず、属性を作るときに「アーカイブを有効にしますか?」を選択すると、上のように属性のアーカイブページが作成されます。

アーカイブページのURLは「属性のスラッグ/属性条件のスラッグ」という形式です。
(例)https://sample.com/size/l

「アーカイブを有効にしますか?」を選択しないと、上記のURLにアクセスしても404エラーページが表示されます。

アーカイブページを使って何かしたいことがあるときは選択してください。

デフォルトの注文並び変え

WooCommerceの属性の順番

次に「デフォルトの注文並び変え」の補足をします。これは上のようにショップに表示される属性条件の順番を決めます。

WooCommerceの属性の順番を並び替え

属性条件の順番は三番線をドラッグすると手動で並び替えできますが、「デフォルトの注文並び変え」で「標準の順番」を選択すると、この順番が適用されます。「名前」や「条件ID」などを選択すると手動の並び替えは無視されて、自動的に並び替えされます。

属性の割り当て方法

作成した属性を商品に割り当てます。

WooCommerceの属性を商品に割り当て「属性の追加」

割り当ては商品の編集ページの「商品データー」から行います。左側の「属性」のタブを開き、作成した属性を選択して「追加」ボタンをクリックします。

WooCommerceの属性を商品に割り当て「値の設定」

属性の設定パネルが表示されるので、「値」の項目で商品に割り当てたい属性条件を選択します。最後に「属性を保存」ボタンをクリックすると属性の割り当ては完了です。

WooCommerceの属性を商品に割り当て「商品ページ上に表示」

なお、「商品ページ上に表示」を選択すると、上のように商品ページに属性の情報が表示されます。

補足
WooCommerceのカスタム商品属性の設定方法

「カスタム商品属性」を選択して「追加」ボタンをクリックすれば、カスタム商品属性を追加できます。これは、その商品だけで使える属性で、値は「|」で区切って入力します

WooCommerceのカスタム商品属性を表示

「商品ページ上に表示」を選択してカスタム商品属性を作成すると、商品ページには追加情報として表示できます。

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

WooCommerceのバリエーションのある商品

「バリエーションのある商品」とは、上のように一つの商品に対して複数の種類があるときに、どれを買うか選択した上で購入できる商品のことです。

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

バリエーションのある商品を作成するには、まず始めに商品データーで「バリエーションのある商品」を選択します。

WooCommerceのバリエーションのある商品の設定方法「属性を設定」

次に「属性」のタブを開いて、「属性の割り当て方法」の手順と同じように属性を設定します。一つだけ違うところは「バリエーションのために使用」を選択することです。最後に「属性を保存」ボタンをクリックしてください。

WooCommerceのバリエーションのある商品の設定方法「バリエーションの追加」

次に「バリエーション」のタブを開き、「すべての属性からバリエーションを作る」を選択して「表示」ボタンをクリックします。

WooCommerceのバリエーションのある商品の設定方法「バリエーションの表示」

すると、先ほど「属性」のタブで設定した全ての「値」に基づいて、バリエーションが表示されます。なお、「追加バリエーション」を選択して「表示」ボタンをクリックしたときは、一つずつバリエーションを追加できます。

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

バリエーションをクリックすると詳細な設定パネルが表示されます。通常価格の入力は必須で、それ以外は必要に応じて設定してください。

WooCommerceのバリエーションのある商品の在庫切れ

同様に、全てのバリエーションについて設定を行ってください。「Lサイズは在庫があるけれどMサイズはない」といったように、バリエーションによって在庫の有無、価格、説明などを変えることができます。

最後に「変更を保存」ボタンをクリックすれば、バリエーションのある商品の作成は完了です。

属性で商品の絞り込みを行う

WooCommerceの属性で商品を絞り込み

上のように属性を設定した商品の絞り込みを行う方法を紹介します。

WooCommerceの属性をサイドバーに表示

「外観」⇒「ウィジェット」から「商品の属性によっての絞り込み」というウィジェットを設定してください。

WooCommerceの属性の絞り込みでOR検索

検索タイプで「OR」を選択すると、絞り込みで複数の属性条件を選んだときに、いずれかに該当する商品が表示されます。上の例では、Lサイズの商品か、Sサイズの商品の両方が表示されています。

検索タイプで「AND」を選択すると、LサイズとSサイズの両方が設定されている商品が表示されます。

コメントを残す

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

CAPTCHA