初めてWooCommerceストアを立ち上げたとき、販売を始めることにワクワクしていたのですが、デフォルトのショップページは地味で、私のブランドとまったくマッチしていないことにすぐに気づきました。商品の基本的なグリッドが表示されるだけで、開発者を雇うことなくカスタマイズする方法がわかりませんでした。
同じような悩みを抱えている方、ご安心ください。WooCommerceはWordPressにeコマース機能を追加する最もポピュラーな方法で、コードを一行も書かずにショップページを目立たせる簡単な方法があります。
このガイドでは、その方法をステップ・バイ・ステップで紹介する：
- WooCommerceショップのレイアウトを視覚的にカスタマイズする
- カテゴリー、人気、タグで商品を整理する
- テスティモニアル、バナー、目玉商品などのデザイン要素を追加する。
- SeedProdのようなツールを使って、自分らしい店頭を作る
これらは、私がデフォルトのショップページをよりクリーンで魅力的なものに変え、訪問者を購入者に変えるために使用した方法です。
WooCommerceショップページとは？
WooCommerceのショップページは、あなたのストアのすべての商品を表示するデフォルトの商品アーカイブページです。WooCommerceをインストールすると、テーマのレイアウト設定を使って自動的にこのページが作成されます。
お店のメインカタログ、または店頭とお考えください。顧客が特定の商品ページをクリックする前に通常閲覧する場所です。
デフォルトでは、ショップページはあなたの商品リストとディスプレイからコンテンツを引き出します：
- 商品画像
- タイトルと簡単な説明
- 価格
- 製品カテゴリーとタグ
- 星の評価とレビュー（有効な場合）
WordPressのテーマとWooCommerceのテンプレートファイルを使用して動的に生成され、ブランドにマッチするようにカスタマイズしてコンバージョンを向上させることができます。
優れたデザインのショップページは、訪問者が探しているものを素早く見つけ、購入プロセスにおける摩擦を減らし、売上を増加させることができます。だからこそ、WooCommerceのデフォルトのショップページレイアウトをカスタマイズすることはとても重要なのです。
なぜWooCommerceショップページをカスタマイズする必要があるのか？
すべての商品が棚に無造作に散らばっている実店舗に入ることを想像してみてほしい。看板も、カテゴリーも、目玉商品もない。きっとすぐに出て行ってしまうだろう。
多くの買い物客がデフォルトのWooCommerceショップページに辿り着いた時に経験するのはまさにこれです。それは、無地のグリッドにすべての製品を表示し、コンテキストや方向性がほとんどありません。これは高い直帰率と販売機会を逃すことにつながります。
ショップページをカスタマイズする
- 顧客が欲しいものを見つけやすくすることで、ユーザー・エクスペリエンス（UX）を向上させる。
- ベストセラー、セール、利益率の高い商品を強調することでコンバージョンを増やす
- キーワードが豊富なコンテンツとスキーママークアップを追加することで、SEOを改善する。
- より良いナビゲーションと視覚的階層を提供することで、直帰率を下げる
- 証言、レビュー、ユーザー生成コンテンツでブランドの信頼を築く
最適化されたWooCommerceショップのレイアウトは、訪問者を購入者に変えるための重要な要素です。
WordPressでWooCommerceのショップページをカスタマイズする方法
WordPressでショップページをカスタマイズする方法はいくつかあります。WooCommerceプラグインやページビルダーを使ったり、ゼロからカスタマイズすることもできます。
このチュートリアルはできるだけシンプルにしたいので、WooCommerceページをカスタマイズする最も簡単な方法の2つに焦点を当てます。
最初の方法では、使いやすくカスタマイズオプションが満載の強力なWordPressウェブサイトビルダー・プラグインを使用します。次に、WooCommerceカスタマイザーを使ってショップページのレイアウトを変更する方法をご紹介します。
方法1：SeedProdを使ってWooCommerceのショップページをカスタマイズする
最初の方法として、SeedProdを使用してオンラインストアにカスタマイズを追加します。
SeedProdは、100万人以上のユーザーを持つWordPressのための最高のウェブサイトビルダーです。カスタムWordPressテーマ、高コンバージョンのランディングページ、レスポンシブWebサイトレイアウトをコードなしで作成できます。
この強力なプラグインは、WooCommerceとの統合でオンラインストア全体を作成することもできます。その結果、数クリックでWooCommerceのショップページ、商品ページ、ショッピングカート、チェックアウトなどを作成し、カスタマイズすることができます。
SeedProdには、あなたのウェブサイトを作成するための150以上のプロフェッショナルなテーマとテンプレートが用意されています。そこから、使いやすいコンテンツブロックやセクションを使ってデザインをカスタマイズすることができます。
SeedProdを使用してWooCommerceショップページをカスタマイズするには、以下の手順に従ってください。
ステップ1.SeedProdウェブサイトビルダーをインストールする
最初のステップは、SeedProdウェブサイト・ビルダー・プラグインをダウンロードすることです。
注：SeedProdはシンプルなランディングページを構築するための無料版を提供しています。しかし、私たちが必要とするWooCommerce機能にはSeedProd Eliteプランを使用します。
次に、WordPressウェブサイトにSeedProdをインストールする必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
SeedProdをインストールし、有効化した後、SeedProd " 設定に行き、プラグインのライセンスキーを入力してください。
ライセンスキーは、SeedProdのウェブサイトにログインし、「ダウンロード」セクションからコピーすることで見つけることができます。
次のステップに進む前に、ライセンスキーを入力し、[Verify Key]ボタンをクリックします。
ステップ2.カスタムWooCommerceテーマを作成する
SeedProdのテーマビルダー機能を使ってWooCommerceのショップページをカスタマイズします。既存のWordPressテーマを上書きし、あなたのカスタマイズに置き換えます。
WordPressのダッシュボードからSeedProd " Theme Builderに アクセスして見つけることができます。
SeedProdでeコマーステーマを作成するには2つの方法があります：
- テーマの各部分（テンプレート）を個別に作成する
- WordPressのテーマテンプレートは、あらかじめ用意されています。
このチュートリアルでは、WooCommerceウェブサイトのすべての部分を自動的に作成する2番目のオプションを使用します。
画面上部のテーマボタンをクリックすると、SeedProdのテーマテンプレートギャラリーが起動します。オンラインショップ用のデザインなど、多くのテーマから選ぶことができます。
このチュートリアルでは「家具店」をテーマにします。
テーマをインポートするには、サムネイルにカーソルを合わせてチェックマークアイコンをクリックします。
下のスクリーンショットにあるように、SeedProdはあなたのテーマのテンプレートをすべて自動的に作成します：
SeedProdのドラッグ＆ドロップビルダーで各テンプレートをカスタマイズすることができます。ステップ3でショップページテンプレートのカスタマイズ方法をご紹介します。
ステップ3.WooCommerceショップページをカスタマイズする
SeedProdでWooCommerceショップページをカスタマイズするには、'ショップページ'テンプレートにカーソルを合わせ、デザイン編集リンクをクリックしてください。
リンクをクリックすると、ショップページのテンプレートがSeedProdのビジュアルドラッグアンドドロップページビルダーで開きます。
左側には、ページに追加できるブロックとセクションがあります。右側には、あなたのページがリアルタイムでどのように見えるかのプレビューが表示されます。
あなたのショップページには、デフォルトで全商品のリストが表示されます。しかし、新しいレイアウト、コンテンツブロック、セクションを追加することで簡単に変更することができます。
例えば、セールやプロモーションを紹介するスクロールバナーを追加したいとします。その場合、画像カルーセルブロックの上にドラッグし、カスタムバナー画像をアップロードすることができます。
カルーセルは、ブロックの設定でダークまたはライトのテーマに変更したり、スライダーを自動再生したり、画像のキャプションを表示したりとカスタマイズすることができます。
目玉商品や売れ筋商品を強調したい場合はどうすればいいでしょうか？そのためには、ページに新しいセクションを追加し、WooCommerceブロックパネルまでスクロールダウンし、ベストセラー商品ブロックをページにドラッグします。
このブロックは、売れ筋商品を均一なグリッドで表示します。
この新しいページ・セクションにカスタム背景色を与えることで、より目立たせることができます。
次に、ベストセラー商品ブロックの詳細設定で、色、タイポグラフィ、カートに追加ボタンを変更することができます。
SeedProdのWooCommerceブロックを使用して、商品をカテゴリー別に表示することもできます。そのためには、Product Gridsブロックの上にドラッグし、'Query Type'をCustom Queryに変更し、Select by Categoryオプションをクリックします。
そこから、商品グリッドに含めるカテゴリーを選択できます。
ショップページに追加できる他のブロックには、以下のようなものがあります：
- 信頼と信用を高める証言
- カウントダウン・タイマーで販売の緊急性を高める
- よくある質問を表示するアコーディオン
- ユーザーが作成したコンテンツを表示するためのFacebookやTwitterの埋め込み
WooCommerceショップページのタイトルも簡単に変更できます。
ショップページが完成したら、画面右上の緑色の保存ボタンをクリックしてください。
同じ手順でWooCommerceストアの他の部分をカスタマイズすることができます。どのテーマテンプレートでも「デザインの編集」をクリックし、レイアウトとスタイリングをあなたのブランドに合うようにカスタマイズするだけです。
ステップ4.カスタムショップページを公開する
WooCommerceサイトが思い通りになったら、いよいよ本番です。これを行うには、SeedProd " Theme Builderに 移動し、右上隅にある'Enable SeedProd Theme'トグルを'Yes'の位置にします。
あなたのウェブサイト上でWooCommerceショップページをプレビューすることができます。
方法 2: テーマカスタマイザーを使ってWooCommerceショップページをカスタマイズする
サードパーティビルダーを使用したくない場合、WooCommerceにはWordPressカスタマイザーによる基本的なカスタマイズオプションが含まれています。
表示されるカスタマイズ・オプションは、ウェブサイトで使用しているWordPressテーマによって異なります。このガイドでは、デフォルトのTwenty Twenty-Twoテーマを使用しています。
カスタマイザーでショップページをカスタマイズするには、WordPressダッシュボードから外観 " カスタマイズを クリックします。そこから WooCommerce " Product Catalogをクリックし、カスタマイズオプションを表示します。
次に、「ショップページの表示」ドロップダウンメニューをクリックし、レイアウトを選択します。
例えば、「カテゴリーを表示」を選択すると、ショップページに商品カテゴリーだけを表示することができます。
また、「商品を表示」を選択して、商品のみを表示することもできます。
また、「カテゴリーと商品を表示」オプションで、最初に商品カテゴリーを表示し、次に商品のグリッドを表示することもできます。
さらに、以下のような方法で商品を表示することもできる：
- 人気
- 平均評価
- 直近
- 価格
また、各ページに表示する行や行ごとの商品数を選択することもできます。
デザインに満足したら、変更を公開することを忘れないでください。WooCommerceカスタマイザーを使ってスタイリングしたショップページのプレビューです。
よくある質問WooCommerceショップページのカスタマイズ
SeedProd- WooCommerceを統合したコード不要のドラッグ＆ドロップビルダー
WooCommerceCustomizer- WordPressカスタマイザーでレイアウトを直接変更できる
ElementorまたはDivi（オプション） - WooCommerceをサポートするその他のビジュアルページビルダー
この記事がWooCommerceショップページのカスタマイズ方法を学ぶのにお役に立てれば幸いです。
ご覧のように、SeedProdは、デザインの経験やコードを必要とすることなく、ユニークで使いやすいWooCommerceサイトを超簡単に作成することができます。指をさしてクリックするだけの簡単な作業で、潜在顧客が喜ぶような素晴らしい結果が得られます。
WooCommerceの売上を伸ばす準備はできていますか？
WooCommerceのコンバージョントラッキングの設定方法については、こちらのガイドもお勧めです。また、WooCommerceのベストアフィリエイトプラグインについての記事もご覧ください。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
