使用Elementor在WooCommerce显示购物车商品总数的详细指南

如何使用Wordpress中的Elementor 编辑器显示 WooCommerce 购物车中当前商品的总数？我们将使用 Elementor Icon List 元素，这个方法也适用于大多数其他元素。

以下是我们要实现的效果：

通过本教程，你将学会如何显示购物车中的商品总数，并且在添加或移除商品时，数量会自动更新。

首先，添加 WooCommerce 购物车总数短代码片段。

开始时，需要将以下代码添加到新的 PHP 代码片段中。可以使用 Code Snippets 插件，或者将其直接添加到子主题的 functions.php 文件中。

要找到并编辑 WordPress 主题中的 functions.php 文件，可以按照以下步骤进行操作：

1. 登录到 WordPress 仪表板。
2. 导航到“外观”>“主题文件编辑器”。
   • 在左侧菜单中，点击“外观”，然后选择“主题文件编辑器”。

3. 选择子主题。
   • 在右上角的“选择要编辑的主题”下拉菜单中，选择你的子主题。

4. 找到 functions.php 文件。
   • 在右侧的文件列表中，找到并点击 functions.php 文件。

在 functions.php 文件的末尾添加代码，然后点击“更新文件”按钮以保存更改。

// 显示购物车商品数量
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="<?php echo $cart_url; ?>" title="View your shopping cart">
        <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="<?php echo wc_get_cart_url(); ?>" title="View your shopping cart">
        <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 标题模板（或任何其他位置），然后添加一个图标列表元素。按照以下步骤进行操作：

1. 导航到模板：
   • 在左侧菜单中，点击“模板”。
   • 然后选择“主题生成器”（或“Theme Builder”）。

2. 选择要编辑的模板：
   • 在主题生成器页面，你会看到所有的模板，如页眉、页脚、单篇文章、归档页面等。
   • 如果要编辑标题模板，找到并点击“页眉”模板（或“Header”）。

3. 编辑模板：
   • 找到想要编辑的标题模板，点击“编辑（使用 Elementor）”按钮（或“Edit with Elementor”）。
4. 添加图标列表元素：
   • 在 Elementor 编辑器中，找到左侧面板中的“图标列表”元素（或“Icon List”）。
   • 将“图标列表”元素拖到希望显示 WooCommerce 购物车商品总数的位置.

5. 配置图标列表：

在图标列表中，选择其中一个图标项，点击图标，选择购物车图标。

在该项的文本字段中，输入以下内容：

[cart_item_count]

6. 保存和更新：
   • 配置完成后，点击页面底部的“更新”按钮以保存更改。

造型设计

让我们让它看起来更漂亮一些，否则它看起来会像这样：

添加自定义 CSS：

• 选择图标列表元素。
• 在左侧面板中，点击“高级”选项卡。
• 找到并点击“自定义 CSS”部分。
• 在自定义 CSS 输入框中添加以下 CSS 代码：

.elementor-icon-list-item .cart-contents {
    position: relative;
    display: inline-block;
}
.elementor-icon-list-item .cart-contents-count {
    position: absolute;
    top: -10px;
    right: -10px;
    background: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}

你将在 CSS 中看到此部分两次：

:nth-child(3)

调整两者使其与自己的图标相匹配。

例如，如果你的购物车图标是图标列表中的第一个，更改为:nth-child(1)而不是:nth-child(3)。

CSS 的其余部分，根据需要进行调整以定位和设置计数的样式。

总结:

通过添加自定义 PHP 代码片段，并将其集成到子主题的 functions.php 文件中，可以创建一个短代码来显示购物车商品数量。还演示了如何在 Elementor 标题模板中添加图标列表元素，并使用该短代码在页面上显示购物车商品总数。最后，通过 Elementor 图标来实时查看 WooCommerce 购物车中的商品数量！为用户提供更好的购物体验。