WooCommerceカテゴリページをカスタマイズする方法（プラグインとコーディング）

公開: 2021-06-10

カテゴリページを編集しますか？このガイドでは、プラグインを使用する場合と使用しない場合で、WooCommerceカテゴリページをカスタマイズするさまざまな方法を紹介します。

カテゴリページは通常、eコマースストアで最も見落とされ、カスタマイズされていないページの1つです。これは、通常、商品とショップページの間の階層へのブリッジとして機能するためです。ただし、ユーザーが商品を閲覧するためにカテゴリページに依存する実際的なシナリオがいくつかあるため、それを編集して最大限に活用することは理にかなっています。

WooCommerceのカテゴリページをカスタマイズするさまざまな方法を見る前に、そうすることの利点をよりよく理解しましょう。

WooCommerceカテゴリページを編集する理由

カテゴリページには、そのカテゴリに含まれるWooCommerceストアのすべての製品が表示されます。ユーザーは通常、他のページを使用して商品を探しますが、カテゴリページから商品を探す方が簡単な場合もあります。たとえば、商品の名前はわからないが、そのカテゴリはわかっている場合は、カテゴリページを使用して商品を検索する可能性があります。

その上、カテゴリページの影響を積極的に受けている場合、顧客はWebサイトに長く滞在する可能性があります。これらのページは通常見過ごされているため、カスタマイズすると、目立ち、カスタマーエクスペリエンスが向上します。

幸いなことに、WooCommerceではカテゴリページを簡単にカスタマイズできます。悪いニュースは、WooCommerceが提供するデフォルトのオプションがかなり制限されていることです。各カテゴリページの名前、スラッグ、親カテゴリ、説明テキスト、表示タイプ、サムネイルのみを編集できます。

デフォルトのカテゴリオプションは、woocommerceカテゴリページをカスタマイズします

テーマカスタマイザーを使用して他の要素を編集することもできますが、カテゴリページをまったく新しいレベルに引き上げる必要がある場合は、別の要素が必要です。

そのため、このガイドでは、WooCommerceでカテゴリページを編集し、顧客がサイトをより簡単にナビゲートできるようにするさまざまな方法を紹介します。

WooCommerceカテゴリページをカスタマイズする方法

WordPressでWooCommerceカテゴリページを簡単にカスタマイズするには、さまざまな方法があります。

ディビと
専用プラグインを使用する
プログラムで（コーディング）

このセクションでは、各方法を段階的に説明するため、ニーズに最適な方法を選択できます。

注：開始する前に、WooCommerceを正しく設定し、必要なすべてのページを作成したことを確認してください。

1.DiviでWooCommerceカテゴリページをカスタマイズする

Diviは最も人気のあるWordPressテーマの1つであり、それには正当な理由があります。たくさんの機能が付属しており、WooCommerceと完全に互換性があるため、カテゴリページをカスタマイズするのに理想的です。

このテーマには、カスタムカテゴリページテンプレートを作成できるドラッグアンドドロップビルダーが組み込まれています。このようにして、カテゴリページのテンプレートを作成し、WooCommerceストアのすべてのページで使用できます。

Diviを非常に使いやすくしているのは、ビルダーで行ったすべての変更をライブプレビューでリアルタイムに確認できることです。 Diviには、ページに多くの要素を簡単に追加するためのさまざまなモジュールも用意されており、カテゴリページを作成または編集する際の時間を大幅に節約できます。

1.1。 Diviをインストールしてアクティブ化します

Diviの使用を開始するには、最初にDiviをインストールしてアクティブ化する必要があります。 Divizipファイルは公式Webサイトからダウンロードできます。

次に、WordPressダッシュボードに移動し、 [外観]> [テーマ] > [新規追加]に移動します。

新しいテーマを追加し、woocommerceカテゴリページをカスタマイズします

[テーマのアップロード]を押して、最近ダウンロードしたDivi.zipファイルを選択してサイトにアップロードします。 アップロードしたら、[今すぐインストール]をクリックしてテーマをインストールし、インストールが完了したらアクティブにします。

Diviテーマをアクティブにすると、カテゴリページのカスタマイズに使用する組み込みのページビルダーであるDiviビルダーも自動的にインストールされます。

1.2。カスタムカテゴリページテンプレートを作成する

カスタムカテゴリページテンプレートの作成を開始するには、 Divi>テーマビルダーに移動し、[新しいテンプレートの追加]を押す必要があります。

新しいテンプレートを追加し、woocommerceカテゴリページをカスタマイズします

