WooCommerceのショップページを簡単にカスタマイズする方法をお探しですか？
WooCommerceは、全オンラインストアの29.35%以上を支えており、WordPressウェブサイトオーナーに人気のeコマースプラットフォームとなっています。しかし、開発スキルがない場合、WooCommerceストアをユニークなものにするのは簡単ではありません。
あなたのように聞こえますか？ご心配なく。
この記事では、コードを一行も書かずにWooCommerceのショップページをカスタマイズする方法を紹介します。
WooCommerceショップページとは？
WooCommerceのショップページは、潜在的な顧客にあなたの商品を表示するアーカイブページです。WooCommerceはあなたの商品に関する詳細を取得します：
- 商品画像
- 製品タイトル
- 製品カテゴリー
その情報は、ショップページのグリッドやリストに表示されます。
なぜWooCommerceのショップページをカスタマイズする必要があるのか？
店に入ったとき、目に入るのは乱雑に並べられた商品だけだと想像してみてほしい。探しているものを見つけるのが難しいので、立ち去ってしまう可能性が高い。
オンラインショップも同じです。ショップのページに、整理されていない商品が壁一面に表示されていたら、買い物客は足が遠のき、次のサイトに移ってしまうだろう。
これがデフォルトのWooCommerceショップページレイアウトの問題点です。シンプルな商品リストしか表示されないため、訪問者が欲しい商品を見つけるのが難しいのです。
幸いなことに、WooCommerceのショップページを編集する方法があります：
- ユニークなデザインでライバルに差をつける
- カテゴリー別に商品を整理することで、顧客体験を向上
- 目玉商品、セール商品、売れ筋商品を表示することで、売上をアップ
- 検索数の多いキーワードをターゲットにしたコンテンツを追加することで、SEOを向上させる。
- 証言、星評価、ユーザー生成コンテンツ（UGC）を表示することで信頼を高める。
コンバージョンの高いWooCommerceのショップページをデザインする鍵は、商品を購入しやすいユーザーフレンドリーなデザインを作ることです。
WordPressでWooCommerceのショップページをカスタマイズする方法
WordPressでショップページをカスタマイズする方法はいくつかあります。WooCommerceプラグインやページビルダーを使ったり、ゼロからカスタマイズすることもできます。
このチュートリアルはできるだけシンプルにしたいので、WooCommerceページをカスタマイズする最も簡単な方法の2つに焦点を当てます。
最初の方法では、使いやすくカスタマイズオプションが満載の強力なWordPressウェブサイトビルダー・プラグインを使用します。次に、WooCommerceカスタマイザーを使ってショップページのレイアウトを変更する方法をご紹介します。
方法1：SeedProdでカスタムショップページを作成する
最初の方法として、SeedProdを使用してオンラインストアにカスタマイズを追加します。
SeedProdは、100万人以上のユーザーを持つWordPressのための最高のウェブサイトビルダーです。カスタムWordPressテーマ、高コンバージョンのランディングページ、レスポンシブWebサイトレイアウトをコードなしで作成できます。
この強力なプラグインは、WooCommerceとの統合でオンラインストア全体を作成することもできます。その結果、数クリックでWooCommerceのショップページ、商品ページ、ショッピングカート、チェックアウトなどを作成し、カスタマイズすることができます。
SeedProdには、あなたのウェブサイトを作成するための150以上のプロフェッショナルなテーマとテンプレートが用意されています。そこから、使いやすいコンテンツブロックやセクションを使ってデザインをカスタマイズすることができます。
SeedProdを使用してWooCommerceショップページをカスタマイズするには、以下の手順に従ってください。
ステップ1.SeedProdウェブサイトビルダーをインストールする
最初のステップは、SeedProdウェブサイト・ビルダー・プラグインをダウンロードすることです。
注：SeedProdはシンプルなランディングページを構築するための無料版を提供しています。しかし、私たちが必要とするWooCommerce機能にはSeedProd Eliteプランを使用します。
次に、WordPressウェブサイトにSeedProdをインストールする必要があります。WordPressプラグインのインストール方法については、こちらをご覧ください。
SeedProdをインストールし、有効化した後、SeedProd " Settingsに行き、プラグインのライセンスキーを入力してください。
ライセンスキーは、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のショップページをカスタマイズするためにもっと簡単な方法が必要な場合は、組み込みのWooCommerceカスタマイザーを使って行うことができます。カスタマイザーはWordPressライブテーマカスタマイザーを使用して、ライブプレビューでリアルタイムにショップページを編集します。
表示されるカスタマイズ・オプションは、ウェブサイトで使用しているWordPressテーマによって異なります。このガイドでは、デフォルトのTwenty Twenty-Twoテーマを使用しています。
カスタマイザーでショップページをカスタマイズするには、WordPressダッシュボードから外観 " カスタマイズを クリックします。そこから WooCommerce " Product Catalogをクリックし、カスタマイズオプションを表示します。
次に、「ショップページの表示」ドロップダウンメニューをクリックし、レイアウトを選択します。
例えば、「カテゴリーを表示」を選択すると、ショップページに商品カテゴリーだけを表示することができます。
また、「商品を表示」を選択すれば、商品のみを表示することもできます。
また、「カテゴリーと商品を表示」オプションで、最初に商品カテゴリーを表示し、次に商品のグリッドを表示することもできます。
さらに、以下のような方法で商品を表示することもできる：
- 人気
- 平均評価
- 直近
- 価格
また、各ページに表示する行や行ごとの商品数を選択することもできます。
デザインに満足したら、変更を公開することを忘れないでください。WooCommerceカスタマイザーを使ってスタイリングしたショップページのプレビューです。
それだけだ！
この記事がWooCommerceショップページのカスタマイズ方法を学ぶのにお役に立てば幸いです。
ご覧のように、SeedProdは、デザインの経験やコードを必要とすることなく、ユニークで使いやすいWooCommerceサイトを超簡単に作成することができます。指をさしてクリックするだけの簡単な作業で、潜在顧客が喜ぶような素晴らしい結果が得られます。
WooCommerceの売上を伸ばす準備はできていますか？
WooCommerceのコンバージョントラッキングの設定方法については、こちらのガイドもお勧めです。また、WooCommerceのベストアフィリエイトプラグインをご紹介します。
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
