使用 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

从 WooCommerce 可变产品的变体中自动选择第一个可用选项

隐藏产品可变价格,直到在 WooCommerce 中选择所有变体字段

在产品页面上显示运费 - WooCommerce