Elementor を使用して WooCommerce 製品カテゴリをデザインする

Elementor は、新しい機能を追加することでデフォルトの WordPress ビルダーの機能を強化する優れた WordPress ページビルダーです。

覚えていると思いますが、WordPress の初期バージョンは特にユーザーフレンドリーではありませんでした。 機能が限られていることに加えて、Web サイトの基本デザインを作成するには既成の WordPress テーマに依存する必要がありました。 しかし、多くのユーザーにとって、WordPress テーマの基本機能は不十分であり、pluginのインストールやテーマ コードの手動編集が必要でした。

• WooCommerce と Elementor の組み合わせ
• Elementorでカテゴリーページを作成する
• レイアウト設定

Elementor は WordPress に似たブロックベースのビルダーですが、より直観的で応答性が高く、機能が豊富であるという点で WordPress ビルダーよりもはるかに高度です。 最も重要なのは、コードを 1 行も記述することなく、素晴らしい Web サイトを作成できることです。

WooCommerce と Elementor の組み合わせ

WP-WooCommerce と Elementor は、現在最も広く使用されている WordPresspluginの 2 つです。 それぞれが提供する柔軟性と膨大な数の機能は、まさに貴重です。 e コマース ストアを運営している場合、WooCommerce はほぼすべてのニーズに対応する最適なpluginです。 これは、実質的にあらゆるニーズに対応できる最も包括的なpluginです。

さらに、Elementor は、市場で入手可能な最も効果的なドラッグ アンド ドロップ Web サイト ビルダーの 1 つです。 これにより、Web サイト上のほぼすべてのページを迅速にデザイン、カスタマイズ、提供できるようになります。 さらに、メガメニューの作成や幅広いアドオンやテンプレートへのアクセスなど、利便性の高い機能も利用できます。 WooCommerce と Elementor の両方を利用すると、最小限の費用と労力でプロ品質のショップ ページとビジネス ページをデザインおよび構築できます。 Elementor を使用すると、ショップのレイアウト、商品グリッド、カルーセルを完全にカスタマイズしたり、さまざまな美しいレイアウトから選択したりできます。 また、チェックアウト ページとカート ページを設定してパーソナライズする機能や、それらをさまざまな支払いオプションや機能と統合して、顧客にさらなる利便性を提供する機能も利用できます。

さらに、デジタル商品用のカスタム ページやデザインを作成したり、発送や支払い、投稿ページや購入前ページなどのカスタム ページ オプションを含めたりすることができます。 これらすべてが、会社の Web サイトの外観をプロフェッショナルかつユーザーフレンドリーにすることに貢献します。 ユーザーフレンドリーな CTA ボタン、視差対応スライダー、その他の多数の機能に加えて、WooCommerce 機能を Web サイトに統合できます。 利用できる機会の数は事実上無限です。 さて、十分に納得できたなら、計画を実行に移すプロセスを順を追って説明しましょう。 ショップ ページをより快適なものにするためにさまざまなことができます。これらの手順の目標は、WooCommerce ストアのより快適なショップ ページを作成するのに役立つことです。

ElementorでWooCommerceカテゴリーページを作成する

WooCommerce に詳しい方は、製品を適切に表示して顧客がアクセスできるように整理する上で製品カテゴリが重要であることをご存知でしょう。顧客が探しているものを早く見つけられるほど良いのです。 しかし、製品カテゴリとは正確には何でしょうか?

顧客はショップ ページで商品の閲覧に多くの時間を費やしているため、顧客は肯定的なエクスペリエンスを得ることができます。 ショップの Web サイトで商品を見るために何十ものページを移動しなければならないことほどイライラすることはありません。

そのため、顧客により良いショッピング体験を提供するには、分類が不可欠です。 衣服や靴など、あらゆる種類のアイテムを適切に整理して整理したセクションがあれば、顧客は自分の好みを分類したりフィルタリングしたりするのが簡単になるでしょう。 CTA ボタン、注目の製品セクション、販売やオファーのポップアップ、その他の同様のコンポーネントなどのリード生成要素をこのセクションに追加すると、訪問者にとってより魅力的なセクションになります。

WooCommerce ストアを持っていて、それを改装したい場合は、このチュートリアルがまさに始めるのに必要なものです。

多くの WooCommerce テーマには製品カテゴリのデフォルト レイアウトが含まれていますが、これがビジネス ニーズに最適である場合もあれば、そうでない場合もあります。 これらのデフォルトにはいくつかの便利な機能が含まれている場合がありますが、多くの場合カスタマイズできません。

本題に入りましょう。
製品を設定した後、カテゴリに表示されるように公開する前に次の操作を行う必要があります。

