Elementorを使ってWooCommerceのショッピングカートに商品の総数を表示するための詳細ガイド - Photonflux.com｜WordPress修理サービス、プロフェッショナル、グローバル、迅速対応

WordpressのElementorエディタを使って、WooCommerceのカートにある現在の商品の総数を表示するにはどうすればよいですか？Elementor Icon List要素を使用しますが、この方法は他のほとんどの要素にも使えます。

これが私たちが達成しようとしている効果だ：

このチュートリアルでは、ショッピングカート内の商品の合計数を表示し、商品が追加または削除されたときに数量が自動的に更新される方法を学びます。

まず、WooCommerce Shopping Cart Total short コードスニペットを追加します。

開始するには、以下のコードを新しいPHPコードスニペットに追加する必要があります。Code Snippetsプラグインを使うか、子テーマの functions.php ドキュメンテーション

を探し、編集する。 functions.php ファイルを作成するには、以下の手順に従ってください：

WordPressのダッシュボードにログインする.
外観」＞「テーマファイルエディター」に移動する。.
- 左のメニューから「外観」をクリックし、「テーマファイルエディター」を選択します。

サブトピックを選択.
- 右上の「編集するテーマを選択」ドロップダウンメニューから子テーマを選択します。

見つける functions.php 書類.
- 右側のファイルリストから functions.php ドキュメンテーション

ある functions.php ファイルの最後にコードを追加し、" "をクリックします。更新資料"ボタンをクリックして変更を保存する。

// カート内のアイテム数を表示する
関数 display_cart_count() {
    $cart_count = WC()-&gt;cart-&gt;get_cart_contents_count()；
    $cart_url = wc_get_cart_url(); ?
    ?&gt;
    <a class="menu-item cart-contents" href="/ja/</?php echo $cart_url; ?>" title="ショッピングカートを見る">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
}

// 使用短代码
add_shortcode('cart_count', 'display_cart_count');

// Ajax 刷新购物车商品数量
function refresh_cart_count($fragments) {
    ob_start();
    $cart_count = WC()->cart->get_cart_contents_count();
    ?>
    <a class="menu-item cart-contents" href="/ja/</?php echo wc_get_cart_url(); ?>" title="ショッピングカートを見る">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-contents-count"><?php echo $cart_count; ?></span>
    </a>
    <?php
    $fragments['a.cart-contents'] = ob_get_clean();
    return $fragments;
}
add_filter('woocommerce_add_to_cart_fragments', 'refresh_cart_count');

次に、Elementorのタイトルテンプレートに移動します。

WooCommerceカート内のアイテム総数を表示したいElementorヘッダーテンプレート（または他の場所）を開き、アイコンリスト要素を追加します。以下の手順に従ってください：

テンプレートに移動する::
- 左のメニューから「テンプレート」をクリックする。
- 次に「Theme Builder」（または「テーマビルダー」）を選択する。

編集するテンプレートを選択::
- テーマビルダーページでは、ヘッダー、フッター、シングル投稿、アーカイブページなどのすべてのテンプレートが表示されます。
- ヘッダーテンプレートを編集するには、「ヘッダー」テンプレート（または「ヘッダー」）を見つけてクリックします。

テンプレートの編集::
- 編集したいタイトルテンプレートを見つけ、「Elementorで編集」ボタン（または「Elementorで編集」）をクリックします。
アイコンリスト要素の追加::
- Elementorエディタで、左のパネルにある "Icon List "要素（または "Icon List"）を探します。
- アイコンリスト要素をWooCommerceカート内のアイテム総数を表示したい場所にドラッグします。

アイコンリストの設定::

アイコンのリストで、アイコンの項目の1つを選択し、アイコンをクリックしてショッピングカートのアイコンを選択します。

この項目のテキストフィールドに以下を入力する：

[カートアイテム数］

保存と更新::
- 設定が完了したら、"更新"ボタンをクリックして変更を保存する。

スタイリング

もう少し見栄えを良くしよう。そうしないとこんな感じになる：

カスタムCSSの追加::

アイコンリスト要素を選択します。
左のパネルで、"高いレベルタブ
CSSのカスタマイズ」セクションを見つけてクリックする。
カスタムCSS入力ボックスに以下のCSSコードを追加する：

.elementor-icon-list-item .cart-contents {.
    position: relative；
    display: inline-block；
}
.elementor-icon-list-item .cart-contents-count { [カートコンテンツ数
    
    top: -10px；
    right: -10px; } カートコンテンツカウント
    background: 赤; color: 白; }.
    background: red; color: white; } background: red; color: white
    border-radius: 50%；
    padding: 2px 6px; font-size: 12px; font-size: 6px
    font-size: 12px; }
}

CSSではこのセクションが2回出てくる：

:nth-child(3)

どちらも自分のアイコンに合うように調整する。

例えば、ショッピングカートのアイコンがアイコンのリストの最初にある場合、次のように変更します。:番目の子(1)というより:番目の子(3).

残りのCSSは、カウントの位置とスタイルを決めるために必要に応じて調整する。

概要

カスタムPHPコードスニペットを追加し、子テーマの functions.php ファイルを使用して、カートアイテムの数を表示するショートコードを作成します。また、Elementorのヘッダーテンプレートにアイコンリスト要素を追加し、そのショートコードを使用してページ上のカートアイテムの総数を表示する方法も紹介しています。最後に、Elementorのアイコンを使用して、WooCommerceのカート内のアイテム数をリアルタイムで表示します！ユーザーにより良いショッピング体験を。

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