商品ページはネットショップ運営で最も力を注ぐ部分のひとつですよね。
作り方ひとつで、売上を左右することもあります。

当記事では、WordPressでネットショップをつくれるWooCommerce(ウーコマース)に商品を登録する方法を解説いたします。WordPressに慣れている方にはとても使いやすく、ブログ記事を書くようにサクサク「商品ページ」をつくれます。

細かい設定例も合わせて解説いたしますので、ぜひ参考にチェックしてみてください。

WooCommerceプラグインのインストールと基本設定がまだの場合は下記記事を参考に設定いただけます。

インストール :WooCommerceのインストールと初期設定
基本設定 :WooCommerceの基本設定

WooCommerceに商品を登録する方法

まずは、WooCommerceプラグインを有効化すると表示される左メニュー「商品」をクリックして商品の編集ページへと移動します。

商品一覧ページ

左メニューや、上部の「新規追加」からでも商品を登録いただけます。基本的にはWordPressの通常の投稿と同じです。上記画像はいくつか商品を登録している例ですが、デフォルトでは商品は何も表示されません。

いずれかの箇所から「新規登録」をクリックすると、下記のような商品ページ編集画面に移動します。今回はTCDテーマ「Ankle」を例に使います。ブラウザ上のデザインは異なりますが、基本的な操作方法はどのテーマでも同じですので番号順にご参考ください。※印の「公開設定」は最後に解説いたします。

商品_編集画面

商品名

まずは商品名を入力しましょう。通常の投稿でいう記事タイトルは、下記のように商品名としてブラウザに表示されます。

商品_タイトル

ここで注意しておきたいのは、商品名のスラッグです。通常日本語で入力すると下記のように表示されます。

日本語スラッグ

隣の「編集」をクリックして、下記のように英字に変更しておく方がベターです。

英語スラッグ

スラッグ(パーマリンク)は日本語でも英語でもSEOに差はないといわれていますが、その商品ページのURLをどこかにコピペした際に、日本語だと文字化けしてしまいます。文字化けしたURLより簡潔な英文の方が見やすいのは言うまでもありませんよね。

ユーザーが見やすいことはSEO的にも好ましいので、ぜひ商品登録時に英文に書き換えておきましょう。

商品の説明文(クラシックエディタ)

クラシックエディタを使って商品の説明文を入力できます。通常の記事でいう記事本文ですね。ここは比較的ボリュームの多い商品説明文や追加情報などを記載する際に使います。

商品ページのファーストビューというよりは、購入を検討している方やすでに商品に興味を持っている方が目を通す箇所いうイメージで使うといいかもしれません。テーマによって表示箇所は変わってきますが、Ankleでは商品画像の下に表示されます。

商品下の説明文

商品の簡単な説明

一方でこちらの「商品の簡単な説明」は、どのテーマでも商品ページのファーストビューに表示される場合が多いです。Ankleでは下記箇所に表示されます。

商品の簡単な説明

ファーストビューで見える商品説明文なので、比較的短くコンパクトな内容で訴求するといいと思います。いきなり長文だと離脱される可能性が高まるからです。

商品データ

ここで商品のタイプや、価格に在庫などを設定します。非常に細かく設定できるので、詳しい設定方法はこちらをご確認ください。

タブ

ここはテーマによって項目や設定が異なる機能ですが、Ankleでは下記のように表示されます。

商品説明下タブ

WooCommerceの各種設定に基づいてタブ内に表示される仕様です。Ankle独自の機能概要については下記記事でご紹介しています。

商品カテゴリー

商品カテゴリーを設定します。ここは通常の投稿と同じ要領でカテゴリーを登録していきます。カテゴリーは基本的には一つのみ設定することが推奨されていますので、大枠の分類で登録しておくといいでしょう。例えばインテリアショップなら、テーブル/チェア/ソファなどですね。

商品タグ

商品にタグを設定します。こちらも通常の投稿と要領は同じです。カテゴリーに比べて、より詳細な分類をタグで設定いきます。インテリアショップならレトロ/モダン/ナチュラルなど。商品の雰囲気やスタイルなどをタグに設定するのもいいかもしれません。商品数が少ないうちは未設定でも特に問題ないでしょう。

通常の投稿におけるカテゴリーやタグについては下記記事で詳しくご覧いただけます。

商品画像

商品一覧ページのサムネイルに利用される画像であり、個別の商品ページにアクセスした際のファーストビューでもあります。一覧表示時の統一感と、各商品ページとのバランスを整えると綺麗です。

商品ギャラリー

で設定した画像の下にサムネイルで表示されます。以下はAnkleでの表示例ですが、クリックで商品画像と切り替わって表示されます。画像の枚数に制限はありませんが、多ければいいわけでもないので、商品の詳細がわかるようにセットしてあげるのがいいでしょう。

商品ギャラリー

公開設定

最後に公開設定を行います。一見、通常の投稿と同じですが、WooCommerce特有の機能があります。それが下記の「カタログの見え方」になります。

公開設定(カタログの見え方)

その商品を商品一覧や商品の検索結果に表示するかどうかを設定できます。注目の商品にチェックを入れておけば、特定の商品だけをまとめたページを作成する際にも役立ちます。

ちなみに「非表示」といっても、商品ページが完全に非表示になるわけではなく、URLを知っているユーザーのみがアクセスできるような施策が可能になります。例えば、限定商品や試作品などを特定のお客さんや関係者のみに販売したいときなどに使える機能です。