この段階で、製品テンプレートがどこに表示されるかを決定する条件を設定します。 テンプレートを使用すると、サイト上のすべての商品ページに自動的に適用されます。 検索を特定の製品カテゴリに絞り込むこともできます。

[公開] をクリックすると、単一の製品を購入できるようになります。

まだ終わっていません。
私たちが今行ったことだけでは、サイト上でカテゴリーを公開するには十分ではありません。 Web サイトのすべてまたは一部のページでカテゴリを有効にするには、いくつかの設定を行う必要があります。 タスクを完了するには、すべての製品に影響を与える製品カタログ ページ、または特定のカテゴリの製品に影響を与えるカタログ ページを作成します。
これを行うには、まず、Elementor > マイ テンプレートに戻り、製品アーカイブ テンプレートを作成します。 次に、既存のテンプレートを選択するか、新しいテンプレートを作成します。 アーカイブ製品ウィジェットとアーカイブ タイトル ウィジェットをページに追加して、その外観をカスタマイズします。

ページ間でスタイルのコピー機能を使用して、単一の製品テンプレート用にすでに作成したデザインに一致するようにカスタマイズし、変更を保存します。
製品ページに戻り、ドロップダウン メニューから [コピー] を選択します。 アーカイブ製品に戻ったら、「スタイルを貼り付け」を右クリックします。 [アーカイブ製品] 設定の [クエリ] > [ソース] ドロップダウン メニューから [最新の製品] を選択します。
次に、[製品カテゴリ] ドロップダウン メニューからリングを選択します。 このようにリングカテゴリのみが表示されます。 特定のカテゴリの製品の長いリストがある場合は、ページネーションをオンにする必要があります。
スタイル タブを選択して、色、フォント、その他のデザインの要素を変更することで、列と行の間の距離をカスタマイズできます。

公開前に、単一の製品テンプレートの場合と同様に、アーカイブを表示する場所を決定する条件を選択してから公開します。

「公開」をクリックすると、アーカイブ ページが公開されます。

Elementor pro を使用すると、豊富なオプションを使用して、非常にクリーンな製品カテゴリーを設計することができます。

Elementor Pro で利用可能なオプションを使用して、次のことを実行できます。

WooCommerce 商品カテゴリーのレイアウト設定

• 列:表示する列の正確な数を 1 ～ 12 の範囲で設定します。
• カテゴリ数:表示するカテゴリの数を選択します

クエリ設定

• ソース:カテゴリを表示するソースを選択し、[すべて]、[手動選択]、[親別]、または [現在のサブカテゴリ] から選択します。 [手動選択] を選択した場合は、表示するカテゴリを手動で選択します。 「親別」を選択した場合は、「トップレベルのみ」から選択するか、ドロップダウンリストから個別のカテゴリを選択します。
• 空を非表示:カテゴリー内に製品がない場合は「はい」に設定します。
• 順序:カテゴリを表示する順序を設定します。 オプションには、名前、スラッグ、説明、またはカウントが含まれます
• 順序:カテゴリを ASC または DESC (昇順または降順) 順に表示する場合に選択します。

スタイル設定

• 列のギャップ:列間の正確なギャップを設定します。
• 行のギャップ:行間の正確なギャップを設定します。
• 配置:商品データを左、右、または中央に配置します。

画像設定

• 境界線のタイプ:境界線のタイプを選択し、なし、実線、二重、点線、破線、または溝付きから選択します。
• 境界線の半径:境界線の角の丸みを制御する半径を設定します。
• 間隔:画像とそのデータ間の間隔を調整します。

タイトル設定

• 色:タイトルの色を選択します
• タイポグラフィ:タイトルテキストのタイポグラフィオプションを設定します。

カウント設定

• カラー:カウントの色を選択します。
• タイポグラフィ： カウントのタイポグラフィ オプションを設定する

結論

Elementor の WooCommerce Builder は、商品ページを視覚的に作成および微調整するために必要なデザインの柔軟性を提供します。 アイデアから実現までにかかる時間 , そして完全に 時間を節約した結果、機能するオンライン WooCommerce ストアが大幅に削減されます。 全体として、Elementor を使用して WooCommerce ショップ ページをカスタマイズすると、Web サイトの全体的なパフォーマンスに大きな影響を与える可能性があります。 顧客が商品を見て購入できる最適な方法で商品を整理して表示することで、販売を促進したり妨げたりすることができます。 Elementor での WooCommerce ショップ ページのセットアップとカスタマイズは、このガイドの手順に従ってデモンストレーションされます。 ただし、これは問題の範囲という点では氷山の一角にすぎないことに留意してください。 この基本的なデモンストレーションでは、Elementor を使用してストアに理想的なショップ ページを作成する方法の概要を示します。 これを開始点として使用して、この素晴らしいページ ビルダーを最大限に活用するために試してみてください。