エレメンタ WooCommerceのカートウィジェット！ショッピングカートページ今回は、Elementorのカートウィジェットを使って、ブランドの一貫性を高め、ユーザーエクスペリエンスを向上させ、最終的な取引の効率を最適化する方法をご紹介します。今回はElementorのカートウィジェットの使い方を詳しく紹介し、レイアウトの追加、テキストの設(shè)定、デザインの美化、モバイルへの対応まで、ショッピングカートページのフルカスタマイズを完成させます。

Elementorカートウィジェットとは何ですか？

Elementorのカートウィジェットは以下のために設(shè)計されています。 WooCommerce ショップに合わせたショッピングカート表示コンポーネント。デフォルトのWooCommerceショートコードの制限から解放され、ショッピングカートページの構(gòu)造とスタイルの完全なコントロールをサポートします。タイポグラフィ、色、フォント、ボタンスタイルなどの詳細(xì)は、Elementorのドラッグ＆ドロップエディタを使って簡単に変更でき、ショッピングカートページをよりプロフェッショナルに、あなたのブランドのスタイルに沿ったものにすることができます。

特性::

• 自由度の高いデザイン: WooCommerceのプリセットスタイルに制限されることなく、完全にカスタマイズ可能なカード構(gòu)造。
• コンバージョン率の向上：明確なレイアウトと高い視認(rèn)性は、ユーザーが素早くチェックアウトを完了するのに役立ちます。
• ブランドの一貫性：サイトの他のページと色、フォント、スタイルを統(tǒng)一し、全體的な體験を向上させる。

Elementorカートウィジェットの使い方

WooCommerceのインストールとElementorによる編集の有効化

WooCommerceプラグインがインストールされ、有効になっていることを確認(rèn)し、編集のためにElementorでショッピングカートページを開きます。デフォルトでは、このページはWooCommerceの "woocommerce_cart" ショートコード生成。Elementorのカートウィジェットに置き換える必要があります。

カートウィジェットの追加とレイアウトの設(shè)定

• Elementorで検索 "カート"をクリックし、ショッピングカート?ウィジェットをページにドラッグする。

• 一般オプションでレイアウトモードを再度設(shè)定する：
  • シングルカラム：コンテンツが少ないページ用。
  • デュアルカラム：注文概要とショッピングアイテムを別々に配置することで、より直感的にわかりやすくなりました。

コピーとボタンテキストの設(shè)定

コンテンツ設(shè)定パネルの合計で、以下のテキストフィールドをカスタマイズできます：

• ショッピングカートの更新ボタン
• クーポンボタンのテキスト
• 小計セクション見出し
• チェックアウトボタンのテキスト
• 配送ボタンの更新（WooCommerceで配送設(shè)定が有効になっている必要があります。）

スタイル設(shè)定の説明

"の中にある。タイプタブ "は、以下のハイライトされたモジュールに示されているように、ショッピングカートの外観を完全に制御することができます：

1.全體的なレイアウトスタイル（セクション）

• 背景色
• ボーダーと角丸
• 內(nèi)マージンと外マージン
• ボックスシャドウ

2.タイポグラフィ

• タイトルと説明文の色、フォント、サイズの設(shè)定
• リンク狀態(tài)（ノーマル/オーバー）の色
• 商品名、価格、數(shù)量フォント

3.フォームスタイル（フォーム）

• クーポンコードと配送フォームのフィールドスタイル（色、フォント、背景
• ノーマル狀態(tài)とフォーカス?fàn)顟B(tài)でスタイルを分ける
• 圃場間隔（行間）の設(shè)定

4.ボタン

• クーポンコードボタン、更新ボタン、チェックアウトボタンを個別に設(shè)定可能
• カラー、フォント、ボーダー、シャドウ、ホバーステータスが含まれます。

5.注文概要

• 商品名、數(shù)量、小計のスタイルの制御
• 商品セパレータースタイルの設(shè)定
• 製品リンクの色と相互作用の狀態(tài)

6.合計

• タイトルと金額のフォントスタイルの設(shè)定
• 合計金額の上部に仕切りを追加する
• チェックアウトボタンのスタイルをカスタマイズする

概要

ElementorのCartウィジェットは、WooCommerceのショッピングカートページにこれまで以上に自由なデザインを提供します。コンバージョンを増やしたい、ブランドの一貫したショッピング體験を作りたい、モバイルワークフローを最適化したいなど、カートウィジェットを使えば簡単に実現(xiàn)できます。

WordPress関連のチュートリアルや情報については、以下のリンクを參照してください。光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時間: 月～金、9:30～18:30、祝日休み