コーディングなしでWordPressのWooCommerceカテゴリページをカスタマイズする方法

Elementor で WooCommerce 製品カテゴリ ページを編集するかどうかを検討していますか?

もしそうなら、そうすることを強くお勧めします。 WooCommerce アーカイブ ページをカスタマイズして最適化すると、売上を伸ばすことができます。

しかし、問題は、WordPress で WooCommerce 製品カテゴリページをカスタマイズする方法です。

このブログに示されているプロセスに従えば、WooCommerce カテゴリ ページをカスタマイズするためにコーディングを行う必要はありません。

この記事では、次のことを学びます コーディングなしでWooCommerceカテゴリページをカスタマイズする方法。さらに、次のことも知ることができます カテゴリごとに異なるカスタム アーカイブ テンプレートを個別に作成する方法。また、アーカイブ ページを最適化してコンバージョン率を高める方法についても説明します。

それでは、読み続けてください…。

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

によると 建てられた, WooCommerce は、上位 100 万の Web サイトの 29% パーセント以上で使用されています。 この人気は、e コマース ツールとしての WooCommerce の信頼性を示していますが、同時に、何千もの Web サイトが WooCommerce が提供するのと同じデフォルト レイアウトを使用していることも反映しています。

そして、デフォルトを使用すると考えると、 ウーコマース ページがあなたの Web サイトが群衆の中で目立つ可能性を最小限に抑えるだけであるなら、あなたは間違っています。他にも考慮する必要がある理由があります。これらの他の理由について知るために、WooCommerce のデフォルト カテゴリ ページを見てみましょう。 WordPress Twenty Twenty Two テーマ 活性化された。

ご覧のとおり、WooCommerce のデフォルトのカテゴリ ページは、あまり魅力的ではない基本的な外観をしています。それに、それは 高度なオプションはありません 名前を使用した製品の検索、さまざまな属性に基づいた製品のフィルタリングなど。これらはすべて、オンライン ストアで優れたユーザー エクスペリエンスを確保するために重要です。

それに、目に心地よく、ナビゲートしやすい、見栄えの良いサイトが嫌いな人はいないでしょうか。 

そうですね、答えは皆さんです！次のセクションに進み、コーディングを行わずに WooCommerce 製品カテゴリ ページ テンプレートをカスタマイズする方法を学びましょう。

WooCommerce 製品カテゴリページを 6 つのステップでカスタマイズする方法

これは、コーディングなしで WordPress の WooCommerce カテゴリ ページをカスタマイズする方法に関するわかりやすいチュートリアルです。このプロセスに従うことで、WooCommerce アーカイブ ページのレイアウトとデザインをすぐに選択できます。それでは、始めましょう…

ステップ #1: Elementor ページ ビルダーと ShopEngine をインストールする

このブログで紹介されているプロセスを使用して Elementor で WooCommerce の製品カテゴリ ページを編集するには、2 つの WordPress プラグインが必要です。

• エレメンターページビルダー
• ショップエンジン そして ショップエンジン プロ

ShopEngine は、ドラッグ アンド ドロップ ページ ビルダー - Elementor 用の究極の WooCommerce ビルダーです。これは、WooCommerce のカスタマイズを簡単にする膨大な数のウィジェットとモジュールが付属する Elementor のアドオンです。

注記： あなたはできる クーポンを使用する コミュニティ20 ShopEngine Pro で 20% オフを入手するには。 ShopEngine はこのページビルダーに依存しているため、最初に Elementor をインストールします。 ShopEngine Pro のアクティベーションについてサポートが必要な場合は、 ドキュメンテーション.

ステップ #2: カスタム WooCommerce カテゴリ ページ テンプレートを作成する

必要なプラグインをすべてインストールしてアクティブ化したら、カテゴリ テンプレートを作成する必要があります。 WooCommerce カスタム カテゴリ ページ テンプレートを作成するには、

• 案内する： ショップエンジン ⇒ ビルダーテンプレート
• 「新規追加」をクリックします
• テンプレート名を入力します
• ドロップダウンからタイプをアーカイブとして選択します
• 「該当するカテゴリ」フィールドはそのままにしておきます すべてのカテゴリに共通のテンプレートを作成することです
• 「デフォルトに設定」オプションをオンにします 既存のカテゴリ/アーカイブ ページ テンプレートをオーバーライドします。
• [サンプル デザイン] で空白のオプションを選択します。 
• 「Elementorで編集」をクリックします テンプレートの構築を開始するには

