WooCommerce Elementor ウィジェット: PowerPack を使用してクリエイティブなコマース Web サイトを構築する

公開: 2023-04-26

Team PowerPack は、新しいクリエイティブなElementor WooCommerce ウィジェットを提供します。スタイリッシュな WooCommerce Web サイトを構築しようとしたことがあるなら、その苦労が現実のものであることをご存知でしょう。これらの Web サイトのレイアウトとページをカスタマイズするのは簡単ではありません。

しかし、これらの素晴らしい WooCommerce 用の Elementor ウィジェットを使用すると、WooCommerce で構築された e コマースサイトに、よりインタラクティブでカスタマイズ可能な要素を追加できます。既存のすべてのElementor ウィジェットと同様に、これらのウィジェットは、 Elementor で構築された WooCommerce ストアに優れたカスタマイズオプションと機能を提供します。

これらのウィジェットを使用して、夢の e コマース Web サイトを作成できます。 Woo ウィジェットの機能と高度な機能は、想像力豊かなデザインを実際のサイトに変えるのに役立ちます。製品ページのスタイルを設定する場合でも、カートページにカスタマイズを追加する場合でも、すべて数回クリックするだけで実行できます。コーディングのスキルは必要ありません。

Elementor WooCommerce ウィジェット

Elementor を使用して WooCommerce Web サイトを構築すると、制限が生じる場合があります。 Elementor Pro は広範な機能とオプションを提供しますが、変更されていない領域もあります。そのため、Elementor をさらに拡張するには、Elementor アドオンを探す必要があります。

WooCommerce Elementor ウィジェットを使用すると、時間と労力を大幅に節約できます。これらのウィジェットは、WooCommerce を使用して構築されたオンラインストアのデザインと機能を強化するために使用されます。ユーザーは、製品リスト、製品カテゴリ、ショッピングカート、チェックアウトフォームなどの要素を e コマース Web サイトに簡単に追加できます。

すべての WooCommerce ウィジェットをチェックしてみましょう:

1. Elementor WooCommerce 製品ウィジェット

Woo Product Grid ウィジェットを使用すると、商品ページに印象的な商品ディスプレイを作成できます。与えられたカスタマイズ力により、数十のデザインで製品を訪問者に表示できます.

PowerPack WooCommerce Products Landing ページをチェックして、Woo Products Grid を使用した製品ページの外観を把握してください。

Woo Product Grid Widget には、カルーセルとグリッドのレイアウトを選択するオプションがあり、必要に応じてレイアウトを簡単に切り替えることができます。 カートに追加、クイックビュー、販売ラベルなどの便利な機能とともに、カスタマイズされたレイアウトで製品を表示できます。

これらの印象的な機能に加えて、カスタマイズされた製品バッジを表示することもできます. 製品バッジを使用すると、顧客の注目を集め、すぐに売り上げを伸ばすことができます。

製品グリッドウィジェットの機能:

カルーセルとグリッドレイアウト
カスタマイズされたスキンオプション
カスタムの行と列
無制限のレイアウトスタイルオプション
高度なタイポグラフィオプションが利用可能
ホバー効果
クイックビュー機能
評価表示システム

Woo Product Grid ウィジェットのランディングページをご覧ください。

2. Elementor WooCommmerce カテゴリウィジェット

ショップ内のすべての製品を表示するのではなく、顧客が製品カテゴリを選択するのに役立つ別のページが必要ですか? Woo カテゴリウィジェットの助けを借りて同じことができるのに、なぜ余計な作業をするのでしょうか?

PowerPack Woo カテゴリウィジェットを使用すると、商品カテゴリをスタイリッシュなレイアウト (グリッド、カルーセル、タイル) で表示できます。 任意のカテゴリレイアウトを選択して、Web サイトに美しい製品ディスプレイを作成できます。

また、Elementor エディターを使用して、Web サイトの WooCommerce 製品カテゴリボタンを簡単にカスタマイズできます。

Woo カテゴリウィジェットの機能:

複数のレイアウトスタイル – グリッド、カルーセル、タイル
カスタマイズ可能な事前に設計されたレイアウト
カテゴリのタイトル、説明、商品数を有効/無効にする
完全なデザインのカスタマイズオプション
カスタムカテゴリ数
カスタム列オプション
コンテンツの位置オプション
高度なフィルタリング
カスタムオーダーオプション

Woo Category ウィジェットのランディングページをご覧ください。

3. Elementor WooCommerce マイアカウントウィジェット

Elementor と WooCommerce 向けの史上初のマイアカウントウィジェット。

この PowerPack Woo ウィジェットを使用すると、WooCommerce で構築された e コマースサイトのマイアカウントページを簡単にスタイルできます。

当時、カスタムコードと CSS なしで Woo Web サイトのこの部分をカスタマイズすることはまったく不可能でした。ただし、マイアカウントページのスタイルを変更したり、必要に応じて変更したりできるようになりました。

フロントエンドのタブの変更から、ページのさまざまな側面のスタイリングまで。数回クリックするだけですべてを実行できます。

Elementor を使用して WooCommerce マイアカウントページをカスタマイズする

WooCommerce マイアカウントウィジェットの機能:

タブのプレビューオプション
テーブル、タブ、ボタンのスタイルオプション
垂直および水平タブレイアウト
位置と配置を制御
高度なカスタマイズオプション

4. Elementor WooCommerce チェックアウトウィジェット

Woo Checkout は、Web サイトのチェックアウトページのカスタマイズが難しい場合に探していたものです。

この PowerPack ウィジェットを使用すると、高度なカスタマイズと編集オプションを使用して、WooCommerce チェックアウトページを好きなようにパーソナライズおよびカスタマイズできます。

