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

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

このチュートリアルでは、ショッピングカート內(nèi)の商品の合計(jì)數(shù)を表示し、商品が追加または削除されたときに數(shù)量が自動(dòng)的に更新される方法を?qū)Wびます。

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

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

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

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

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

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

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

// カート內(nèi)のアイテム數(shù)を表示する
関數(shù) display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count()；
    $cart_url = wc_get_cart_url(); ?
    ?>
    <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 刷新購物車商品數(shù)量
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のタイトルテンプレートに移動(dòng)します。

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

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

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

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

5. アイコンリストの設(shè)定::

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

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

[カートアイテム數(shù)］

6. 保存と更新::
   • 設(shè)定が完了したら、"更新"ボタンをクリックして変更を保存する。

スタイリング

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

カスタムCSSの追加::

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

.elementor-icon-list-item .cart-contents {.
    position: relative；
    display: inline-block；
}
.elementor-icon-list-item .cart-contents-count { [カートコンテンツ數(shù)
    
    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)

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

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

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

概要

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

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