当产品属性有附加价格时更改产品价格（WooCommerce）

Question

对于我的一个网上商店，我试图实现以下目标： 网上商店中的所有产品都有变化。 例如，产品 X 可以订购红色，也可以订购黑色。 现在我试图在 WooCommerce 中设置额外的价格，例如黑色。

红色 - 无额外费用 颜色 黑色 - 额外费用 30 欧元

1. 如何在 WooCommerce 中设置此额外费用？我只能为产品变体设置总价。

2. 如何在选项选择框中显示这些额外费用？

3. 如果用户选择黑色，我想更改产品价格（将额外成本与正常产品价格相加）

您可以在下面找到我想要实现的目标： https://product-extras.catapultthemes.com/product/macbook/

您可以在此处看到更改其他选项时总价的变化。

以下是我的网店网址： http://demassagetafel-specialistnl.webhosting.be/winkel/mobiele-massagetafels/ct-kahuna-set-inklapbaar/

Answer 1

对于这样的前端：

var start_product_cost=500.01;
var total_product_cost=0;


function calk_product_cost(){
   var curent_cost=start_product_cost;
   $('select').each(function(){
   	    var curent_select_val=parseFloat($(this).val());
   	    curent_cost+=curent_select_val;
   });
   total_product_cost=curent_cost;
   $('#div_for_total').html('$'+curent_cost);
}


$('select').change(function(){
	calk_product_cost();
});

$('#btn_for_buy').click(function(){
	alert('Your product price : $'+total_product_cost);
});

calk_product_cost();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="div_for_total"></div>

<select>
   <option value="0">not need</option>
   <option value="5">test option 1 (+5$)</option>
   <option value="10" selected>test option 2 (+10$)</option>
   <option value="20">test option 3 (+20$)</option>
   <option value="-20">test option 4 (-20$)</option>
</select>

</br>

<select>
   <option value="0">not need</option>
   <option value="3">new test option 1 (+3$)</option>
   <option value="6">new test option 2 (+6$)</option>
   <option value="9" selected>new test option 3 (+9$)</option>
   <option value="-3">new test option 4 (-3$)</option>
</select>
</br>
<input id="btn_for_buy" type="button" value="Add to cart">