次に、[アーカイブページ]の下の[すべての製品カテゴリページ]チェックボックスをオンにして、[テンプレートの作成]をクリックします。

その後、追加したばかりの新しいテンプレートで[カスタムボディの追加]を選択します。 Diviを使用してまったく新しいテンプレートを作成しているため、[カスタムボディの作成]オプションも選択します。

カスタムボディを構築し、woocommerceカテゴリページをカスタマイズします

そこには3つの異なるオプションが表示されます。

テンプレートを最初から作成する
Diviライブラリのテンプレートの1つを使用し、さらにそれを使用してWooCommerceカテゴリページをカスタマイズします
既存のページのクローンを作成し、それをすべての製品カテゴリページのテンプレートとして使用します

自分に最適なオプションを選択できます。このチュートリアルでは、[最初からビルド]を選択するので、 [ビルドの開始]ボタンをクリックします。

DiviBuilderを使用してテンプレートを作成するカテゴリページレイアウトにリダイレクトされます。

テンプレートの作成を開始するには、構造を選択する必要があります。 [新しい行]で、カテゴリページに使用する行の種類を選択します。複数の行と列を追加できます。カテゴリページのヘッダーと本文には少なくとも2行が必要ですが、カテゴリページの本文にサイドバーを追加する場合は、さらに列を追加することもできます。

行を挿入カスタマイズwoocommerceカテゴリページ

行と列の数を選択した後、カテゴリページのレイアウトをさらにカスタマイズするためにDiviモジュールを追加する必要があります。

1.3。カテゴリページヘッダー

カテゴリページのヘッダーには、カテゴリページのページタイトルとブレッドクラムを追加する必要があります。

投稿タイトルを追加するには、行の「 + 」アイコンをクリックし、検索バーで投稿タイトルを検索して選択します。

さまざまな投稿タイトルオプションが表示されます。メタ画像と注目画像を追加できますが、このチュートリアルでは使用しないため、[要素]セクションの[メタ画像と注目画像を表示]オプションを無効にします。

投稿タイトルコンテンツタブは、woocommerceカテゴリページをカスタマイズします

Webサイトをプレビューすると動的な投稿のタイトルが自動的に表示されるため、ここにタイトルを追加する必要はありません。さらに、[デザイン]タブから、ヘッダーの背景色とフォントを編集できます。

CSS ID、クラス、カスタムCSS、スクロール効果などを追加するための高度なオプションもいくつかあります。必要な変更をすべて行ったら、「チェックマーク」アイコンをクリックして変更を保存します。

投稿タイトル詳細タブカスタマイズwoocommerceカテゴリページ

1.3.1 –ブレッドクラムモジュールを追加する

カテゴリページでナビゲーションを追加するには、ブレッドクラムモジュールも必要になるため、[ + ]アイコンをもう一度クリックして新しいモジュールを追加し、「 WooBreadcrumb 」を検索します。

次に、[コンテンツ]タブの[製品]セクションで[この製品]オプションを選択します。 これにより、顧客が見たい商品カテゴリの動的タイトルが追加されます。

ブレッドクラムコンテンツタブは、woocommerceカテゴリページをカスタマイズします

もう一度、[デザイン]タブと[詳細設定]タブを使用して必要な変更を加え、最後に「チェックマーク」アイコンをクリックして変更を保存します。

1.4。カテゴリページ本文

ヘッダーの編集が完了したら、カテゴリページの本文に移動できます。行をまだ含めていない場合は、緑色の「 + 」アイコンをクリックして、追加する行のタイプを選択します。その後、ショップのすべての商品が含まれているため、ここにショップモジュールを追加する必要があります。

行の「 + 」アイコンを押して、ショップモジュールを検索します。

クリックすると、カテゴリページで製品のオプションを構成できるようになります。

[コンテンツ]タブでは、カテゴリページのすべての要素を編集できます。 [現在のページを使用]を有効にして、顧客がオンラインストアで選択した特定の製品カテゴリの製品を表示できるようにしてください。

ショップコンテンツタブは、woocommerceカテゴリページをカスタマイズします

これで、ページの他の表示要素を編集するだけで済みます。たとえば、ここから、ページごとに表示する列または製品の数とページ番号を追加できます。さらに、[デザイン]タブと[詳細設定]タブから、製品のフォントや価格テキストなどを編集することもできます。 必要な変更をすべて行ったら、「チェックマーク」アイコンを押して変更を保存します。

