WooCommerce製品比較要素をWebサイトに簡単に追加する方法
公開: 2022-05-05今日、WordPressを使用してショップのウェブサイトを作成することは非常に人気があり、簡単です。 ショップを作成するための最も人気のあるプラグインであるWooCommerceと、多くの顧客フレンドリーなWooCommerceテーマのおかげで、今日ではほとんどの人がすぐに素晴らしいショップを作ることができます。
このショップの作成方法が非常に人気があるという事実は、サイトの改善に貢献できる新しいアドオンを毎日作成することに賛成です。 製品の提示がこれまでになく簡単になり、消費者の注意を引く方法は無数にあります。
そのような要素の1つは、確かにWooCommerce製品の比較です。 選択した製品の特性を比較して提示するために使用されます。 この提示方法は、顧客にとってもあなたにとっても良いことです。 顧客が特定の製品を決定したいとき、彼らは彼らのオプションの明確な比較をしたいです。 あなたはそれらを簡単に可能にすることができます。
私たちの注目を集め、ショップの商品比較だけでなく、他の多くのことにも役立つことがわかったアドオンは、ElementorのQiアドオンです。 このツールには、60個のウィジェットを備えた無料バージョンと40個以上のウィジェットを備えたプレミアムバージョンがあります。 すべてのウィジェットは非常に便利で、数回クリックするだけでページに美しく実用的な要素を追加できます。 カスタマイズオプションも素晴らしいので、ウェブサイトのデザインに完璧に一致するようにすべてのウィジェットを簡単にスタイリングできます。
製品比較ウィジェットは、本質的な特性を備えた製品を1か所に表示し、顧客に明確な情報を1か所で提供するために使用されます。
- 製品比較ウィジェットのしくみ
- 選択した製品を比較する方法
このウィジェットの使用は非常に簡単です。 表のデータは製品自体から直接取得され、手動入力に関連する通常の問題はありません。 あなたがする必要があるのは、テーブルにある製品とそれらに付随する情報を選択することだけです。
また、テーブルのスタイルを設定することも重要であり、WooCommerce製品比較ウィジェットにはそのための多くのオプションがあります。 ウィジェットをページに挿入するとすぐに取得するデフォルトの外観が確かにあり、フォントなどのいくつかのものがテーマの外観とどのように一致するかがすぐにわかります。 したがって、少しカスタマイズするだけで、テーブルの見栄えが良くなります。
商品とそれに関連する情報を追加したら、商品比較表の作成を開始できます。 これは、WooCommerceプラグインを使用して作成された1つの製品のプレビューです。
Elementorを使用して目的のページを編集するために入力すると、使用可能なウィジェットの中に製品比較ウィジェットが表示されます。 すべてのQiウィジェットには、独特の外観と赤いアイコンがあります。
ウィジェットを横にドラッグすると、テーブルがなく、「目的の製品を選択してください」という通知のみが表示されます。 もちろん、最初に商品を追加する必要があります。 この要素のすべての設定は、[コンテンツ]タブと[スタイル]タブで確認できます。 [詳細設定]タブにもさまざまな設定がありますが、これらはElementorに属しており、各要素に固有の設定ではないため、既に知っています。
それでは始めましょう。 [コンテンツ]タブでは、製品比較テーブルにどのデータを含めるかを決定します。 まず、商品を追加するだけです。
また、ID、日付、ランダムなど、選択した製品がテーブルに配置される順序を選択できます。
表示するフィルターは、比較テーブルで使用されるデータを決定するオプションです。 現在、画像、タイトル、価格、在庫の4つのアイテムがあります。 可用性。
ただし、リストから自分に合った順序で何でも選択できます。 テーブルに対して次の選択を行いました。
商品のページにつながる商品の名前や、もちろん「カートに追加」など、一部のパーツをクリックできることに気付くでしょう。これにより、その場で商品をカートに追加できます。 当然、カートへの追加がテーブルの一部である必要はありませんが、ほとんどの場合、非常に便利です。
ボタンの設定は、カートに追加ボタンに関連しています。 これらの設定をテーブルに追加する場合は、これらの設定が重要です。 利用可能ないくつかのレイアウトとボタンタイプがあります。 ボタンにアイコンを追加して、さらに面白くすることもできます。 それはすべてあなたのニーズに依存し、私たちのアドバイスはすべてのオプションを探求することです。 直感的であり、画面の右側にすべての変更がライブで表示され、すべてを自分で非常に簡単に理解できるため、それぞれを個別に説明することはしません。
ディスプレイの不可欠な部分になることを選択した場合、評価オプションは論理的にはディスプレイの評価にリンクされます。 星は評価を表示する最も一般的な方法ですが、他のアイコンを選択できないという意味ではありません。 アイコンライブラリは自由に使用できますが、必要なSVGを自分で追加することもできます。
前述のように、[コンテンツ]タブを使用して表示するデータを選択し、[スタイル]タブに移動して、選択した各要素のスタイルを設定します。
設定はグループ化されており、一見すると、設定がどこにあるかが明確になります。 もちろん、各グループを調べて、そこに何があるかを確認してください。 色、余白、タイポグラフィ、サイズを選択するためのオプションは、調整できる詳細の数に気付いたときに驚かれることでしょう。
探索してプレイするのは面白いと思うので、すべてのオプションを確認する必要はありません。重要なオプションをいくつか紹介します。
画像スタイルは興味深く重要なオプションです。 経験から、すべての製品が同じ寸法の注目画像（製品を表し、テーブルにもある画像）を持っているとは限らないことがわかっています。 次に、テーブル内の画像が異なる次元で表示されるという問題が発生します。 そのため、正方形、横向き、縦向き、カスタムオプションを使用すると、写真を同じサイズに設定できるため、これらのオプションが重要になります。 他のオプションも興味深いものであり、注目の画像のサイズに大きな偏差がない場合に最も頻繁に使用します。
ボタンスタイルのオプションも、ほとんどの場合、ボタンをテーマの外観に合わせて調整するために必要なものです。 デフォルトの外観であり、変更せずにそのまま使用できますが、もう少し調整することをお勧めします。
背景、字幕のタイポグラフィ全体を変更したり、パディングを配置したりできます。また、ホバーボタンの外観を設定することもできます。
評価スタイルには、特に、使用するアイコンのサイズを変更するためのオプションが含まれています。これは、ユーザーにとって重要な場合がありますが、アイコン間のスペースや、評価のマークされた部分とマークされていない部分のスタイル設定にも重要です。
そして、想像力を解放したときの様子は次のとおりです。最後の製品には評価がなく、理由がわかります。誰も評価しておらず、フィールドが空であることがわかります。 空のフィールドを気にする場合は、評価フィールドを他の要素に簡単に置き換えることができます。 もちろん、テーブルを設定すると、その中のデータを変更できます…
結論は
買い物客のタイプはたくさんありますが、一般的に、誰もがきちんとした製品比較表を好みます。 ご覧のとおり、Qi Addonsを使用すると、製品比較を簡単に追加できるため、WordPressの完全な初心者であっても、躊躇する必要はありません。美しくカスタマイズされた製品比較テーブルを簡単に追加できます。それに時間。 Qiアドオンがいかに簡単に機能するかを理解したら、営業時間、 Elementorプロセスウィジェットなど、より便利な要素をWebショップに追加することに興味があるでしょう。あるいは、強調表示して特定のコンテンツを強調する方法を探求したいと思うでしょう。テキスト。 確かにあなたのウェブサイトをより魅力的で魅力的なものにするための多くの異なる方法があります。
この記事がお役に立てば幸いです。 あなたがそれを好きなら、これらの記事のいくつかもチェックしてください！
- WordPressで画像ホットスポットを簡単に追加する方法
- アプリのための最も魅力的なWordPressテーマ
- あらゆるビジネスのためのトレンディなeコマースWordPressテーマ