注記: このブログでは空白のオプションを選択したため、その方法を説明します。 カスタム カテゴリ ページを最初から作成します。 ShopEngine では複数のサービスを提供しています 事前に構築された WooCommerce カテゴリ ページ テンプレート。あなたが望むなら を使用する 事前に作成されたテンプレートがあるので、好みのものを選択してステップ 5 に進みます。 (最初から構築する場合は、ステップ 3 と 4 が必須です)

ステップ #3: WooCommerce カテゴリ ページのレイアウト/構造を選択する

エディター モードになったら、WooCommerce カテゴリ ページの構造を選択する必要があります。

3 つの異なるセクションに 3 つの異なるタイプのレイアウトを使用して、カスタム アーカイブ ページを構築します。ブログに表示されているものと同じようにすることも、好みのレイアウトを選択することもできます。

構造を選択するには、 「+」アイコンをクリックしますをクリックし、好みのレイアウトにカーソルを合わせてクリックします。

注記: 同じプロセスを繰り返して、別のレイアウトを選択できます。

関連している： WooCommerce 製品ページをカスタマイズする方法

ステップ #4: ShopEngine ウィジェットをドラッグ アンド ドロップし、設定をカスタマイズします

ShopEngine は、カスタム WooCommerce アーカイブ ページを構築するための 8 つ以上の専用ウィジェットを提供します。これらのカテゴリ ページ ウィジェットは、

• アーカイブの説明
• アーカイブ製品
• アーカイブタイトル
• アーカイブ結果数
• アーカイブビューモード
• フィルターで並べ替える
• ページごとの商品フィルター
• 製品リスト
• 製品フィルター

これらのいくつかを使用するつもりです。これらすべてを使用して、Elementor WooCommerce 製品カテゴリ ページを編集することを選択できます。ただし、その前に、すべてのウィジェットがアクティブ化され、使用できることを確認する必要があります。 

からウィジェットをアクティブ化/有効化できます。 ショップエンジン ⇒ ウィジェット。ここ すべてのウィジェットをオンにする またはこれから使用するもの、そして最後に 「変更を保存」ボタンをクリックしてステータスを更新します.

を選択するつもりです 1列レイアウト そして [高度な検索] および [結果カウントのアーカイブ] ウィジェットをドラッグ アンド ドロップします。

ウィジェットを選択し、関連設定をカスタマイズできます。たとえば、左側のパネルで [詳細検索] ウィジェットをクリックすると、次のようなオプションが表示されます。 製品列、検索結果のカテゴリの表示、カテゴリのドロップダウンの表示、すべてのカテゴリのテキスト、検索アイコンなど。

次のセクションでは、ステップ 3 で説明した手順を使用して、2 列の新しいレイアウトを挿入します。次に、Product Filters ウィジェットと Archive Products ウィジェットをドラッグ アンド ドロップします。

注記： の 製品フィルター ウィジェットは ShopEngine Pro でのみ使用できます。そのため、ShopEngine Pro をインストールしてアクティブ化していることを確認してください。

価格フィルター、評価フィルター、カラー フィルター、カテゴリ フィルターなどのフィルター関連のオプションをカスタマイズできます。さらに、フィルター ビュー モード、コンテナーの切り替えボタンを有効にする、列 (行ごと) などのレイアウト関連のオプションもカスタマイズできます。必要に応じて、カスタム属性リストを追加することもできます。

WooCommerce レイアウト オプションからアーカイブ製品レイアウト設定を変更できます。レイアウト オプションを変更する方法の詳細については、これを確認してください。 博士。さらに、フラッシュ セール バッジ、カテゴリの表示、説明の評価などのコンテンツ設定をカスタマイズできます。また、カスタム ページネーション アイコンや、カートに追加、ウィッシュリストに追加、クイック ビューなどの CTA ボタンのカスタム順序を選択することもできます。 。

関連している： WooCommerceのマイアカウントページをカスタマイズする方法

ステップ #5: WooCommerce アーカイブ ページのスタイル設定をカスタマイズする

カスタマイズされたレイアウトとパーソナライズされたウィジェットを設定したら、これらのウィジェットのスタイル設定を変更して外観を変更します。スタイル設定を変更するには、ウィジェットをクリックし、パネルで [スタイル] タブに移動してすべてのスタイル設定にアクセスする必要があります。このチュートリアルで使用されるウィジェットのスタイル オプションを見てみましょう。

