WooCommerceのカテゴリーページの見栄えを変えようとしたとき、壁にぶつかりました。いろいろなものを移動させたり、画像を追加したり、レイアウトを他のサイトと同じような感じにしたかったのですが、簡単にできる方法がありませんでした。
WooCommerceはデフォルトのカテゴリーページレイアウトを提供してくれますが、カスタマイズできるようには作られていません。テーマファイルの編集に慣れていない限り、ブロックをドラッグしたり、独自のスタイルを追加したりすることはできません。
このガイドでは、WooCommerceの商品カテゴリページをカスタマイズして編集する方法を、レイアウトの調整から独自のカスタムWooCommerceカテゴリテンプレートのデザインまで、コード不要でご紹介します。
何を学ぶか
- カスタムWooCommerceカテゴリーレイアウトの作成方法
- カテゴリー固有の変更のためにどのテンプレートを編集するか
- バナーやテスティモニアルなどを追加するためのヒント
- ショップページに商品カテゴリーを表示する2つの方法
なぜWooCommerceの商品カテゴリーページをカスタマイズするのか？
WooCommerceのカテゴリページをカスタマイズする理由はいくつかあります：
- 売上アップ：売上の約70%はカテゴリーページからもたらされており、カテゴリーページがビジネスの成功に直接貢献していることを意味します。買い物客のニーズに合わせたカスタムカテゴリーページを作成することで、高いコンバージョン率を実現することができます。
- SEOを向上させる：カテゴリーページを最適化することで、検索結果でのランキングを上げることができます。多くのオンラインショップでは、カテゴリーページのコンテンツは最小限に抑えられているため、オーディエンスが検索しているキーワードに対して商品カテゴリーやサブカテゴリーを最適化する絶好の機会です。
- 注目を集める：検索エンジンは、ショップページよりも商品カテゴリーページにユーザーを誘導することが多い。ユーザー作成コンテンツ、より良い商品画像、レビューなどでページをカスタマイズすることで、注目を集め、買い物客にチェックアウトするよう促すことができます。
最終的には、WooCommerceで商品カテゴリーページをカスタマイズすることで、買い物客により良いサービスを提供し、検索エンジンのランキングを向上させ、売上を伸ばすことができます。
カテゴリーページのカスタマイズ方法をご紹介する前に、WooCommerceストアにカテゴリーページを追加する方法を見てみましょう。
WooCommerceで商品カテゴリーを追加する方法
WooCommerceで商品カテゴリーページを追加するのはとても簡単です。WordPressのダッシュボードからProducts " Categoriesに移動すると、いくつかの入力フィールドが表示されます。
カテゴリはいくつでも追加できますが、商品ページにカテゴリデータを表示しやすくするため、以下の情報を忘れずに入力してください：
- 名称
- カテゴリー・スラッグ
- 親カテゴリー
- 説明
- 表示タイプ
- サムネイル
オンラインストアにカテゴリーを追加したら、カテゴリーページを作成してカスタマイズする準備ができました。
まず、SeedProdを使ってWooCommerceにカスタム商品カテゴリーページを作成する方法をご紹介します。その後、WooCommerceで商品カテゴリを表示するいくつかの方法をご紹介します。
WooCommerceで商品カテゴリーページをカスタマイズ・編集する方法
WooCommerceはカテゴリページを表示する方法をいくつか提供してくれますが、実際のレイアウトやデザインはあまりコントロールできません。WooCommerceで商品カテゴリページのレイアウトを編集したい場合、私の一番の提案はSeedProdのようなビジュアルビルダーを使用することです。
SeedProdはWordPressのための最高のウェブサイトビルダーです。100万以上のアクティブインストール数を誇り、カスタムWordPressテーマ、レイアウト、ランディングページをコードなしで作成する最も簡単な方法です。
また、高速かつ軽量で、WooCommerceを完全にサポートしているため、ドラッグ＆ドロップで簡単にオンラインストア全体を作成することができます。
SeedProdでカスタムカテゴリページを作成するには、以下の手順に従ってください。
ステップ1.SeedProd ウェブサイト・ビルダーをインストールし、有効化する
最初のステップは、SeedProdウェブサイトビルダーをダウンロードすることです。
注：SeedProdには無料版もありますが、ここではWooCommerce機能のためにSeedProd Eliteプランを使用します。
次に、WordPressウェブサイトにプラグイン.zipファイルをインストールし、有効化します。このステップにヘルプが必要な場合は、WordPressプラグインのインストールに関する説明に従ってください。
SeedProdをインストールし、アクティベートした後、SeedProd " Settingsに進み、ライセンスキーを貼り付けます。
ライセンスキーは、SeedProdのウェブサイトにログインし、「ダウンロード」タブからコピーすることで確認できます。
Verify Keyボタンをクリックし、WooCommerceカスタムカテゴリページを設定します。
ステップ2.WooCommerceテーマを作成する
SeedProdは柔軟なWooCommerceカテゴリページビルダーで、2つの方法でWooCommerceカテゴリレイアウトを完全にカスタムすることができます：
- テーマビルダー- テーマビルダーは現在のテーマを上書きし、ビジュアルエディターでウェブサイトのあらゆる部分をカスタマイズできます。
- ランディングページビルダー- ランディングページビルダーでは、現在のテーマを維持したまま、ドラッグ＆ドロップエディターでカスタマイズできる個別のランディングページを作成できます。
テーマビルダーオプションを使用して、WooCommerceストアのすべてのページを自動的に作成します。
WooCommerceテーマを設定するには、SeedProd " Theme Builderにアクセスしてください。
通常、このページにはテーマを構成するテンプレートのリストが表示されます。今のところ、グローバルCSSテンプレートのみが表示されます。
SeedProdの素晴らしいところは、150以上のモバイル対応ランディングページとテーマテンプレートが付属していることです。そのため、WooCommerceウェブサイトのデザインをゼロから始める必要はありません。
テーマボタンをクリックすると、SeedProdの現在のWordPressテーマテンプレートのリストが表示されます。このリストには定期的にテンプレートが追加され、その多くはオンラインショップ用に調整されています。
たとえば、自転車ショップのテーマは、自転車や自転車用アクセサリーを販売する店舗に適しています。
テーマを選択するには、テーマにカーソルを合わせ、チェックマークアイコンをクリックします。
あなたのテーマをインポートした後、SeedProdはテーマのデモからすべてのパーツを作成します。私たちの場合、以下のテーマテンプレートが含まれています：
- 製品アーカイブ：すべての製品の完全なアーカイブ。
- 商品ページ：個々の商品の詳細を表示するスペース。
- ショップページ：カスタマイズ可能なストアフロントページ。
- シングルページ：会社概要や連絡先など、コンテンツ用の個別ページ。
- ブログ・インデックス、アーカイブ、検索：ブログ記事、検索結果、記事アーカイブを表示するページ。
- ホームページ：ウェブサイトのトップページ。
- サイドバー：カスタマイズ可能なウィジェットエリア。
- フッター：カスタムリンク、コンテンツ、著作権情報のための場所。
- ヘッダー：ロゴとナビゲーションメニューのためのスペース。
注：私たちはしばしば、テーマの個々の部分を "テンプレート "と呼んでいます。
各テーマ・テンプレートをクリックすると、SeedProdのドラッグ＆ドロップ・エディターが開き、コンテンツやデザインをカスタマイズすることができます。
このチュートリアルで重要なテーマテンプレートは「商品アーカイブ」です。ユーザーがショップのカテゴリーをクリックすると、そのカテゴリーの商品アーカイブが表示されます。
WooCommerceの商品カテゴリページをカスタマイズするために開く必要があるのは、このテンプレートです。テンプレートにマウスカーソルを合わせ、デザインの編集リンクをクリックしてビジュアルエディタで開きます。
ステップ3.商品カテゴリーページのテンプレートをカスタマイズする
商品アーカイブのテンプレートを開くと、2カラムのレイアウトが表示されます。左側には、ページに追加できるブロックとセクションがあります。そして、右側にデザインのライブプレビューがあります。
あなたのページにはすでに2つのブロックがあるはずだ：
- アーカイブタイトル
- アーカイブ製品
アーカイブタイトルブロックは、各カテゴリの正しい見出しを自動的に表示するのに役立ちます。テンプレートファイルを編集することなく、WooCommerceの商品カテゴリのデザインをパーソナライズする簡単な方法です。
例えば、あなたのストアで「ブラックバイク」カテゴリーをクリックすると、表示されるページには見出しが表示されます：「カテゴリー：ブラックバイク"どのカテゴリーをクリックするかによって、見出しは自動的に変わります。
同様に、アーカイブ商品ブロックはSeedProdのWooCommerceテンプレートタグの一つです。このブロックは、特定のカテゴリの商品のグリッドを表示します。
先ほどの例で言うと、「ブラックバイク」カテゴリーをクリックすると、ブラックバイクだけを表示する商品グリッドが表示されます。
両方のブロックをカスタマイズするのは簡単です。どちらかのブロックをクリックし、左の設定パネルでスタイルを調整するだけです。
例えば、アーカイブタイトルのサイズ、配置、見出しレベルを変更できます。さらに「詳細設定」タブでは、フォント、色、間隔、影などを調整できます。
アーカイブ商品の設定パネルでは、カラム、ページネーション、クエリ、アイテム数などを変更することができます。また、Advancedタブでスタイルを変更することもできます。
さらに、SeedProdのブロックやセクションを使えば、商品カテゴリーページ全体のレイアウトを簡単に変更することができます。
例えば、画像ブロックの上にドラッグして、人目を引くバナー画像を追加することができます。そして、現在開催中のセールやプロモーションにリンクさせることができます。
また、買い物客に商品がベストな選択であることを確信させるために、過去の顧客からの声を加えることもできる。
この例では、アーカイブのタイトルと商品のブロックをドラッグして、幅の広い2カラムと狭い2カラムのセクションにしました。そして、小さい方のカラムにTestimonialsブロックを使用しています。
可能性は無限大だ。
カテゴリーページが完成したら、右上の保存ボタンを忘れずにクリックしてください。その後、WooCommerceテーマの残りの部分を同じようにカスタマイズすることができます。
ステップ4.WooCommerceテーマを公開する
新しいデザインを公開する準備ができたら、SeedProd " Theme Builder ページにアクセスしてください。そして、右上にあるEnable SeedProd Themeトグルを「on」になるまでクリックしてください。
商品カテゴリーページをプレビューして、カスタマイズした内容を確認できるようになりました。
WooCommerceのショップページに商品カテゴリーを表示する方法
WooCommerceで商品カテゴリーページをカスタマイズする方法はお分かりいただけたと思います。
SeedProdでショップページに商品カテゴリーを表示する
SeedProdでWooCommerceのショップページに商品カテゴリを表示したい場合、SeedProd " Theme Builderに 行き、ショップページテンプレートを開いてください。
そこから、Product Gridブロックの設定を開き、Query TypeをCustom Queryに変更します。クエリー属性の見出しで、"カテゴリーで選択 "をクリックします。次に、カテゴリーボックスで、ページに表示したいカテゴリーをクリックします。
注：Macの場合はcommand、Windowsの場合はctrlを押しながら複数のカテゴリーを選択することができます。
Save をクリックして変更を保存します。
WooCommerceでショップページに商品カテゴリーを表示する
WooCommerceのデフォルト設定でショップページに商品カテゴリーを表示するには、外観 " カスタマイズ " WooCommerce " 商品カタログにアクセスしてください。
次に、"ショップページの表示 "見出しの下にある "カテゴリーを表示 "オプションを選択します。
よくある質問
WooCommerceをカスタマイズするその他の方法
商品カテゴリページのカスタマイズは、あなたのストアを微調整する多くの方法の一つに過ぎません。その他のWooCommerceカスタマイズについては、以下のガイドをご覧ください：
- WooCommerceの追加情報タブをカスタマイズする方法
- WooCommerceにカートを見るボタンを追加する方法
- WooCommerceでショップページのタイトルを変更する方法
- WooCommerceで美しい商品画像ギャラリーを作成する方法
- WooCommerceの商品ページに星評価を追加する方法
- WooCommerceで関連商品を表示する方法
- WooCommerceで商品カテゴリーとタグを表示する方法
- WooCommerceで商品説明を取得して表示する方法
- WooCommerceで注目の商品を表示する方法
- WooCommerceのカートが表示されない場合の対処法
- WooCommerceで在庫切れの商品を非表示にする方法
それだけだ！
この記事がWooCommerceで商品カテゴリページをカスタマイズする方法を学ぶのにお役に立てば幸いです。
WooCommerceストアを高速化する方法については、こちらのガイドもお勧めです。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