Divi Builderを使用して、行を追加したり、フッター領域をカスタマイズしたりできます。すべて完了したら、画面の右下にあるページテンプレートの本文を保存することを忘れないでください。

変更を保存した後、Divi Builderを閉じると、ThemeBuilderダッシュボードにリダイレクトされます。テンプレートへの変更を保存するには、ここでも[変更を保存]をクリックします。

テーマビルダーの変更を保存してwoocommerceカテゴリページをカスタマイズ

これで、任意の製品カテゴリのカテゴリページをプレビューすると、すべての変更を確認できます。

2.プラグインを使用してWooCommerceカテゴリページをカスタマイズします

Diviを使用せず、現在のテーマを置き換えたくない場合、WooCommerceカテゴリページを編集するための最良のオプションは、専用のWordPressプラグインを使用することです。

このチュートリアルでは、無料で使いやすく、数回クリックするだけでカテゴリページをカスタマイズできるCategoryEditorプラグインを使用します。 このツールは主にカテゴリページの説明領域に焦点を当てており、そのためのエディタを提供します。このようにして、製品カテゴリの説明を編集して、カテゴリページに表示できます。

カテゴリエディタはwoocommerceカテゴリページをカスタマイズします

このプラグインの使用を開始するには、WordPressダッシュボードで[プラグイン]> [新規追加]に移動します。次に、カテゴリエディタを検索し、[今すぐインストール]をクリックして、プラグインをアクティブにします。

プラグインをWordPressリポジトリから直接ダウンロードして手動でインストールすることもできます。このプロセスについて詳しく知りたい場合は、プラグインを手動でインストールする方法に関するガイドをご覧ください。

カテゴリエディタをアクティブにした後、 [製品]> [カテゴリ]に移動し、説明をカスタマイズするカテゴリで[編集]を押します。

カテゴリの編集woocommerceカテゴリページのカスタマイズ

ここでは、テキストフォント、見出し、リスト、および配置を変更できるテキストエディタが説明領域に追加されていることがわかります。さらに、カテゴリ画像を追加し、[テキスト]タブを使用して、少しのコードでカテゴリの説明をカスタマイズできます。

必要な変更をすべて行ったら、[更新]を押して、カテゴリページで変更をプレビューします。

カテゴリエディタの例本体はwoocommerceカテゴリページをカスタマイズします

これが、プラグインを使用してWooCommerceカテゴリページをカスタマイズする方法です。ただし、より多くのカスタマイズオプションが必要で、コーディングスキルがある場合は、独自のソリューションをコーディングできます。それを行う方法を見てみましょう。

3.WooCommerceカテゴリページをプログラムでカスタマイズする

Diviを使用せず、サードパーティのツールをインストールしたくない場合は、独自のソリューションをコーディングすることをお勧めします。カテゴリページをプログラムで編集する主な利点は、柔軟性が向上することです。

経験豊富な開発者でなくても、WooCommerceはプロセスを支援するためにいくつかのショートコードとショートコード属性を提供します。ショートコードに慣れていない場合は、このガイドをチェックして、ショートコードの使用方法をよりよく理解してください。

これらのショートコードを使用すると、任意のページに製品カテゴリを表示できます。

[ product_category ] –特定の製品カテゴリを表示します
[ product_categories ] –ストアのすべての商品カテゴリを表示します

それらを製品カテゴリ属性と一緒に使用して、製品カテゴリの表示方法を変更できます。たとえば、最上位の製品カテゴリを表示し、サブカテゴリを非表示にする場合は、次のショートコードを使用できます。

[ product_categories number="0" parent="0" ]

ページをプレビューすると、トップレベルのカテゴリが表示されます。

さらに、さまざまなコードスニペットを使用して、WooCommerceのカテゴリページを編集することもできます。最も一般的な例の1つは、カスタムカテゴリを作成することです。

その方法を説明する前に、WordPress Webサイトをバックアップし、子テーマを使用していることを確認してください。一部のコアテーマファイルを変更するため、問題が発生した場合はサイトが破損する可能性があります。そのため、問題を回避するために復元できるバックアップバージョンを用意することを常にお勧めします。

カスタムカテゴリページタイトルを作成する

コードスニペットを使用してカスタムカテゴリページタイトルを作成するには、 [外観]> [テーマエディター]に移動し、次のコードスニペットを子テーマのfunctions.phpファイルに追加する必要があります。

 add_filter( 'woocommerce_page_title', 'QL_customize_woocommerce_page_title', 10, 1 );
