首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在woocommerce中获取ajax更新后的总价格

在 WooCommerce 中获取 AJAX 更新后的总价格,可以通过以下步骤实现:

  1. 首先,确保你已经在 WooCommerce 网站中启用了 AJAX 功能。这可以在 WooCommerce 设置中的“高级”选项卡下进行配置。
  2. 在前端页面中,你可以使用 JavaScript/jQuery 来获取 AJAX 更新后的总价格。你可以通过以下代码来实现:
代码语言:javascript
复制
// 使用 AJAX 更新购物车
$.ajax({
  url: wc_cart_fragments_params.ajax_url,
  type: 'POST',
  data: {
    action: 'woocommerce_get_refreshed_fragments'
  },
  success: function(response) {
    // 从响应中获取更新后的总价格
    var totalPrice = response.fragments['div.widget_shopping_cart_content'].replace(/<(?:.|\n)*?>/gm, '');
    
    // 在页面上显示更新后的总价格
    $('#total-price').text(totalPrice);
  }
});

在上面的代码中,我们使用了 WooCommerce 提供的 woocommerce_get_refreshed_fragments 动作来获取 AJAX 更新后的购物车片段。然后,我们从响应中提取了更新后的总价格,并将其显示在页面上的 #total-price 元素中。

  1. 在后端,你可以使用 WooCommerce 提供的钩子来处理 AJAX 请求并返回更新后的购物车片段。你可以在主题的 functions.php 文件中添加以下代码:
代码语言:php
复制
// 处理 AJAX 请求并返回购物车片段
function custom_woocommerce_get_refreshed_fragments() {
  ob_start();
  woocommerce_mini_cart();
  $fragments['div.widget_shopping_cart_content'] = ob_get_clean();
  
  echo json_encode($fragments);
  die();
}
add_action('wp_ajax_woocommerce_get_refreshed_fragments', 'custom_woocommerce_get_refreshed_fragments');
add_action('wp_ajax_nopriv_woocommerce_get_refreshed_fragments', 'custom_woocommerce_get_refreshed_fragments');

在上面的代码中,我们定义了一个名为 custom_woocommerce_get_refreshed_fragments 的函数,该函数使用 woocommerce_mini_cart 函数来获取购物车片段的 HTML 内容。然后,我们将购物车片段作为 JSON 响应返回。

通过以上步骤,你就可以在 WooCommerce 中获取 AJAX 更新后的总价格了。请注意,以上代码仅提供了一个基本的示例,你可能需要根据你的具体需求进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

3 个 WordPress 插件高危漏洞影响了 84,000 个网站

WordPress 安全公司 Wordfence在上周发布一份报告说: “这个漏洞使攻击者可以易受攻击网站上更新任意网站选项,只要他们可以诱骗网站管理员执行操作,例如点击链接。”...), Side Cart Woocommerce (Ajax) 和 候补名单 Woocommerce(有库存通知) 跨站点请求伪造,也称为一键式攻击或会话骑行,发生在经过身份验证最终用户被攻击者欺骗提交特制...image.png 具体来说,该漏洞源于处理AJAX 请求时缺乏验证,从而有效地使攻击者能够将站点上“users_can_register”(即任何人都可以注册)选项更新为 true 并设置“default_role... Wordfence 研究人员于 2021 年 11 月负责任地披露,该问题已在 Login/Signup Popup 2.3 版、Side Cart Woocommerce 2.1 版和Waitlist...Woocommerce 2.5.2 版得到解决。

1K30

研究人员在三种WordPress插件中发现高危漏洞

