使用 WooCommerce 选择变体时更新产品页面上的价格
Posted
技术标签:
【中文标题】使用 WooCommerce 选择变体时更新产品页面上的价格【英文标题】:Updating the price on product page when variations are chosen with WooCommerce 【发布时间】:2017-07-12 16:41:19 【问题描述】:我在使用 WooCommerce 在产品页面上显示产品的更新价格时遇到了一些问题。
基本上,我们有一个自定义构建器页面,允许用户选择不同的选项(或本例中的变体),然后当他们将其添加到购物车时,计算出正确的价格。一切正常。
我遇到的问题是我们希望在他们改变选项时在屏幕上显示价格。
所以,假设我选择了 6 米长的蓝色物品,价格应该是 100 英镑,但如果我选择 1 米长的红色物品,价格是 10 英镑。
我猜想一些 jQuery 或其他东西可以动态更新页面,但我不知道我在哪里或如何做到这一点。
它需要触发我假设更改表单选择框的功能。
目前,我正在使用这个显示价格...
$product = new WC_Product(538);
echo esc_attr($product->get_price());
我认为这是错误的,因为这是基本价格而不是变化价格,但无论哪种方式,我仍然需要找到一种方法来更新屏幕上的价格而不刷新。
这是我的 SELECT 表单项之一,尽管页面上有很多这样的项。
<select id="frame-depth" class="kad-select" name="attribute_frame-depth" data-attribute_name="attribute_frame-depth"" data-show_option_none="yes">
<option value="Standard depth" selected="selected">Standard depth</option>
<option value="Extra Deep" >Extra Deep</option>
</select>
任何帮助将不胜感激!
如果我需要更详细地更新问题,我可以这样做。我只是想我会保持简单!
西蒙
【问题讨论】:
嘿@Simon 面临同样的挑战 :( 你找到解决办法了吗?它一定是 javascript。 【参考方案1】:我在 JS 中大致是这样做的,利用 found_variation
事件:
var currentVariation = null;
function calcTotalPrice(variation = null)
if (variation)
currentVariation = variation;
if (!currentVariation)
var $price = $('#product-price');
if ($price && $price.length)
currentVariation =
display_price: $price.val()
;
if (currentVariation)
var qty = $('#quantity').val();
var total = currentVariation.display_price * qty;
$('#total-price-result').html('€ ' + number_format(total, 2, ',', ' '));
$('form.variations_form').on('found_variation', function(e, variation)
calcTotalPrice(variation);
);
$('#quantity').on('input change', function()
calcTotalPrice();
);
$('form.variations_form').on('hide_variation', function()
$('#total-price-div').hide();
);
$('form.variations_form').on('show_variation', function()
$('#total-price-div').show();
);
在 HTML/模板方面,我覆盖 woocommerce/single-product/add-to-cart/variable.php
并将定价部分编辑为与此类似:
<div id="total-price-div">
<h4><label> __("Total", "my-text-domain") </label></h4>
<div class="value">
<span class="total-price"><span id="total-price-result" class="total-price"></span></span>
</div>
</div>
我希望这可以帮助别人?
【讨论】:
以上是关于使用 WooCommerce 选择变体时更新产品页面上的价格的主要内容,如果未能解决你的问题,请参考以下文章
使用按钮而不是下拉菜单的 Woocommerce 产品变体选择?
更新变体产品价格 - 在产品页面中不可见 - Woocommerce
从 WooCommerce 可变产品的变体中自动选择第一个可用选项