高度な検索:  検索フォーム、検索アイコン/テキストスタイル、カテゴリスタイル、製品スタイル、その他の製品ボタン、およびグローバルフォントのさまざまなオプションをカスタマイズできます。 

アーカイブ結果数: 配置、色、タイポグラフィのオプションをカスタマイズできます。

製品フィルター: 一般的なスタイル、価格フィルター/範囲スライダー、評価フィルター、カテゴリ フィルターなどのさまざまなカテゴリで、製品フィルター セクションのスタイルを設定するオプションを見つけることができます。

アーカイブ製品: 製品コンテナ、製品画像、製品カテゴリ、製品タイトル、製品価格、オフタグ、カートに追加ボタン、評価、フラッシュセール、ページネーションなどのセクションにあるオプションをカスタマイズすることで、アーカイブ製品スタイル設定をカスタマイズできます。

関連している： WooCommerce カート ページをカスタマイズする方法

ステップ #6: WooCommerce カスタム カテゴリ ページ テンプレートを更新してプレビューする

スタイルのカスタマイズが完了したら、「更新」ボタンをクリックして保存します。ここで、プレビュー ボタンをクリックしてプレビューを表示するか、任意のカテゴリ ページに手動でアクセスすると、以下のプレビューのように新しいテンプレートがアクティブ化されたことが確認できます。

さて、これは WooCommerce ストア用にカスタマイズされたカテゴリ ページを作成するプロセスでした。しかし、ストアのカテゴリごとに異なるデザインを作成するのはどうでしょうか? ShopEngine を使用すると、それも行うことができます。詳細については、次のセクションに進んでください。

カテゴリごとにカスタム WooCommerce アーカイブ ページを個別に構築するにはどうすればよいですか?

WooCommerce ストアのカテゴリごと、または特定のカテゴリのみにまったく異なるデザインを構築できます。そのため、プロセスは以下とほぼ同じです。 上に示しました。 しかし、 ステップ2、 カテゴリページのテンプレートを作成する, あなた 「適用カテゴリ」フィールドを空白のままにすることはできません。

必要がある 「該当するカテゴリ」フィールドでカテゴリを選択します 構築しているデザイン テンプレートを適用したい場所。たとえば、「音楽」カテゴリにのみ適用されるデザインを作成する場合は、「適用可能なカテゴリ」フィールドで「音楽」を選択します。 

残りの手順は、「」に示す一般的なカテゴリ テンプレート デザインを構築するのと同じです。 上のセクション。

注記：  特定のカテゴリのアーカイブ テンプレートを作成すると、 そのカテゴリ ページにのみ適用され、残りのカテゴリ ページには適用されません.
残りのカテゴリについては、すべてのカテゴリの「適用可能なカテゴリ」フィールドを空白にして、またはカテゴリごとに異なるカテゴリ テンプレートを作成する必要があります。それ以外の場合、残りのカテゴリにはデフォルトの WooCommerce アーカイブ テンプレート、またはアクティブ化されたテーマが提供するテンプレートが含まれます。

以下は、ShopEngine で構築されたさまざまなデザインのさまざまな WooCommerce カテゴリ ページのプレビューです。

注記： WooCommerce サイトのさまざまなカテゴリに異なるテンプレート/デザインを作成するオプションは、ShopEngine の Pro バージョンでのみ利用できます。

ボーナス: WooCommerce カテゴリ ページを最適化してコンバージョン率を高める 5 つの方法 

ここでは、WooCommerce アーカイブ ページを最適化するために役立つヒントをいくつか紹介します。 コンバージョン率を高める:

製品フィルタオプションを提供する

カテゴリ ページには、デフォルトでそのカテゴリのすべての製品が表示されます。しかし通常、人々は特定の色、サイズ、またはその他の属性の製品を探しています。

したがって、優先される属性に従ってカテゴリの製品数をフィルタリングして絞り込むオプションを提供する必要があります。こうすることで、人々は自分の製品を簡単に見つけることができ、 売上を伸ばします。

こちらもチェック 5 つのステップで通貨スイッチャーを WooCommerce ウェブサイトに追加する方法

製品比較オプションを追加

