Wie kann ich die Gesamtzahl der aktuellen Artikel in meinem WooCommerce-Warenkorb mit dem Elementor-Editor in Wordpress anzeigen? Wir werden das Elementor Icon List-Element verwenden, und diese Methode wird auch für die meisten anderen Elemente funktionieren.

Das ist der Effekt, den wir zu erreichen versuchen:

In diesem Tutorial lernen Sie, wie Sie die Gesamtzahl der Artikel in Ihrem Einkaufswagen anzeigen können. Die Menge wird automatisch aktualisiert, wenn Artikel hinzugefügt oder entfernt werden.

Fügen Sie zunächst das kurze Codeschnipsel WooCommerce Shopping Cart Total hinzu.

Um zu beginnen, muss der folgende Code zum neuen PHP-Code-Snippet hinzugefügt werden. Verwenden Sie entweder das Code Snippets-Plugin oder fügen Sie ihn direkt in das Child-Theme ein funktionen.php Dokumentation.

Zum Auffinden und Bearbeiten der funktionen.php Datei zu erstellen, können Sie die nachstehenden Schritte ausführen:

1. Anmeldung bei WordPress Dashboard.
2. Navigieren Sie zu "Erscheinungsbild" > "Editor für Themendateien"..
   • Klicken Sie im linken Menü auf "Erscheinungsbild" und wählen Sie dann "Theme File Editor".

3. Unterthema auswählen.
   • Wählen Sie Ihr Child-Theme aus dem Dropdown-Menü "Wählen Sie ein zu bearbeitendes Thema" in der oberen rechten Ecke.

4. ausfindig machen. funktionen.php Datei.
   • Suchen Sie in der Liste der Dateien auf der rechten Seite die Datei funktionen.php Dokumentation.

existieren funktionen.php Fügen Sie den Code am Ende der Datei ein und klicken Sie auf "Aktualisierte Dokumente", um die Änderungen zu speichern.

// Anzeige der Anzahl der Artikel im Warenkorb
function display_cart_count() {
    $cart_count = WC()->cart->get_cart_contents_count();
    $cart_url = wc_get_cart_url(); ?
    ? >
    <a class="menu-item cart-contents" href="/de/</?php echo $cart_url; ?>" title="Ihren Warenkorb ansehen">
        <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="/de/</?php echo wc_get_cart_url(); ?>" title="Ihren Warenkorb ansehen">
        <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');

Gehen Sie dann zur Titelvorlage von Elementor.

Öffnen Sie die Elementor-Kopfzeilenvorlage (oder eine beliebige andere Stelle), an der Sie die Gesamtzahl der Artikel in Ihrem WooCommerce-Warenkorb anzeigen möchten, und fügen Sie ein Icon-Listenelement hinzu. Folgen Sie den nachstehenden Schritten:

1. Zur Vorlage navigieren::
   • Klicken Sie im linken Menü auf "Vorlagen".
   • Wählen Sie dann "Theme Builder" (oder "Theme Builder").

2. Wählen Sie die zu bearbeitende Vorlage::
   • Auf der Seite Theme Builder sehen Sie alle Vorlagen wie Kopfzeile, Fußzeile, einzelner Beitrag, Archivseite usw.
   • Um die Kopfzeilenvorlage zu bearbeiten, klicken Sie auf die Vorlage "Kopfzeile" (oder "Header").

3. Vorlage bearbeiten::
   • Suchen Sie die Titelvorlage, die Sie bearbeiten möchten, und klicken Sie auf die Schaltfläche "Mit Elementor bearbeiten" (oder "Mit Elementor bearbeiten").
4. Hinzufügen eines Symbollistenelements::
   • Suchen Sie im Elementor-Editor das Element "Icon List" (oder "Icon List") in der linken Leiste.
   • Ziehen Sie das Element Icon List an die Stelle, an der Sie die Gesamtzahl der Artikel in Ihrem WooCommerce-Warenkorb anzeigen möchten.

5. Konfigurieren Sie die Symbolliste::

Wählen Sie in der Symbolliste eines der Symbole aus und klicken Sie auf das Symbol, um das Einkaufswagensymbol auszuwählen.

Geben Sie in das Textfeld für diese Position Folgendes ein:

[cart_item_count]

6. Speichern und aktualisieren::
   • Sobald die Konfiguration abgeschlossen ist, klicken Sie unten auf der Seite auf "Update", um die Änderungen zu speichern.

Styling

Lassen Sie uns das Ganze ein wenig verschönern, sonst sieht es so aus:

Hinzufügen von benutzerdefiniertem CSS::

• Wählen Sie das Element der Symbolliste aus.
• Klicken Sie in der linken Leiste auf "hohes Niveau"Tab.
• Suchen Sie den Abschnitt "CSS anpassen" und klicken Sie darauf.
• Fügen Sie den folgenden CSS-Code in das benutzerdefinierte CSS-Eingabefeld ein:

.elementor-icon-list-item .cart-contents {
    Position: relativ;
    Anzeige: inline-block;
}
.elementor-icon-list-item .cart-contents-count {
    position: absolute; top: -10px; }
    top: -10px;
    right: -10px; }
    background: red; color: white; }
    Hintergrund: rot; Farbe: weiß;
    border-radius: 50%; padding: 2px 6px;
    padding: 2px 6px; font-size: 12px; font-size: 6px
    font-size: 12px; }
}

Sie werden diesen Abschnitt zweimal in CSS sehen:

:nth-child(3)

Passen Sie beide an Ihre eigenen Icons an.

Wenn Ihr Einkaufswagen-Symbol zum Beispiel das erste in der Liste der Symbole ist, ändern Sie es in:n-tes Kind(1)statt:n-tes Kind(3).

Der Rest des CSS wird nach Bedarf angepasst, um die Zählung zu positionieren und zu gestalten.

Zusammenfassung.

Durch das Hinzufügen von benutzerdefinierten PHP-Codefragmenten und deren Integration in das Child-Theme funktionen.php Datei, um einen Shortcode zu erstellen, der die Anzahl der Artikel im Warenkorb anzeigt. Es wird auch gezeigt, wie man ein Icon-Listenelement zur Elementor-Header-Vorlage hinzufügt und diesen Shortcode verwendet, um die Gesamtzahl der Warenkorbartikel auf der Seite anzuzeigen. Schließlich können Sie das Elementor-Symbol verwenden, um die Anzahl der Artikel in Ihrem WooCommerce-Warenkorb in Echtzeit anzuzeigen! Ein besseres Einkaufserlebnis für die Nutzer.