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

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

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

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

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

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

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

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

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

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

WooCommerce Market Share - Customize WooCommerce category page
上位 100 万サイトにおける WooCommerce の使用率

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

Customize WooCommerce category page
WooCommerce のデフォルト カテゴリ ページ

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

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

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

ShopEngine を使用して WooCommerce をカスタマイズする

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

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

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

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

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

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

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

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

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

Alternatively, you can also create a single WooCommerce page and then add the sections from the ready widget library of Shopengine.

WooCommerce カスタム カテゴリ ページ テンプレートを作成する
空の WooCommerce カテゴリ ページ テンプレートを作成する

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

Step #3: Choose a layout/structure for the custom WooCommerce category page

Once you are in the editor mode, you need to choose a structure for your custom WooCommerce category page.

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

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

カスタム カテゴリ ページの構造を選択する WooCommerce 製品カテゴリ ページをカスタマイズする方法のチュートリアル
構造を選択してください

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

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

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

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

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

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

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

すべての ShopEngine カテゴリ ページ ウィジェットを有効にする
すべての ShopEngine カテゴリ ページ ウィジェットを有効にする

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

wooCommerce カテゴリ ページのドラッグ アンド ドロップ検索と結果数ウィジェット WooCommerce カテゴリ ページをカスタマイズする方法
Drag and drop Advanced Search and Archive Result Count widgets to customize WooCommerce Category Page

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

WooCommerce の高度な検索ウィジェットをカスタマイズする
Customize WooCommerce Category Page’s Advanced Search Widget

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

drad およびドロップ製品フィルターとアーカイブ製品ウィジェット WooCommerce アーカイブ ページをカスタマイズする
Select a new Elementor structure for Custom WooCommerce Category Page

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

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

製品フィルター ウィジェットをカスタマイズする WooCommerce カテゴリ ページをカスタマイズする方法
Customize Proudct Filters widget on WooCommerce Category Page

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

Or, you can also add a フローティングカート option to encourage the users buy more from you. Adding a mini cart can be a good option too.

アーカイブ製品ウィジェットのカスタマイズ

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

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

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

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

詳細検索ウィジェットのスタイル設定を変更する WooCommerce カテゴリページをカスタマイズする方法
Change the style settings of Advanced Search Widget – Customize WooCommerce Category Page

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

elementsKitの結果カウントウィジェット
Change the style settings of Archive Result Count widget – Customize WooCommerce Category Page

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

WordPress で WooCommerce 製品カテゴリ ページを編集するための製品フィルター スタイル設定
Customize Product Filter widget style options – Custom WooCommerce Category Page

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

製品スタイル設定をアーカイブしてElementor WooCommerceカテゴリページを編集します
Customize the style of Archive Products widget – Customize WooCommerce Category Page

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

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

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

カテゴリページのプレビューをカスタマイズする
ShopEngine を使用したカスタム WooCommerce カテゴリ ページ

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

ShopEngine を使用して WooCommerce をカスタマイズする

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

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

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

ShopEngineを使用してWooCommerceのカテゴリごとに異なるアーカイブページを作成する

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

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

ShopEngine を使用したさまざまな WooCommerce アーカイブ ページ テンプレート - 究極の WooCommerce ビルダー

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

ShopEngine を使用した、カテゴリごとのさまざまなカスタム WooCommerce カテゴリ ページのプレビュー

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

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

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

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

商品フィルターを追加してコンバージョンを増やす
WooCommerce カテゴリページの製品フィルター

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

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

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

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

製品比較を追加し、WordPress で WooCommerce カテゴリ ページをカスタマイズする方法を学びます
WooCommerce の製品比較オプション

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

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

ウィッシュリストボタン

woocommerce アーカイブ ページのカスタマイズ WooCommerce カテゴリ ページをカスタマイズするためのウィッシュリスト
カテゴリページの「ほしい物リスト」ボタン

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

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

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

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

woocommerce カスタム カテゴリ ページ テンプレートを使用してカテゴリ ページのコンバージョン率を高めるクイック ビューの追加
WooCommerce アーカイブ ページのクイック ビュー オプション

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

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

ページ上の SEO の最適化

ページ上のSEO

Category pages are the indicator of page hierarchy on your website. So, optimizing your category page for search engines should never be neglected. Because, while you want your home and product page to rank, your category page if ranked can also bring you a lot of traffic.

The more traffic you get on your website will increase your chance that you will get more conversions. So, make sure you add proper SEO metadata, optimize internal and external linking, optimize the URL, etc. You can take help from AI SEO plugins like ゲットジーニー.

For better conversion, try to create a custom checkout page for your WooCommerce store.

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

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

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

ShopEngine – 究極の WooCommerce ビルダー

その他の WooCommerce 関連ブログ:

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

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

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

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

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

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

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


コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です