商品データの設定方法

商品データの設定方法をこちらで解説いたします。商品データは下記4種類から選択できます。

基本的な商品 色やサイズなどが1種類のみの商品です。
グループ化された商品 複数の商品をまとめて表示します。
外部/アフィリエイト商品 「カートに入れる」ボタンに外部ページへのURLを設定できます。
バリエーションのある商品 色やサイズなどに複数のバリエーションがある商品です。

当記事では最も汎用性の高い「基本的な商品」を例に解説いたします。もっともシンプルな商品タイプです。「バーチャル」や「ダウンロード」という項目にチェックを入れると、設定項目が変更されます。

バーチャル・ダウンロード項目

基本は以下の条件に基づいて使い分けます。

  • バーチャル:データなど発送する必要のない商品
  • ダウンロード可能:音楽データなどのダウンロード商品

・ダウンロード商品 は「バーチャル」「ダウンロード可能」双方にチェック
・オンラインのサービスなど、発送もダウンロードもしない商品 → 「バーチャル」のみにチェック
・シリアルコードを現物配送するダウンロード商品 → 「ダウンロード」のみにチェック

一般

左側のタブを上から順に解説いたします。一般では商品の価格を設定します。

商品データ_一般

「標準価格」に販売金額を設定します。割引価格で販売したい場合は「セール価格」も設定できます。期間限定の価格を設定することも可能です。

価格はダッシュボード左メニュー【WooCommerce】→【設定】→【税】→【税オプション】→「
税込価格」の設定内容に対応するように税込みもしくは税抜きで設定してください。

詳細は「税オプション」をご確認ください。

在庫

ここで商品の在庫状況を設定します。一時的に在庫を無しにしたり、いつでもワンタッチで変更可能です。

商品データ_在庫

    • SKU:JANコードや型番など、商品管理用のコードがあれば記入してください。
    • 在庫を管理しますか ?:商品単位での在庫管理を行う場合はチェックを入れてください。

こちらはダッシュボード左メニュー【WooCommerce】→【設定】→【商品】→【在庫】→「在庫管理を有効化」にチェックが入っている場合に表示されるオプションです。

チェック入れた場合、下記項目が表示されます。

在庫管理設定

ここで在庫切れの場合の挙動を設定できます。お取り寄せ(再入荷)を受け付けたり、在庫低下時にメールで通知を受け取る設定も可能です。

配送

商品の重さや大きさを任意で設定します。バーチャル商品の場合、設定項目が非表示になります。

商品の配送設定

関連商品

関連商品の設定をします。「アップセル」に設定した商品は各商品ページに、「クロスセル」に設定した商品はカート内に表示されます。それぞれの入力欄から商品名で検索が可能です。

商品データ_関連商品

「アップセル」とは、検討中の商品と比較してより高価格帯の商品をお勧めすることです。
「クロスセル」とは、検討中の商品に関連する商品を提案することです。

iPhone13で例えるなら、アップセル商品はiPhone13 proですし、クロスセル商品はiPhoneのカバーやAripodsなどになります。どちらも別の商品を勧めることに違いはありませんが、それぞれの特性に基づき表示される箇所が異なります。

アップセル商品は商品ページの下部に表示され、クロスセルは対象の商品をカートに入れた後のカートページ下部に表示される仕様です。

商品数の増加と共に適切なものを設定することでマーケティングを加速できる機能ですね。

属性

商品のスペックを追加できます。❶「追加」をクリックして設定欄を表示させ、❷名前と値を設定します。ここで設定した内容が商品ページ下に「追加情報」としてテーブルで表示されます。商品の説明文に加えて、補足や商品のスペックなどを表示したい際に活用できます。小物ならサイズ感や材質などですね。

商品データ_属性

WooCommerceのデフォルトテーマ「StoreFront」の場合は、商品ページ下にこのように表示されます。

追加情報の表示例

手前味噌ですが、弊社開発のテーマAnkleではこのように整頓されて表示されます。

Ankleの追加情報

高度な設定

初期設定のままでも問題ありませんが、購入後のお客様に簡単なメモを表示したり、商品の表示順を変更する設定が可能です。

注意事項に記載した情報が購入完了後に送信されるメールに表示される仕様です。出荷情報や納品書に関するメモなどを残しておくとお客様にとって親切ですね。

メニューの順序では、ブラウザに表示する商品の順番を決定します。商品ごとに「1、2、3・・」というように設定すれば、一覧ページで任意の順番で表示可能です。

「レビューを有効化」はダッシュボード左メニュー【WooCommerce】→【設定】→【商品】→【レビュー】で「商品のレビューを有効化する」にチェックが入っている場合に表示されます。特定の商品だけレビューを非表示にする場合はチェックを外してください。

まとめ

基本的な商品の登録方法を解説いたしました。商品ページはブログ記事を書くようにかんたんに作成いただけます。ブログのカテゴリーやタグの概念も応用が効きます。商品ページ特有の追加情報や関連商品、在庫を持たないデータ商品の販売も可能です。

ぜひ、通常のブログコンテンツと同様に商品ページも充実させてみてください。充実するほどに多くの機能を活用できるようになるはずです。

合わせて読みたいWooCommerceの関連記事

第1回 :WooCommerceとは?
第2回 :インストール
第3回 :基本設定
第4回 :商品登録(当記事)
第5回 :クーポンの設定
第6回 :おすすめの決済サービス
第7回 :Stripeの導入
第8回 :PayPalの導入