ElementorでWooCommerceカートを設計する方法[コーディングなし]

顧客は購入の途中でWooCommerceカートを放棄していますか？ この背後にある非常に一般的な理由は、ユーザーが買い物をするのに混乱していると感じる無秩序なカートページである可能性があることをご存知ですか？ しかし、もう心配する必要はありません。 ElementorのEssentialAddonsの最新アップデートにより、カートの放棄率を減らし、売り上げを伸ばすための最も簡単なソリューションを提供します。

このブログでは、ストアのWebサイトでWooCommerceカートページをカスタムデザインすることが最善のアプローチである理由を説明します。 しかし、それだけでなく、売り上げを確実にもたらすプロがデザインしたカートを作成するのに役立つようにそれで、さらに遅れることなく、すぐに飛び込んで詳細を調べましょう。

カスタムWooCommerceカートページをデザインする必要があるのはなぜですか？

調査によると、 10人中7人近くの顧客が、販売している商品に満足していても、ショッピングカートを放棄し、二度と戻ってこないでしょう。 そして、冒頭で述べたように、それの主な理由は、顧客がナビゲートできなかった混乱した、または雑然としたカートページです。

潜在的な顧客がショッピングページに戻って、必要な他の製品を追加できない場合があります。 それ以外の場合は、使用したいと思っていた販売クーポンコードを添付すると問題が発生する可能性があります。 購入者は、すでにWooCommerceカートページにアクセスした後、同じ商品を追加できないとイライラすることさえあります。

そして当然のことながら、優れた製品やサービスを提供することは非常に残念なことですが、それでも、特に単純なページデザインの問題が原因である場合は、カートの放棄率が高くなります。 しかし、 ElementorのEssential Addonsのチームからの最新リリースで、あなたの心配はもうすぐ終わります。 Elementorの驚くほどデザインされたプロ並みのeコマースカートページを使用して、簡単に売り上げを伸ばす方法については、詳細をご覧ください。

EssentialAddons5.0を使用してプロフェッショナルなWooCommerceカートを設計する

2021年は、ElementorのEssentialAddonsチームにとって素晴らしい年でした。 私たちは最大のマイルストーンに到達し、これまで夢見ていたよりも早く成長しました。 そして、それはすべてあなたのおかげです。 そのため、同じ高評価で1年を締めくくり、最高のWeb構築体験を提供するために、最新のアップデートであるEssentialAddons5.0をお届けします。

最新のリリースには、ElementでのWebデザインスキルを完全に簡単に解き放つための多くの改善、新しい要素、および拡張機能が含まれています。 また、このアップデートには専用ウィジェットEAWooCartも付属していることをお知らせします。

この信じられないほどの新しい要素により、Elementorを使用して、数回クリックするだけでコーディングなしで、ストアにデザイナーのWooCommerceカートページを簡単に作成できます。 したがって、eコマース業界に不慣れな場合でも、経験豊富なストアオーナーでも、このEssential Addonsウィジェットを使用して、潜在的なウィンドウショッパーを有料の顧客に簡単に変換できます。

そしてその最大のハイライトは、Elementorで完全にカスタマイズ可能であり、選択できるさまざまなデザインレイアウトが付属しており、WooCommerceストアの美学と完全に一致していることです。 詳細については、読み続けてください。

コーディングなしでElementorにスムーズなEAWooカートをセットアップする

言うまでもなく、ストアを完璧に構築するには、 WooCommerceプラグインをインストールして構成していることを確認する必要があります。 ただし、この場合は重要です。この高度なウィジェットをElementor Editor内で機能させるには、WooCommerceストアからカートにいくつかの製品を追加する必要があるためです。 それが完了すると、ストアでEAWooCartウィジェットを簡単に使用できるようになります。 方法については、以下の手順に従ってください。

ステップ1：希望するWooCommerceカートページを設定する

何よりもまず、WordPressダッシュボードから直接WooCommerce→設定ページに移動し、 [詳細設定]タブに移動します。 ここから、任意のページを新しいカートページとして割り当てることができます。

下の画像からわかるように、 [カートページ]オプションをクリックして、ドロップダウンメニューからWooCommerceカートページとして任意のページを選択するだけです。 あなたはすべて行く準備ができています。

ステップ2：ElementorでWooCommerceカートを編集する

次のステップは、ElementorEditorを使用して数回クリックするだけでWooCommerceCartページを編集することです。 ただし、その前に、Essential AddonsforElementorでEAWooCart要素を有効にする必要があります。

Essential Addons 5.0 PROの最新バージョンがインストールされていることを確認してから、Essential AddonsforElementorユーザーインターフェイスから[ Elements ]タブに移動します。 ここには80以上の利用可能な要素がありますが、必要なのは「 EA Woo Cart 」オプションを切り替え、「 SaveSettings 」をクリックして開始することだけです。

ステップ3：ElementorでWooCommerceカートを編集する

これで、Elementorで見事なカートページをデザインする準備が整いました。 したがって、WooCommerceカートページに移動し、「 Elementorで編集」をクリックするだけです。

Elementorエディターを使用したら、 [要素]タブの[検索]オプションから[ EAWooCart ]要素を見つけます。 次に、以下に示すように、 「EA Woo Cart」要素を、ElementorEditorの任意のセクションにドラッグアンドドロップするだけです。 本当に簡単です。

