Elementorを使用してWooCommerce製品カテゴリを設計する

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

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

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

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

WooCommerceとElementorの組み合わせ

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

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

さらに、デジタル商品のカスタムページとデザインを作成したり、配送と支払いのカスタムページオプションを含めたり、購入後と事前購入のページを含めたりすることができます。 これらすべてが、プロフェッショナルでユーザーフレンドリーな会社のWebサイトの外観に貢献します。 ユーザーフレンドリーな召喚ボタン、視差対応スライダー、およびその他の多くの機能に加えて、WooCommerce機能をWebサイトに統合できます。 利用可能な機会の数は事実上無限です。 さて、あなたが十分に確信しているなら、あなたの計画を実行に移すプロセスをあなたに説明させてください。 ショップページをより快適にするためにさまざまなことを行うことができます。目標は、これらの手順がWooCommerceストアのより快適なショップページの作成を支援することです。

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

WooCommerceに精通している場合は、顧客が適切に表示およびアクセスできるように製品を整理する上で、製品カテゴリが重要であることをご存知でしょう。顧客が探しているものをすばやく見つけることができれば、それだけよいでしょう。 しかし、製品カテゴリとは正確には何ですか？

顧客はショップページで商品を閲覧するのにかなりの時間を費やすため、前向きな体験が必要です。 あなたの店のウェブサイト上の製品を見るために何十ものページをナビゲートしなければならないことほどイライラすることはありません。

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

WooCommerceストアをお持ちで、外観を一新したい場合は、このチュートリアルを開始する必要があります。

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

ビジネスに取り掛かりましょう。
製品を設定した後、カテゴリに表示されるように、公開する前に次のことを行う必要があります。

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

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

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

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

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

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

Elementor proは、豊富なオプションを備えた、すっきりとしたクリーンな製品カテゴリを設計する可能性を提供します。

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

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

• 列：表示する列の正確な数を1から12まで設定します
• カテゴリ数：表示するカテゴリの数を選択します

クエリ設定

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

スタイル設定

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

画像設定

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

タイトル設定

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

カウント設定

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

結論

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