几天后他们又在Cart Woocommerce (Ajax)插件与Waitlist Woocommerce (Back in stock notifier)插件中发现了相同漏洞。...通过这个漏洞攻击者只要欺骗站点管理员执行一个动作就可以更新受攻击网站上任意站点选项。 攻击者通常会制作一个触发 AJAX 操作并执行该功能请求。...攻击者可以利用该漏洞将网站上“users_can_register”(即任何人都可以注册)选项更新为 确定,并将“default_role”设置(即在博客上注册用户默认角色)设置为管理员,那么他就可以受攻击网站上注册为管理员并完全接管它...Wordfence团队报告影响 Xootix维护三个插件: Login/Signup Popup插件(超过 20000 次安装) Side Cart Woocommerce(Ajax)插件 (超过...Side Cart Woocommerce 插件通过 AJAX 提供支持使网站上任何地方使用都可以使用购物栏。

1.7K30
  • 浅谈laravel-admin form数据,提交,保存前,获取并进行编辑

    有一个这样需求: 当商品设置为立即上架时,通过审核就进入上架状态,当设置为保存时,通过审核就进入未上架状态。...所以,需要在保存前根据提交审核状态和设置方式得到商品状态再保存,而通过$form- model()- attribute_name只能获取提交值,不能更改。...Google之后发现了已经有解决方案:可以修改提交表单时逻辑吗 #375 模型添加如下方法: public static function boot() { parent::boot();...static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form数据...,提交,保存前,获取并进行编辑就是小编分享给大家全部内容了,希望能给大家一个参考。

    4.2K62

    浅谈laravel-admin form数据,提交,保存前,获取并进行编辑

    有一个这样需求: 当商品设置为立即上架时,通过审核就进入上架状态,当设置为保存时,通过审核就进入未上架状态。...所以,需要在保存前根据提交审核状态和设置方式得到商品状态再保存,而通过$form->model()->attribute_name只能获取提交值,不能更改。...Google之后发现了已经有解决方案:可以修改提交表单时逻辑吗 #375 模/ /型添加如下方法: public static function boot() { parent::boot()...; static::saving(function ($model) { // 从$model取出数据并进行处理 }); } 以上这篇浅谈laravel-admin form数据,提交,保存前,...获取并进行编辑就是小编分享给大家全部内容了,希望能给大家一个参考,也希望大家多多支持/ /。

    3.6K00

    【Android 逆向】修改 Android 系统文件 ( Android 逆向需要经常修改文件和目录 | root 设备获取 目录 rw 权限注意事项 )

    文章目录 一、Android 逆向需要经常修改文件和目录 二、 root 设备获取 / 目录 rw 权限注意事项 1、不要随意执行 wipe 命令 2、不要随意执行 rm 命令 一、Android...可以放在 /sbin/ , /system/bin/ , /system/xbin/ 等目录 , 这些目录可执行程序自动存放到环境变量 ; 动态库存放目录 : Android 中使用系统 so...B , 将原有的 so 文件重命名为 C , A 动态库 调用 C 动态库函数 , 这样就相当于调用时加了一层拦截 , 可以在此处获取各种参数 ; 配置文件目录 : Android 配置文件一般都在.../system/etc/ 目录 ; 二、 root 设备获取 / 目录 rw 权限注意事项 ---- 1、不要随意执行 wipe 命令 wipe 命令不要轻易执行 ; 执行 wipe system...是上述两个命令之和 , 类似于根目录执行 rm -r * 命令 ; 2、不要随意执行 rm 命令 如果执行 rm -rf \ 命令 , 并且有足够权限 , 系统就没了 ;

    1.7K10

    woocommerce开发支付网关插件,对接支付通道

    创建插件 因为WooCommerce有很多钩子,所以我们开发支付网关时候,只需按照一个“框架”来开发就好,下面的是插件框架 具体代码 构造函数 public function __construct...我们使用WooCommerce事件延迟表单提交,并将带有卡数据AJAX请求直接发送到我们支付处理器,checkout_place_order 如果客户详细信息正常,处理器将返回一个令牌,我们将其添加到下面的表格..., 现在我们可以提交表格(当然JS), 我们使用PHP令牌通过支付处理器API捕获付款。...'https://www.kekc_cnpayments.com/api/token.js' ); // 这是插件目录自定义JS,与token.js一起处理。...' ) ); // 大多数支付处理程序,必须使用公共密钥来获得一个token wp_localize_script( 'woocommerce_kekc_cn', 'kekc_cn_params'

    24010

    Lighthouse跨境电商独立站秘籍!

    4 站点初探 轻量应用服务器控制台——实例详情页——应用管理可以直接点击地址进入独立站和管理后台。...管理后台入口同样应用管理,可以看到管理员登录地址(即为管理后台地址),登录管理后台时,需要输入密码,我们可在管理员密码处复制命令并登录实例,主动输入命令获取到管理员密码。...这个时候可能会发现,WooCommerce这几个导航依然是英文,这要怎么办? WooCommerce插件语言 找到【仪表盘-更新】,拉到最下方可以看到【更新翻译】按钮,点它就是了。...,探索阶段,可以利用这两个主题提供免费模板快速搭建精致独立站样式,熟悉了WooCommerce操作,可以选择购买并定制专属于自己独立站主题或模板。...如果购买主题是压缩包格式(比如zip),可以管理后台上传主题压缩包: 安装完成可以主题页面中看到,点击启用即可完成初始化: 启用后,可以管理后台【外观】-【自定义】对主题进行DIY:

    14.5K10

    Lighthouse: WooCommerce

    管理后台入口同样应用管理,可以看到管理员登录地址(即为管理后台地址),登录管理后台时,需要输入密码,我们可在管理员密码处复制命令并登录实例,主动输入命令获取到管理员密码。...图片这个时候可能会发现, WooCommerce 这几个导航依然是英文,这要怎么办?图片WooCommerce 插件语言找到【仪表盘-更新】,拉到最下方可以看到【更新翻译】按钮,点它就是了。...,探索阶段,可以利用这两个主题提供免费模板快速搭建精致独立站样式,熟悉了 WooCommerce 操作,可以选择购买并定制专属于自己独立站主题或模板。...如果购买主题是压缩包格式(比如 zip ),可以管理后台上传主题压缩包:图片图片安装完成可以主题页面中看到,点击启用即可完成初始化:图片启用后,可以管理后台【外观/自定义】对主题进行 DIY...轻量应用服务器控制台点击登录,依次输入如下命令:sudo su rootvim /usr/local/lighthouse/softwares/nginx/conf/nginx.conf此时你会进入到一个编辑页面

    9.5K1710

    【react-dnd使用总结一】拖放完成获取放置元素drop容器相对位置

    根据元素其实位置和最终位置,计算相对于某元素位置 * @param initialPosition 拖动元素相对于屏幕左上角起始位置(偏移量) * @param finalPosition 拖放完成当前节点相对于屏幕左上角位置...initialPosition: any, finalPosition: any, containerEle: HTMLDivElement, ): IPosition => { // 获取容器位置信息...finalX) - dropTargetPosition.left; return { left: newXposition, top: newYposition, }; }; drop...回调函数 drop(target: any, monitor: DropTargetMonitor) { console.log(target, monitor); const position...) monitor.getSourceClientOffset(), // 拖放完成当前节点相对于屏幕左上角位置 document.querySelector('#container

    4.2K10

    WPJAM Basic 5.9 详细更新说明

    昨天 WordPress 5.9 发布,我第一时间就升级了测试站点到 WordPress 5.9,经过一天观察,没有发现什么问题。 因为 WordPress 5.9 更新主要还是围绕块编辑器。...兼容 WooCommerce 之前后台文章列表开启「支持全面的 AJAX操作」,会让 WooCommerce 订单和优惠券页面出现一些问题,最近接了一些 WooCommerce 项目,仔细研究和处理了一下...,顺手做了一些简单优化,在这些页面,全面的 AJAX操作被关闭,使得功能先不冲突。...兼容文章列表页操作 就像上面说 WordPress 现在更新方向就是古腾堡编辑器,因为古腾堡编辑器块编辑器特性,需要大界面,甚至全凭编辑,所以尽量不要去文章编辑界面添加设置框。...注意验证码是存储于 Memcached ,如果系统未安装 Memcached,则无效。

    7.2K30

    【玩转Lighthouse】搭建WooCommerce商店,启用支付宝当面付收款

    背景概述 WooCommerce是一个基于WordPress可定制开源电子商务平台插件。...轻量应用服务器(TencentCloud Lighthouse)是新一代开箱即用、面向轻量应用场景云服务器产品,助力中小企业和开发者便捷高效云端构建网站、小程序/小游戏、电商、云盘/图床以及各类开发测试和学习环境...https://cloud.tencent.com/act [image.png] 这里我们镜像选择 WordPress 5.7.1 即可 [image.png] 购买完成,我们便可以轻量应用服务器控制台页面中看到刚刚创建...] 点击登录实例并执行命令获取管理员密码,再点击管理员登录地址登陆管理员后台 [image.png] 输入上一步获取账号密码登陆 [image.png] 点稍后提醒我 [image.png] 再点升级...WordPress数据库 [image.png] 继续 [image.png] [image.png] 先更新 3.

    6K73

    上手玩一下json-server(二)操作数据篇——POSTPATCHDELETE

    案例:页面的输入框输入新水果名称和价格,通过post添加到db.json。...post方法 之前 jq-ajax.html 补充如上代码,输入 watermelon 6.88 水果 add 添加新水果。...put方法会更新整个资源,未给出字段会清空 在案例,我们输入id 为 1 ,更改价格为100,本意是要更新 apple 价格为100,但PUT方法执行,get到数据name 字段 apple...这是因为,PUT方法会更新整个资源对象,前端没有给出字段,会自动清空。所以,要么我们ajaxdata给出完整对象信息,要么采用PATCH方法。...patch方法可以局部更新价格 此处,我们输入id 为 2 ,更改价格为200,即要更新 orange 价格为200,执行PATCH方法,get到数据name 字段 orange 价格确实变化了

    1.8K21

    woocommerce shortcode短代码调用

    >以下是一些常用woocommerce短代码 注意短代码不要放在之间,""双引号和''单引号是英文状态下 ---- page短代码 WooCommerce 如果没有您网站上某个地方前三个短代码...– 显示订单跟踪表单 大多数情况下,这些短代码将通过我们入门向导自动添加到页面,无需手动使用。...可用选项包括: visible– 产品商店和搜索结果可见。这是默认选项。visibility catalog– 产品仅在商店可见,但对搜索结果不可见。...search– 产品仅在搜索结果可见,但在商店不可见。 hidden– 商店和搜索隐藏产品,只能通过直接 URL 访问。 featured– 标记为特色产品产品。...您还可以使用以下代码按自定义元字段对产品进行排序(本例,我们按价格对产品进行排序): add_filter( 'woocommerce_shortcode_products_query', 'woocommerce_shortcode_products_orderby

    11.1K20

    WordPress插件WooCommerce任意文件删除漏洞分析

    漏洞影响 我们检测并上报了WooCommerce存在一个文件删除漏洞,这个漏洞已经WooCommercev3.4.6版本成功修复。...这个文件删除漏洞存在于WooCommerce日志记录功能,日志会以.log文件形式存储wp-content目录。当商铺管理员想要删除日志文件时,他需要以GET参数来提交文件名。...$handle; ⋮unlink($file); 这里问题就在于,文件名($handle)会被添加到目录(wp-content/wc-log/),然后传递给unlink()函数,设置“$handle...总结 之前文章,我们介绍过如何去利用WordPress文件删除漏洞了,并且演示了如何将文件删除提升为远程代码执行。...这篇文章主要介绍是WordPress插件文件删除漏洞,而这些漏洞将允许攻击者使用了meta权限WordPress站点上实现提权。

    1.6K30

    21个顶级开源或免费跨境电商b2c系统

    WooCommerce (WordPress) 官方地址: https://www.woothemes.com/woocommerce/ WooCommerce是目前最流行开源电子商务解决方案...这个PHP购物车提供了你大多数免费购物车找不到东西。你将需要手工编写代码并使用HTML来充分利用这个电子商务系统,但是如果你有足够时间或人员,也有足够空间进行定制。...与许多竞争对手相比,这个WooCommerce前身拥有的主题选择较少,但它似乎通过512739下载而保持了自己电子商务领域地位。 然而获得社区支持并不是免费。每月40美元。...由于其轻量级特性,simpleCart js不提供你可能正在寻找许多后端功能。你可以simpleCart(js)站点上找到下载和文档,但请记住,自2010年以来没有任何更新。...这个开源电子商务平台编码相对简单。当然你还可以向专家支付一些额外支持,或者转向大型用户社区以获取常见问题答案。 客户包括MollyMeg、Cronut、Mayrun’s Goods。

    11.6K00

    WooCommerce 结算页面自定义(删除添加)表单元素

    这篇文章意在记录一个问题,默认WooCommerce 结算(checkout)页面上自定义(删除/添加)表单元素。...但在实际项目需求,可能不想显示那么多fields;而且从用户体验角度上,fields应该精简到只需要最重要——如果是卖虚拟商品的话尤为如此。...WooCommerce 定义这些表单元素(fields)函数是woocommerce_checkout_fields,那么我们要自定义,就从这个函数下手,hook 之。...基本上是从官方文档《Customizing checkout fields using actions and filters》获取而来。...需求一:删除结算页面上多余表单元素(fields) 这个多余表单元素指删除,只剩下最需要三个:姓、名、邮箱。这个需求如果单单是做虚拟商品的话就非常有需要。

    3.6K80

    The7 v.11.11.3 — WordPress 网站和电子商务构建器

    Elementor 是一个很棒页面构建器。然而,构建标题或自定义 WooCommerce 页面时,它却表现不佳。...新版本,我们更进一步,创建了一个非常简单帖子类型生成器。现在,您可以编辑现有的或创建您自己帖子类型,并使用我们通用砌体、列表、网格和轮播小部件显示它们。...免费更新和支持 自 2013 年首次发布以来,我们一直不断更新 The7,以确保其与最新 WordPress 兼容性、引入新功能等。这些更新对所有 The7 买家都是免费。...2.修复了The7 Post Loop小部件搜索模板损坏问题。 3. “社交图标”WPB 简码链接属性之间添加了缺失空格。 4.解决了WC产品属性元未导入问题。 5....更正了编辑器模式下帖子 Masonry & Grid 小部件布局。 6.更新了分享按钮“X”图标。 下载&演示 演示 dt-the7-v11.11.3.zip 下载 大小 8.8MB

    14810
    领券