Woo Checkout ウィジェットの機能:

1 列と 2 列のレイアウト
高度なスタイリング設定
カスタムタイポグラフィ設定
デザインのカスタマイズオプション
クーポンバーセクションのスタイルオプション。

WooCommerce Checkout ウィジェットのランディングページを表示します。

5. Elementor WooCommerce カートウィジェット

平均して、カートの 50% 以上が処理されておらず、チェックアウトを通過していないことをご存知ですか? もう1つの残念なことは、多くの場合、カートが放棄される理由は、複雑で煩わしいカートページにあることです.

この問題に取り組むために、Elementor 用の Woo Cart ウィジェットを考え出しました。これにより、Web サイトに見栄えの良いカートを作成できるため、ユーザーは快適なチェックアウト体験を得ることができます。

Woo Cart ウィジェットの特徴:

シンプルでエレガントなカスタムデザイン
画像のカスタマイズと編集力
全体レイアウトの高度なカスタマイズ
ボタンのカスタマイズ
クーポンフィールドを有効/無効にする
クロスセルの有効化/無効化

WooCommerce カートウィジェットのデモをご覧ください。

6. Elementor WooCommerce カートに追加ウィジェット

人々やウェブサイトの所有者は、「カートに入れる」ボタンの重要性にあまり注意を払っていません。ボタンがどのように設計されているかは、訪問者または買い物客がボタンをクリックする可能性について多くのことを示しています。これまで、このボタンに利用できるカスタマイズはあまりありませんでした。

しかし今では、Elementor の WooCommerce Add to Cart ウィジェットを使用して、ボタンをデザインし、Web サイトの好きな場所に配置できます。

カートに追加ウィジェットの機能:

カスタム製品選択オプション
数量の有効化/無効化
自動リダイレクトオプション
ボタンのカスタムテキストオプション
ボタンのカスタマイズ – 配置、サイズ、パディング、アイコン。
ボタンのカスタマイズ – デザイン、色、タイポグラフィ、ホバーオプション。

WooCommerce Add to Cart ウィジェットのランディングページを確認してください。

7. WooCommerce オフキャンバスカート

クリエイティブな Woo Off キャンバスカートウィジェットを使用して、ウェブサイトのチェックアウトプロセスを改善し、ユーザーエクスペリエンスを向上させます。このウィジェットを使用すると、スタイリッシュなスライドパネルを追加して、カートの内容をサイトに表示できます。フライアウトは、ページの左、右、上、下のどの側からでも表示できます。

このウィジェットには高度な機能オプションが付属しており、カスタムコードを追加せずに印象的なオフキャンバスカートを柔軟に作成できますが、開発者のアプローチを念頭に置いて、オフキャンバスパネルをトリガーするオプションも提供しています。カスタムクラスと ID トリガーオプション。

Class & ID に慣れていない場合は、ボタンまたはアイコンを表示して、オフキャンバスパネルカートを開くことができます。

また、クールなアニメーションを追加して、サイトにクリエイティブなオフキャンバスパネルを作成することもできます。

Woo Off キャンバスカートの特徴:

高度なトリガーオプション: ボタン、要素クラス、要素 ID
ボタンのクリエイティブ表示オプション
コンテンツの表示と配置
魅力的なトランジションアニメーション
カスタムカートのタイトルとメッセージ
カートを閉じるオプション: オーバーレイをクリック、閉じるには Esc など
ボタンのカスタマイズ
無限のスタイリングオプション

WooCommerce Off Canvas Widget のランディングページをご覧ください。

8. Elementor WooCommerce ミニカートウィジェット

カートは、e コマースストアで最も重要な役割の 1 つを果たします。機能的なカートを使用すると、ユーザーエクスペリエンスが向上し、カートの放棄率が低下します。 Woo Mini Cart ウィジェットを使用すると、ウェブサイトのヘッダーまたはメニューにカートアイコンを表示できます。

このウィジェットには、すべての要素をカスタマイズし、WooCommerce Web サイトの任意のページにミニカートを追加できる高度な機能が搭載されています。

ホバーまたはクリックでカートの内容を表示するように設定したり、カスタムカートのタイトルやメッセージなどを追加したりできます…

Woo Mini Cart ウィジェットの特徴:

豊富なカスタマイズオプション
カスタムカートのタイトルとメッセージを追加
高度なカートトリガー機能
ボタンスタイルオプション
アイテムカウンターのカスタマイズ

Elementor を使用してウェブサイトにミニ WooCommerce カートを追加する方法

WooCommerce ミニカートウィジェットのランディングページを表示します。

Elementor 用の WooCommerce ウィジェットを入手してください!

PowerPack Elementor アドオンを使用して、Web サイトで WooCommerce Elementor ウィジェットウィジェットを簡単に使用できるようになりました。

最良の部分は、既存の PowerPack ウィジェットでこれらすべてのウィジェットを追加料金なしで入手できることです。したがって、これらの素晴らしいウィジェットにアクセスするために追加料金を支払う必要はありません!

PowerPack をお持ちの場合は、アカウントエリアから最新バージョンをダウンロードして、これらのウィジェットをすぐに使い始めることができます。

PowerPack をお持ちでない場合は、今すぐ入手できます。

以下にコメントして、新しいウィジェットについてのご意見をお聞かせください!

もっと WooCommerce のチュートリアルを読む:

Elementor を使用してカスタム WooCommerce ストアを構築する方法
ElementorでWooCommerceチェックアウトページをカスタマイズする方法は?
Elementor を使用して WooCommerce 製品カルーセルを作成する方法
Elementor を使用して WooCommerce マイアカウントページをカスタマイズする方法