Elementor 构建的 WooCommerce 页面中，因价格元素非 而是嵌套在 HTML 标签内的文本内容，且 ID 可能被动态扩展或未及时就绪，导致 $('#id').val() 失效；需改用 .text() + 精确选择器（如属性包含匹配）并处理 HTML 结构层级。
elementor 构建的 woocommerce 页面中，因价格元素非 `` 而是嵌套在 html 标签内的文本内容，且 id 可能被动态扩展或未及时就绪，导致 `$('#id').val()` 失效；需改用 `.text()` + 精确选择器（如属性包含匹配）并处理 html 结构层级。
在 Elementor 中通过自定义代码操作 WooCommerce 动态渲染的价格元素时，常见错误在于混淆表单控件与纯展示内容的 DOM 访问方式。从你提供的 HTML 结构可见：
-
#product-price是一个包裹<h2></h2>的容器 Div，真实价格文本位于其内部.woocommerce-Price-amount元素中，且含格式符号（如逗号、欧元符、空格、<bdi></bdi>标签等）； -
#ship-price-a和#ship-price-b实际是<a></a>链接标签，并非拥有id="ship-price"的单一元素，因此原代码$('#ship-price').on('click', ...)无法命中； - Elementor 的 JS 执行时机可能早于 WooCommerce 价格内容注入（尤其启用 AJAX 加载或延迟渲染时），
$(document).ready()并不能保证目标元素已完全就绪。
✅ 正确做法如下：
1. 使用属性选择器精准定位动态 ID
避免硬编码不存在的 id="ship-price"，改用 [id*="ship-price"] 匹配所有 id 属性中包含 "ship-price" 的元素（如 ship-price-a、ship-price-b）：
$('a[id*="ship-price"]').on('click', function(e) {
e.preventDefault(); // 阻止默认跳转
// ...
});2. 用 .text() 替代 .val() 提取显示文本
.val() 仅适用于 <input>、<select></select>、<textarea></textarea> 等表单元素；对于 <span></span>、<h2></h2>、<a></a> 等，必须使用 .text()：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
var originalPrice = $('#product-price')
.find('.woocommerce-Price-amount') // 定位到价格数字所在 span
.text() // 获取完整文本："499,00 €"
.replace(/[^0-9.,]/g, '') // 清洗：保留数字、小数点、逗号（适配欧洲格式）
.replace(',', '.'); // 将千分位逗号转为小数点（如 "499,00" → "499.00"）
var shipPrice = $(this).text().replace(/[^0-9.,]/g, '').replace(',', '.');? 提示：WooCommerce 欧洲站点常用
,作小数点，作空格，正则/[^0-9.,]/g可安全剔除货币符号、空格、+ IVA等干扰字符。
3. 确保 DOM 就绪 —— 推荐使用 MutationObserver 或 Elementor 专用钩子
若价格由 AJAX 异步加载（如变体切换），$(document).ready() 可能过早。更健壮的方式是监听目标区域变化：
jQuery(document).ready(function($) {
// 方案一：延迟重试（轻量兼容）
function tryGetPrices() {
const $priceEl = $('#product-price .woocommerce-Price-amount');
if ($priceEl.length && $priceEl.text().trim()) {
bindShipHandlers($priceEl);
} else {
setTimeout(tryGetPrices, 200);
}
}
function bindShipHandlers($priceEl) {
$('a[id*="ship-price"]').off('click').on('click', function(e) {
e.preventDefault();
const base = parseFloat($priceEl.text().replace(/[^0-9.,]/g, '').replace(',', '.')) || 0;
const ship = parseFloat($(this).text().replace(/[^0-9.,]/g, '').replace(',', '.')) || 0;
const total = (base + ship).toFixed(2);
console.log('总价：', total + ' €');
// ✅ 此处可更新页面显示，例如：
// $('#total-display').text(total + ' €');
});
}
tryGetPrices();
});⚠️ 注意事项总结
- ❌ 不要依赖
id="ship-price"—— Elementor 不生成该 ID，实际是id="ship-price-a"等； - ❌ 不要用
.val()读取<h2></h2>或<a></a>内容； - ✅ 使用
.find()精准定位嵌套结构（如#product-price .woocommerce-Price-amount）； - ✅ 始终清洗文本：移除非数字字符，并统一小数点格式；
- ✅ 对 AJAX 加载内容，优先采用
MutationObserver或 WooCommerce 事件（如wc_update_variation_values）而非仅靠ready。
通过以上调整，即可稳定获取 Elementor + WooCommerce 页面中的动态价格，并实现点击运费选项后实时计算并展示更新后的总价。