EAウーカートの各側面を簡単に構成

これでWooCommerceカートが設定されましたが、顧客にとってプロフェッショナルでわかりやすいように、スタイルとカスタマイズを行う必要があります。 そして、このセクションでは、それを簡単に行う方法に焦点を当てます。

ステップ1：EAWooCartの一般設定を構成する

Elementor Editorのサイドパネルの[コンテンツ設定]タブには、 [一般設定] 、 [テーブルビルダー] 、 [カートコンポーネント]などのオプションがあります。

「一般設定」から、以下に示すように、EA Wooカートの2つの異なるスタイルのレイアウトから選択し、好みに合わせてカスタマイズできます。

ステップ2：テーブルビルダーからラベルを変更する

次に、「テーブルビルダー」から、テーブルラベルを変更し、セクションをドラッグして、EAWooCart価格テーブルを再配置できます。 これにより、カートページに追加したすべての列（「製品」、「価格」、「数量」など）からすべてのラベルを変更するための完全な柔軟性が得られます。

ステップ3：カートコンポーネント機能をカスタマイズする

次に、[カートコンポーネント]セクションに移動します。このセクションでは、[カート更新ボタン]を切り替えるだけで、顧客がカートに商品を追加できるようになります。

しかし、それだけでなく、「クーポンフォーム」を切り替えて、顧客がWooCommerceカートページでチェックアウト時に必要なクーポンを簡単に追加できるようにすることもできます。 これに加えて、「買い物を続ける」オプションを有効にして、顧客が再びショップページに戻ってさらに買い物をするのを支援することもできます。 さらに、このセクションの「チェックアウトボタン」のテキストを変更して、行動を促すフレーズをよりインタラクティブにすることもできます。

これらのボタンとオプションはすべて、顧客がWooCommerceカートページを完全に理解し、このページを簡単にナビゲートするのに役立ちます。 そのため、EA Woo Cartウィジェットを使用すると、カートの放棄率とバウンス率を一度に減らすことができます。

数回のクリックでEAウーカートのスタイルを完全にカスタマイズ

最後に、 EA Woo Cartページのコンテンツを構成したら、WooCommerceWebサイトまたはブランドの美学に一致するようにスタイルを設定します。 これを行うには、Elementorエディターの[スタイル]タブをクリックするだけで、ページのさまざまな領域をカスタマイズできます。

ステップ1：一般設定のスタイルを設定する

「一般」セクションから、 EAWooCartセクション全体の背景色を変更できます。 EA Woo Cartの背景の色を手動で調整するか、グローバルカラーを選択できます。

ステップ2：テーブルセクションで詳細を確認する

「テーブル」セクションから、カートセクション全体のパディング、マージン、タイポグラフィ、境界線の種類などを変更できます。 最終的には、EA Woo Cartページが他のWooCommerceストアから際立って、完全にカスタマイズされたように見えます。

ステップ3：他の設計面を変更する

しかし、それだけではありません。 同様に、「カート合計」、「クーポンフォーム」 、「買い物を続ける」、 「ボタン」 、 「通知」の外観を変更できます。 内部のテキストも変更できます。

より多くの機能を追加し、EA Woo Cartページをよりインタラクティブで魅力的に見せるために、 「詳細」設定オプションを調べることもできます。

プロ並みのデザイナーWooCommerceカートページ

以上です。 これらの小さな手順と簡単なカスタマイズにより、好みに応じてWebサイト用の見事なWooCommerceカートページを簡単に作成できます。 それも、1行のコーディングを使用せずに。

以下の最終結果を確認し、プレミアムEssential Addons EA Woo Cartウィジェットを使用して、WooCommerceのプロ並みのデザイナーカートページを確認してください。

あなたのWooCommerceストアのための他の排他的なウィジェット

これで、コーディングなしで完全に簡単にElementorでWooCommerceカートを設計する方法に関する究極のガイドを締めくくりたいと思います。 ただし、出発する前に、Essential AddonsforElementorからアクセスできる他のすべてのWooCommerceウィジェットについてお知らせします。

この優れたプラグインは、数回クリックするだけでWooCommerceストアのあらゆる側面を改善するウィジェットを提供します。 調べることができる要素はさらに7つあります。

ウー製品ギャラリー

Woo製品スライダー

ウー製品カルーセル

Woo製品グリッド

Woo製品比較

Woo製品コレクション

ウーチェックアウト

Essential Addonsサイトからそれらをチェックして、WooCommerceストアの売り上げを簡単に増やしましょう。

Essential Addons 5.0にアップデートして、WooCommerceの売り上げを伸ばす

何を求めている？ 待たないで！ 今すぐEssentialAddons5.0にアップデートして、ユニークでコンバージョン率の高いWooCommerceストアの作成にご参加ください。 または、わずか39.97ドルの特別価格で始まる、すべてのプレミアム機能を使用してトラフィック、販売、コンバージョンを急増させているPROパッケージをチェックしてください。

ご提案がございましたら、以下のコメントでお知らせいただくか、サポートチームにお問い合わせください。 皆様からのフィードバックをお待ちしております。 その他の更新、チュートリアル、ヒントとコツについては、ブログを購読するか、フレンドリーなFacebookコミュニティに参加してください。