WooCommerceカテゴリページのカスタムデザインを作成する方法
WordPressテーマのデフォルトWooCommerceカテゴリページデザインに代わるものをお探しですか？ WooCommerce 商品カテゴリのカスタム デザインを作成すると、最適化されたショッピング エクスペリエンスを提供でき、お店の収益にプラスの効果をもたらすことができます。
適切なプラグインを使用すれば、独自のカスタム WooCommerce カテゴリ ページ レイアウトの作成も難しくはありません。 それが、この記事で紹介するものです。 WooCommerceのカテゴリにテーブルベースのカスタムレイアウトを作成する方法について説明します。
この投稿で作成するものの例です。 そして、WooCommerce Product Table プラグインを使用して、ご自身の WooCommerce ストアでそれを行う方法について、ステップバイステップでご案内していきます。
The benefits of using a table layout for your category pages
あなたの eCommerce ストアのカテゴリページのレイアウトの正確なデザインは、WordPress テーマに依存しますが、ほとんどのテーマのカテゴリページのデザインは次のようなものです：
そのレイアウトはいくつかの状況では問題ありませんが、表示できる製品の数が限定されています。 また、各製品について提供できる情報も制限されます (ただし、製品のクイック ビュー ボタンを追加することは、これを軽減する 1 つの方法です)。
Woo Multistore は、コンバージョンを高める方法で WooCommerce カテゴリ ページを設計することの重要性について書いています。 テーブルレイアウトは、より多くの製品と情報をコンパクトなレイアウトで表示し、使用するスペースを少なくし、検索やフィルタリングなどの追加のナビゲーション機能を追加することで、欠点を克服するのに役立ちます。
つまり、買い物客の眼前に、より多くの製品/製品の詳細を表示することができ、カタログ全体を確実に見ることができ、購入に至る可能性が高まるのです。 これは、関連する製品を表示し、あまりにも文脈テキストを追加することができます。
このタイプのレイアウトはあらゆるタイプの eCommerce ストアに役立ちますが、特に次のような場合に役立ちます:
- 卸売店
- デジタル ファイル（ビデオ、オーディオ ファイル、電子ブックなど）
- レストラン
- 製品カタログ
- …など多数!
WooCommerce Product TableでカスタムWooCommerceカテゴリページデザインを作成する方法
WooCommerceカテゴリページデザインにテーブルレイアウトを使うもう一つの利点は、特別な専門知識がなくてもすべてを設定できることです。
これを行うには、WooCommerce Product Tableプラグインを使用します。 このプラグインは、フィルタ、検索ボックス、ページネーションなどを追加する機能とともに、あなたがコントロールする柔軟なテーブルレイアウトで WooCommerce 商品をリストします。
また、特定のカテゴリまたはサブカテゴリからの商品のみを表示するためにプラグインを使用できます。 WooCommerce Product Table はこれを行うための 2 つの方法を提供します。
- あなたはすべての製品カテゴリページで製品テーブルのレイアウトを一元的に有効にすることができます。 (すべての商品カテゴリページをカスタマイズしたい場合に最適です。)
- あるいは、ショートコードを使用して、独自の WooCommerce カテゴリページを手動で作成することができます。 (たとえば、特定のカテゴリからの商品のみを一覧表示するためにテーブルを使用したい場合。)
以下では、両方のオプションを実現するために WooCommerce Product Table を設定する方法を紹介します。
Configure WooCommerce Product Table
プラグインをインストールして有効にしたら、そのデフォルト設定を構成したいと思うはずです。
これにより、商品テーブルに表示される情報と、特定の商品属性を表示するかどうか、またはカートに追加する機能がどのように動作するかなど、すべての動作を制御できます。
開始するには、WooCommerce → 設定 → 商品 → 商品テーブルで、カテゴリプラグインの設定にアクセスしてください。 しかし、我々はちょうどあなたのWooCommerceカテゴリページを設計するために不可欠な基本をカバーするつもりです。
最初に、テーブルコンテンツのセクションでカラムの設定を見つける。 ここでは、テーブルに表示される情報を制御します。
列のオプションの完全なリストはここで見つけることができますが、この設定は、ほとんどの店舗で動作する良い基本的なバージョンです。
大量購入を誘致するために、買い物客が複数の製品をまとめてカートに追加できるようなチェックボックスを追加することができます。 または、各製品に個別のカートに入れるボタンを追加することもできます (またはその両方)。
終了したら、変更を保存してください。
製品の設定を行った後、実際の WooCommerce カテゴリを作成する方法が 2 つあります。 次にこれらについて見ていきます。
2a. すべてのカテゴリページで商品テーブルを有効にする
WooCommerce Product Tableには、すべてのカテゴリページに商品テーブルのレイアウトを自動的に追加するオプションが用意されています。 これは最も簡単なオプションで、ほんの数秒で設定できます。
プラグイン設定ページで、「商品カテゴリアーカイブ」ボックスをチェックするだけです。
これは、すべてのカテゴリに対してテーブル レイアウトをグローバルに有効にして、テーマに付属するデフォルト レイアウトを置き換えます。
この方法について詳しく見る。 ショートコードを使用して独自のWooCommerceカテゴリページデザインを作成する
また、ショートコードを使用して、カテゴリごとにWooCommerce製品を一覧表示することができます。 このオプションは、すべてのカテゴリで商品テーブル レイアウトを使用したくない場合に最適です。
通常の WordPress ページにプラグインのショートコードを追加し、どのカテゴリから商品をリストアップするかを指定するだけでよいのです。
この方法では、WooCommerce カテゴリ ページをグローバルに再設計するのではなく、表示したい製品カテゴリごとに新しい WooCommerce 製品カテゴリ ページを作成することが基本です。 または、既存の各商品カテゴリ ページへのリンクを、新しいテーブルを使用するカテゴリ ページに置き換えるだけです。 (ヒント: 内蔵のカテゴリ ページを使用しない場合、製品テーブルを使用する新しいカテゴリ ページにリダイレクトします。)
開始するには、ページ → 新規追加で、基本的な WordPress ページを作成します。 次に、ページに
[product_table]ショートコードを追加します。デフォルトでは、ショートコードはすべての WooCommerce 商品を表示します。
ただし、カテゴリ ショートコードのパラメータを使用して、特定のカテゴリおよび/またはサブカテゴリから商品をフィルタリングすることができます。
たとえば、「椅子」カテゴリの製品をフィルタリングするには、次のショートコードを使用できます：
[product_table category="chair"]カテゴリ画像またはカテゴリ名を追加したい場合は、通常の WordPress エディタを使用して、ショートコードの上に追加することもできます。
ページを公開すると、新しい WooCommerce カテゴリページのデザインが表示されます:
追加の WooCommerce カテゴリ用のページを作成するには、表示したい各製品カテゴリまたはサブカテゴリについてこのプロセスを繰り返します。
WooCommerce Product TableWooCommerceの予約と予定をフロントエンドのテーブルレイアウトでリスト化する使いやすいプラグインです。Make your WooCommerce categories more searchable with filters
If you want to add more search and filter tools to your WooCommerce categories, you have two options:
- You can add search, sort, and filter options via the WooCommerce Product Table settings. これらは、商品テーブルの上または下に表示されます。
- WooCommerce Product Table には、サイドバーにフィルタを追加するために使用できるウィジェットが含まれています。
テーブルレイアウトに検索、ソート、およびフィルタオプションを直接追加するには、WooCommerce → 設定 → 商品 → 商品テーブル に移動します。 次に、テーブルコントロールのセクションまでスクロールダウンし、好みに応じてオプションを設定します。
このヘルプ記事で詳細を学ぶことができます。
フィルタウィジェットを使用するには、外観 → ウィジェットに移動します。 そこには、「製品テーブル:」という接頭辞を持つ 4 つの新しいウィジェットがあります。 すべてのウィジェットを追加することも、特定のフィルターだけを選択することもできます。
以下は、両方のフィルター セットがどのように見えるかについての例です。
How to create a custom WooCommerce category page design with code
PHP, HTML, CSS の知識があれば、WooCommerce プラグインがなくても、コードを使ってカスタム WooCommerce カテゴリページのデザインを作成することも可能です。
あなたのテーマまたは子テーマの archive-product.php ファイルを操作したいと思うことでしょう。
残念ながら、各変更を行うには、テーマのテンプレート ファイル内のコードを直接編集する必要があるため、この方法は開発者以外にはアクセスできません。
Create your custom WooCommerce category page design today!
Creating a custom WooCommerce category page design lets you utilize a more shopper-friendly way to display your products.
By using a table-based category page layout, you can be display more products, with more details about each product.WooCommerce category page design.
また、買い物客が商品を見つけるのに役立つ検索およびフィルタオプションを追加できます。
買い物客と彼らが興味を持っている商品とをより効果的に結びつけることによって、より多くの商品を販売でき、店の収益が増加します。
WooCommerceカテゴリにテーブルデザインを使用するには、WooCommerce Product Tableプラグインを使用することができます。 設定は簡単で、アーカイブのテンプレートファイルを直接編集する場合のように特別な専門知識は必要ありません。
WooCommerce Product TableWooCommerce予約とアポイントをフロントエンドのテーブルレイアウトでリスト化する使いやすいプラグインです。Get started today and create a more effective way for shoppers to browse product categories at your WooCommerce store.
.