function QL_customize_woocommerce_page_title( $page_title) {
 // Custom title for the product category 't-shirts'
 if ( is_product_category('t-shirts') ) { $page_title = 'Something';
 }
 // Custom title for the product category 'hoodies'
 elseif ( is_product_category('hoodies') ) {
 $page_title = 'Something else'; }
 return $page_title;
}

スニペットの詳細については、このサイトを確認してください。

このようにして、カテゴリページにデフォルトのカテゴリタイトルの代わりにカスタムタイトルを表示できます。

製品カテゴリページの背景を変更する

同様に、コードスニペットを使用して製品カテゴリページの背景を変更することもできます。次のコードスニペットをfuntions.phpファイルにもう一度貼り付けるだけです。

 if (is_product_category()){ add_action( 'wp_head' , function () { ?> <style> .woocommerce.post-type-archive-product { background-image:none !important; } .woocommerce.single-product { background-image:none !important; } </style> <?php }); }

このコードは、要素が製品カテゴリであるかどうかを確認し、背景の色を変更します。詳細については、このサイトをチェックしてください。

これらはほんの一例ですが、できることはもっとたくさんあります。このスニペットをベースとして、独自のカスタムコードを追加して、ストアのカテゴリページをカスタマイズしてください。

ボーナス：カテゴリページにクイックビューを追加

WooCommerceカテゴリページをカスタマイズするもう1つの興味深いオプションは、クイックビュー機能も追加することです。クイックビューを使用すると、顧客は実際の製品ページを開かなくても、それぞれのカテゴリページで製品の詳細を表示できます。これにより、買い物客がオンラインストアを閲覧しているときのユーザーエクスペリエンスが向上します。

カテゴリページにクイックビュー機能を追加するには、 WooCommerce DirectCheckoutプラグインを使用します。これは、WooCommerceに最適なチェックアウトプラグインの1つであり、コンバージョン率と売り上げを伸ばすのに役立つ多くの機能が付属しています。

woocommerceダイレクトチェックアウトカスタマイズwoocommerceカテゴリページ

これはフリーミアムプラグインですが、カテゴリページにクイックビューを追加するには、無料バージョンとプレミアムプランのいずれかをインストールする必要があります。そのため、まずこのページにアクセスして、WooCommerce DirectCheckoutをインストールしてアクティブ化します。

プラグインをインストールしてアクティブ化したら、WordPressダッシュボードのWooCommerce> Direct Checkout> Archivesに移動します。 ドロップダウンから[はい]を選択して[クイックビューの追加]ボタンオプションをアクティブにし、変更を保存します。

フロントエンドからサイトを確認すると、[今すぐ購入/カートに追加]ボタンのすぐ横に新しいボタンが表示されます。たとえば、ストアフロントテーマを使用する場合、ボタンは次のようになります。

クイックビューアイコンは、woocommerceカテゴリページをカスタマイズします

クイックビューボタンをクリックすると、ポップアップが開き、タイトル、価格、説明など、製品に関するすべての最も重要な情報が表示されます。このようにして、顧客は商品ページを開かなくてもカートに商品を直接追加できます。

クイックビューボタンとポップアップをさらにカスタマイズできます。その方法の詳細については、WooCommerceでクイックビューを追加する方法に関するガイドをご覧ください。

カテゴリページを刷新するための推奨事項

前述のように、カテゴリページの全体的なデザインとインターフェイスは、オンラインストアを成長させるために非常に重要です。購入する前に、同じカテゴリのさまざまな製品を比較できる非常に便利なページです。

適切に設計されたカテゴリページは、オンラインストアで顧客をより長く維持するのに役立ちます。彼らがあなたの店でより良い経験をするほど、彼らは購入して忠実な顧客になる可能性が高くなります。

カテゴリページを最大限に活用し、競合他社から目立つようにするために、これらはそれらを次のレベルに引き上げるためのいくつかの推奨事項です。

1.大きな商品画像を追加する

オンラインショッピングに関して言えば、画像は千の言葉に値します。買い物客は、商品ページに移動する前に、興味のある商品の大きくて鮮明な画像を見たいと思っています。

ただし、これは、カテゴリページに非常に大きな商品画像を使用する必要があるという意味ではありません。非常に大きな画像は重くなり、サイトの速度が低下する傾向があるため、大きな画像とサイトの速度のバランスをとってください。

たとえば、画像サイズが300〜400ピクセルの3列のカテゴリページを使用できます。これは、平均的なサイズのモニターまたはモバイルデバイスで必要な製品の詳細を表示するのに十分なはずです。

