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

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

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

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

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

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

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

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

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

  1. 登录到 WordPress 仪表板
  2. 导航到“外观”>“主题文件编辑器”
    • 在左侧菜单中,点击“外观”,然后选择“主题文件编辑器”。
使用Elementor在WooCommerce显示购物车商品总数的详细指南
  1. 选择子主题
    • 在右上角的“选择要编辑的主题”下拉菜单中,选择你的子主题。
使用Elementor在WooCommerce显示购物车商品总数的详细指南
  1. 找到 functions.php 文件
    • 在右侧的文件列表中,找到并点击 functions.php 文件。
使用Elementor在WooCommerce显示购物车商品总数的详细指南

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”)。
使用Elementor在WooCommerce显示购物车商品总数的详细指南
  1. 选择要编辑的模板
    • 在主题生成器页面,你会看到所有的模板,如页眉、页脚、单篇文章、归档页面等。
    • 如果要编辑标题模板,找到并点击“页眉”模板(或“Header”)。
使用Elementor在WooCommerce显示购物车商品总数的详细指南
  1. 编辑模板
    • 找到想要编辑的标题模板,点击“编辑(使用 Elementor)”按钮(或“Edit with Elementor”)。
  2. 添加图标列表元素
    • 在 Elementor 编辑器中,找到左侧面板中的“图标列表”元素(或“Icon List”)。
    • 将“图标列表”元素拖到希望显示 WooCommerce 购物车商品总数的位置.
使用Elementor在WooCommerce显示购物车商品总数的详细指南
  1. 配置图标列表

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

在该项的文本字段中,输入以下内容:

使用Elementor在WooCommerce显示购物车商品总数的详细指南
[cart_item_count]
  1. 保存和更新
    • 配置完成后,点击页面底部的“更新”按钮以保存更改。

造型设计

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

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

添加自定义 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 购物车中的商品数量!为用户提供更好的购物体验。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10708/

(2)
上一篇 2024年 5月 28日 下午3:06
下一篇 2024年 5月 29日 下午2:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!