WooCommerceのカテゴリページの見た目を変更しようとしたとき、壁にぶつかりました。レイアウトを移動したり、画像を追加したり、サイトの他の部分と統一感のあるデザインにしたかったのですが、簡単な方法がありませんでした。
WooCommerceにはデフォルトのカテゴリページレイアウトがありますが、カスタマイズ向けではありません。テーマファイルを編集することに慣れていない限り、ブロックをドラッグしたり独自のスタイルを追加したりすることはできません。私は慣れていません。
このガイドでは、コードなしで、レイアウトの調整からカスタムWooCommerceカテゴリテンプレートの設計まで、WooCommerceの製品カテゴリページをカスタマイズおよび編集する方法を説明します。
学べること：
- カスタムWooCommerceカテゴリレイアウトの作成方法
- カテゴリ固有の変更のために編集するテンプレート
- バナー、お客様の声などを追加するためのヒント
- ショップページに製品カテゴリを表示する2つの方法
WooCommerce製品カテゴリページをカスタマイズする理由
WooCommerceのカテゴリページをカスタマイズするには、いくつかの理由があります：
- 売上向上： 売上の約70％はカテゴリページから来ており、ビジネスの成功に直接貢献しています。買い物客のニーズに合わせたカスタムカテゴリページを作成することで、高いコンバージョン率につながる可能性があります。
- SEO改善： カテゴリページを最適化することで、検索結果でのランキングを向上させることができます。多くのオンラインストアではカテゴリページに最小限のコンテンツしかありませんが、これは、ターゲットオーディエンスが検索しているキーワードに対して製品カテゴリとサブカテゴリを最適化する理想的な機会です。
- 注意を引く： 検索エンジンは、特定の検索結果に焦点を当てるため、ショップページよりも製品カテゴリページにユーザーを誘導することがよくあります。これらのページをユーザー生成コンテンツ、優れた製品画像、レビューでカスタマイズして注意を引き、買い物客にチェックアウトを促すことができます。
最終的に、WooCommerceで製品カテゴリページをカスタマイズすることで、買い物客により良いサービスを提供し、検索エンジンのランキングを改善し、売上を伸ばすことができます。
カテゴリページをカスタマイズする方法を示す前に、WooCommerceストアにカテゴリページを追加する方法を見てみましょう。
WooCommerceに製品カテゴリを追加する方法
WooCommerceに製品カテゴリページを追加するのは非常に簡単です。WordPressダッシュボードから製品 » カテゴリに移動すると、いくつかの入力フィールドが表示されます。
必要なだけ多くのカテゴリを追加できますが、製品ページにカテゴリデータを表示しやすくするために、次の情報を入力することを忘れないでください：
- 名前
- カテゴリのスラッグ
- 親カテゴリ
- 説明
- 表示タイプ
- サムネイル
オンラインストアにカテゴリを追加したら、カテゴリページを作成してカスタマイズする準備が整いました。
まず、SeedProdを使用してWooCommerceでカスタム製品カテゴリページを作成する方法を示します。その後、WooCommerceで製品カテゴリを表示するいくつかの方法を共有します。
WooCommerceで製品カテゴリページをカスタマイズおよび編集する方法
WooCommerceはカテゴリページを表示するためのいくつかの方法を提供しますが、実際のレイアウトやデザインを細かく制御することはできません。WooCommerceで商品カテゴリページのレイアウトを編集したい場合は、視覚的なビルダーであるSeedProdを使用することを強くお勧めします。
SeedProdはWordPress向けの最高のウェブサイトビルダーです。100万以上のアクティブインストール数を誇り、コードなしでカスタムWordPressテーマ、レイアウト、ランディングページを作成する最も簡単な方法です。
また、高速で軽量であり、WooCommerceを完全にサポートしているため、簡単なドラッグ＆ドロップビルダーでオンラインストア全体を作成できます。
SeedProdでカスタムカテゴリページを作成するには、以下の手順に従ってください。
ステップ1. SeedProdウェブサイトビルダーのインストールと有効化
最初のステップは、SeedProdウェブサイトビルダーをダウンロードすることです。
注意: SeedProdには無料版がありますが、WooCommerce機能にはSeedProd Eliteプランを使用します。
次に、プラグインの.zipファイルをWordPressウェブサイトにインストールして有効化します。この手順でヘルプが必要な場合は、WordPressプラグインのインストール方法の手順に従ってください。
SeedProdのインストールと有効化の後、SeedProd » 設定に移動し、ライセンスキーを貼り付けます。
ライセンスキーは、SeedProdウェブサイトにログインし、ダウンロードタブからコピーすることで見つけることができます。
キーの検証ボタンをクリックすると、カスタムWooCommerceカテゴリページのセットアップが完了します。
ステップ2. WooCommerceテーマの作成
SeedProdは、柔軟なWooCommerceカテゴリページビルダーであり、完全にカスタムなWooCommerceカテゴリレイアウトを2つの方法で作成できます。
- テーマビルダー – テーマビルダーは現在のテーマをオーバーライドし、ビジュアルエディターですべてのウェブサイトの部分をカスタマイズできます。
- ランディングページビルダー – ランディングページビルダーを使用すると、現在のテーマを維持し、ドラッグ＆ドロップエディターでカスタマイズできる個々のランディングページを作成できます。
WooCommerceストアのすべてのページを自動的に作成するために、テーマビルダーオプションを使用します。
WooCommerceテーマをセットアップするには、SeedProd » テーマビルダーに移動します。
通常、このページにはテーマを構成するテンプレートのリストが表示されます。今のところ、グローバルCSSテンプレートのみが表示されます。
SeedProdの素晴らしい点は、150以上のモバイル対応のランディングページとテーマテンプレートが付属していることです。これにより、WooCommerceウェブサイトのデザインをゼロから始める必要がありません。
テーマボタンをクリックすると、SeedProdの現在のWordPressテーマテンプレートのリストが表示されます。このリストには定期的に新しいテンプレートが追加されており、その多くはオンラインストア向けに調整されています。
たとえば、Bicycle Shopテーマは、自転車やサイクリングアクセサリーを販売するストアに適しています。
テーマを選択するには、テーマの上にカーソルを合わせ、チェックマークアイコンをクリックします。
テーマをインポートすると、SeedProd はテーマデモのすべてのパーツを生成します。この例では、以下のテーマテンプレートが含まれます。
- 商品アーカイブ：すべての商品の完全なアーカイブ。
- 商品ページ：個々の商品の詳細を表示するスペース。
- ショップページ：カスタマイズ可能なストアフロントページ。
- 単一ページ：コンテンツ（会社概要や連絡先情報など）用の個々のページ。
- ブログインデックス、アーカイブ、検索：ブログ投稿、検索結果、投稿アーカイブを表示するページ。
- ホームページ：ウェブサイトのフロントページ。
- サイドバー：カスタマイズ可能なウィジェット対応エリア。
- フッター：カスタムリンク、コンテンツ、著作権情報用のスペース。
- ヘッダー：ロゴやナビゲーションメニュー用のスペース。
注意：テーマの個々のパーツを「テンプレート」と呼ぶことがよくあります。
各テーマテンプレートをクリックすると、SeedProd のドラッグ＆ドロップエディターで開かれ、コンテンツとデザインをカスタマイズできます。
このチュートリアルで重要なテーマテンプレートは、商品アーカイブです。ユーザーがショップでカテゴリをクリックすると、その商品のカテゴリの商品アーカイブが表示されます。
WooCommerce の商品カテゴリページをカスタマイズするには、このテンプレートを開く必要があります。テンプレートにマウスカーソルを合わせ、デザインを編集リンクをクリックしてビジュアルエディターで開きます。
ステップ 3. 商品カテゴリページテンプレートのカスタマイズ
商品アーカイブテンプレートを開くと、2列のレイアウトが表示されます。左側には、ページに追加できるブロックとセクションがあります。右側には、デザインのライブプレビューがあります。
ページにはすでに 2 つのブロックがあるはずです：
- アーカイブタイトル
- アーカイブ商品
アーカイブタイトルブロックは、各カテゴリの正しい見出しを自動的に表示するのに役立ちます。テンプレートファイルを編集せずに、WooCommerce 商品カテゴリのデザインをパーソナライズする簡単な方法です。
たとえば、ストアで「黒い自転車」カテゴリをクリックすると、表示されるページの見出しは「カテゴリ：黒い自転車」となります。クリックするカテゴリによって、見出しは自動的に変更されます。
同様に、アーカイブ商品ブロックは SeedProd の WooCommerce テンプレートタグの 1 つです。このブロックは、特定のカテゴリの商品グリッドを表示します。
前の例を使用すると、「黒い自転車」カテゴリをクリックした場合、黒い自転車のみを表示する商品グリッドが表示されます。
どちらのブロックのカスタマイズも簡単です。ブロックをクリックして、左側の設定パネルでスタイルを調整するだけです。
たとえば、アーカイブタイトルのサイズ、配置、見出しレベルを変更できます。次に、[高度な設定] タブで、フォント、色、間隔、影などを調整できます。
アーカイブ商品設定パネルでは、列、ページネーション、クエリ、アイテム数などを変更できます。[高度な設定] タブでスタイルを変更することもできます。
さらに、SeedProd のブロックやセクションを使用して、商品カテゴリページ全体のレイアウトを簡単に変更できます。
例えば、画像ブロックをドラッグして、目を引くバナー画像を追加できます。その後、現在実行中のセールやプロモーションにリンクできます。
過去の顧客からのお客様の声を追加して、購入者にあなたの製品が最良の選択肢であると確信させることもできます。
この例では、アーカイブタイトルと製品ブロックを、幅広と幅狭の2列セクションにドラッグしました。その後、幅狭の列に「お客様の声」ブロックを使用しました。
可能性はほぼ無限です。
カテゴリページに満足したら、右上隅にある保存ボタンをクリックすることを忘れないでください。その後、他のWooCommerceテーマも同様の方法でカスタマイズできます。
ステップ4. WooCommerceテーマを発行する
新しいデザインを公開する準備ができたら、SeedProd » Theme Builderページに移動します。次に、右上隅にある「SeedProdテーマを有効にする」トグルをクリックして、「オン」の位置にします。
これで、製品カテゴリページをプレビューして、カスタマイズを確認できます。
WooCommerceショップページに製品カテゴリを表示する方法
WooCommerceで製品カテゴリページをカスタマイズする方法がわかったので、次にショップページに表示する方法を説明します。
SeedProdでショップページに製品カテゴリを表示する
SeedProdを使用してWooCommerceショップページに製品カテゴリを表示したい場合は、SeedProd » Theme Builderに移動し、ショップページテンプレートを開きます。
そこから、製品グリッドブロックの設定を開き、クエリタイプをカスタムクエリに変更します。「クエリ属性」の見出しの下にある「カテゴリで選択」をクリックします。次に、カテゴリボックスで、ページに表示したいカテゴリをクリックします。
注意: Macの場合はコマンドキー、Windowsの場合はCtrlキーを押しながらクリックすると、複数のカテゴリを選択できます。
変更を保存するには、保存をクリックします。
WooCommerceでショップページに製品カテゴリを表示する
WooCommerceのデフォルト設定でショップページに製品カテゴリを表示するには、外観 » カスタマイズ » WooCommerce » 製品カタログに移動します。
次に、「ショップページ表示」の見出しの下で、「カテゴリを表示」オプションを選択します。
よくある質問
WooCommerceをカスタマイズするその他の方法
製品カテゴリページのカスタマイズは、ストアを微調整するための多くの方法の1つにすぎません。その他のWooCommerceのカスタマイズについては、次のガイドを参照してください。
- WooCommerce追加情報タブをカスタマイズする方法
- WooCommerceにカート表示ボタンを追加する方法
- WooCommerceでショップページタイトルを変更する方法
- WooCommerceで魅力的な商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品をどのように表示するか
- WooCommerceで商品カテゴリとタグを表示する方法
- WooCommerceで商品概要を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceのカート表示が機能しない問題を修正する方法
- WooCommerceで在庫切れの商品を非表示にする方法
これで完了です！
この記事が、WooCommerceで製品カテゴリページをカスタマイズする方法を学ぶのに役立ったことを願っています。
このガイドも役立つかもしれません。WooCommerceストアのスピードアップ方法。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