を追加する 製品比較 WooCommerce にオプションを追加すると、消費者が同様の種類の製品を比較するのに役立ちます。このオプションは、携帯電話、時計などのデジタル製品を提供する場合に特に必要です。

製品比較オプションは、顧客がより迅速に決定を下すのに役立ちます。これは、売上向上という目標を迅速に達成するのに役立ちます。

ウィッシュリストボタン

ウィッシュリスト 後で購入できるように製品をカートに追加するオプションを提供します。コンバージョンに関しては、ウィッシュリストがそれほど効果的ではないと考える人もいます。しかし、正直に言って、効果は非常に高いです。

なぜなら、人々は通常、商品が本当に気に入ったものの、何らかの理由ですぐに購入できない場合に商品をウィッシュリストに追加するからです。しかし、その人がその後商品を買わなくなるかというと、そうではありません。

ほとんどの場合、人々はウィッシュリストに追加した製品を購入する傾向があります。したがって、WooCommerce カテゴリページにウィッシュリストオプションを追加してください。

クイックビューオプション

を追加する クイックビュー ボタンを使用すると、製品について知るために別のページにアクセスする必要がなくなるため、優れたユーザー エクスペリエンスが保証されます。このクイック ビュー オプションを使用すると、顧客はカテゴリ ページに留まり、ワンクリックで製品の詳細を知ることができます。

閲覧するために製品ページにアクセスする必要がある場合、製品が気に入らない場合に備えて製品を購入せずにサイトを離れることができます。ただし、顧客が同じページに留まりながら複数の商品をチェックできるようにクイック ビュー オプションを提供すると、ショッピング エクスペリエンスが向上します。そして結果的にお店の売上アップにもつながります。

ページ上の SEO の最適化

カテゴリ ページは、Web サイトのページ階層を示すものです。それで、 カテゴリページを最適化する 検索エンジンの機能を決して無視してはなりません。ホーム ページと商品ページをランク付けしたいと考えている一方で、カテゴリ ページもランク付けされれば、大量のトラフィックをもたらす可能性があるからです。

ウェブサイトでのトラフィックが増えれば増えるほど、より多くのコンバージョンを獲得できる可能性が高まります。したがって、適切な SEO メタデータを追加し、内部および外部リンクを最適化し、URL を最適化するようにしてください。次のような SEO プラグインの助けを借りることができます。 ランクマス, ヨーストSEO 等

すべてのポイントは有効であると思われますが、コンバージョンを増やすためにこれらのオプションをサイトに追加するには複数のプラグインが必要ですか?

まあ、心配することはありません。 ShopEngine は、豊富な機能を備えた素晴らしい WooCommerce カスタマイザーであるだけでなく、 WooCommerce ウィジェット、また提供します 13 個以上のモジュール ウィッシュリスト、クイックチェックアウト、製品比較など。

さらに、このプラグインを使用して完全な WooCommerce ストアをカスタマイズできます。このカテゴリ エディタを使用すると、すべての WooCommerce ページを編集できます。から ショップページ に ありがとうページ。 ShopEngine が提供する膨大な機能については、ビデオをご覧ください。

その他の WooCommerce 関連ブログ:

👉 高度な WooCommerce カスタム チェックアウト フィールドを追加する方法
👉 WooCoomerce に最適なショッピング カート プラグイン
👉 WooCommerce カートが空のエラーを解決する方法
👉 WooCommerce マルチステップ チェックアウトを追加する方法

カスタム WooCommerce カテゴリ ページの最後の言葉

カテゴリ ページは、顧客と検索エンジンの両方にとって重要なページです。カテゴリ ページをカスタマイズして最適化することは、e コマース ビジネスでさらに成功するのに役立ちます。 

幸いなことに、WordPress で WooCommerce カテゴリ ページをカスタマイズする方法と、コンバージョン率を 2 倍にするためにページを最適化する方法がわかりました。それに加えて、カテゴリごとにカスタムの WooCommerce カテゴリ ページを個別に作成する方法がわかりました。

ShopEngine という市場で入手可能な最も完全な WooCommerce ビルダーを利用して、eStore のカテゴリ ページを最適化できます。そして、彼のオールラウンドな WooCommerce プラグインを 20% オフで今すぐ入手できます!

🔔 🔔 購入するには ShopEngine Pro を 20% より安い価格で クーポンコードを使用する コミュニティ20。

それでは、急いで WooCommerce 愛好家のコミュニティに今すぐ参加しましょう!