ナイキの例は、woocommerceカテゴリページをカスタマイズします

最も有名なスポーツウェアブランドの1つであるナイキのカテゴリページで良い例を見ることができます。ナイキは、製品のサムネイル画像に適した鮮明で大きな画像を使用しています。

また、最近ではモバイルデバイスでオンラインショッピングが広く行われていることを忘れないでください。デスクトップとモバイルの両方でカテゴリページをテストして、サイズとデザインがすべての画面サイズに適していることを確認してください。

2.魅力的なヘッダー画像を使用する

オンラインショッピングに関しては、第一印象が重要であり、さらに重要であることは誰もが知っています。顧客がカテゴリページを開くと、最初に気付くのはページのヘッダーです。そのため、各カテゴリに魅力的なヘッダーを使用する必要があります。

魅力的なヘッダーを作成する最良の方法の1つは、ヘッダー画像を追加することです。サイトの全体的なデザインを念頭に置き、ヘッダー画像をオンラインストアの全体的な配色と一致させます。

たとえば、MACコスメティックスなどの多くのファッション志向のオンラインストアでヘッダー画像を見つけることができます。

MACコスメティックスはwoocommerceカテゴリページをカスタマイズします

ご覧のとおり、MACは非常にクリエイティブな方法でヘッダー画像を表示しています。カテゴリヘッダー画像はその画像で構成され、暗い配色とヘッダーメニューを一致させます。

3.ブレッドクラムを常に見えるようにしてください

ブレッドクラムは、Webサイトの訪問者が適切な場所にいることを確認するための最も便利な要素の1つです。ブレッドクラムは、ユーザーがサイトをナビゲートするのにも役立ちます。これにより、ユーザーは探しているものをすばやく見つけて、ショッピング体験を向上させることができます。

商品を閲覧しているときに、顧客がさまざまなものをクリックして、ストアで迷子になることがあります。ブレッドクラムを常に表示することで、ユーザーは自分がどこにいるかをすぐに確認し、目的のカテゴリに簡単に戻ることができます。

一部のサイトではサイドバーにカテゴリを表示することを好みますが、ほとんどのオンラインストアでは、顧客が以前の場所に簡単に戻ることができるため、ナビゲーションパスを使用しています。

上記のチュートリアルをDiviで実行した場合、ブレッドクラムの表示は問題になりません。別のテーマを使用する場合は、このガイドをチェックして、すべてのページにブレッドクラムを追加して表示する方法を確認してください。

4.製品が正しいカテゴリにあるかどうかを確認します

これは明らかなようですが、製品を手動で追加すると間違いが発生する可能性があります。したがって、この点は、推奨というよりも注意を喚起するものです。

定期的なチェックを行って、すべての製品が正しいカテゴリに割り当てられ、混同されていないことを確認します。毎日チェックする必要はありませんが、たまにチェックすることが重要です。製品、カテゴリ、説明のスペルミスをチェックすることもできます。

製品またはそのカテゴリにエラーがあると、訪問者のWebサイトの印象に影響を与える可能性があります。オンラインショップを閲覧していて、ラップトップのカテゴリにジーンズを見つけたらどう思いますか？たまにチェックを行うことはそれほど時間はかからず、すべてを整理するのに役立ちます。

eコマースショップをさらに改善したい場合は、オンラインストアを最適化するためのWooCommerceのヒントをご覧ください。

結論

全体として、カテゴリページはストアで重要な役割を果たします。競合他社から目立つようにするには、WooCommerceカテゴリページをカスタマイズして最大限に活用する必要があります。同様に、ショップ、商品、マイアカウント、チェックアウトページを編集して、店舗全体を刷新することもできます。

最後に、カテゴリページを編集するさまざまな方法について説明しました。

ディビと
専用プラグインを使用する
プログラムで

このガイドがお役に立てば、カテゴリページを簡単に編集できることを願っています。さらに、カテゴリページに製品のクイックビューを追加するためのボーナスヒントも提供しています。

最後に、カテゴリページを改善し、より良い画像を使用してコンバージョン率を高め、パンくずリストを常に表示するための推奨事項もいくつか確認しました。

このチュートリアルが役に立った場合は、次のチュートリアルも参照することをお勧めします。

WooCommerceの[カートに追加]ボタンを非表示にして削除する方法
WooCommerceカートページをカスタマイズする
WooCommerceのチェックアウトに手数料を追加する方法