Change product price when product attribute has an additional price (WooCommerce)

问题

For one of my webshops im trying to achieve the following: All of the products in the webshop have variations. For example Product X can be ordered in the color RED but also in the color BLACK. Now im trying to set an additional price in WooCommerce for example the color Black.

Color RED - No additional costs Color Black- Additional cost €30

How can i set this additional cost in WooCommerce? I can only set a total price for a product variation.
How can i display these additional costs in the option selectbox?
If a user chooses Color Black i want to change the product price (Add up the additional cost to the normal product price)

Below you can find what im trying to achieve: https://product-extras.catapultthemes.com/product/macbook/

Here you can see the total price changing when you change another option.

Below is the url of my webshop: http://demassagetafel-specialistnl.webhosting.be/winkel/mobiele-massagetafels/ct-kahuna-set-inklapbaar/

回答1:

For front-end like this:

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">

来源：https://stackoverflow.com/questions/50157377/change-product-price-when-product-attribute-has-an-additional-price-woocommerce

标签

php

jquery

wordpress

woocommerce