Necesito ayuda. (.wc-pao-addon-select) es un buzón y tiene un precio en (precio de datos). Pero no se agrega ni se muestra en (.precio). Mientras tanto, la casilla de verificación funciona bien
<script> $=jQuery; var fefaultprice = "<?php echo $product->get_price(); ?>"; var currencysyb = "<?php echo get_woocommerce_currency_symbol(); ?>"; $(".wc-pao-addon-checkbox").on("change",function(){ var selected = [fefaultprice]; $(".wc-pao-addon-checkbox:checked").each(function () { selected.push($(this).attr("data-price")); }); $(".wc-pao-addon-select:selected").each(function () { selected.push($(this).attr("data-price")); }); sum = 0; $.each(selected,function(){sum+=parseFloat(this) || 0; }); $(".price").html('<span class="woocommerce-Price-amount amount"><bdi>'+sum.toFixed(2)+'<span class="woocommerce-Price-currencySymbol">'+currencysyb+'</span></bdi></span>'); }); </script>price y currency en un contenedor principal data-* atributos, no en JS.Aquí hay una nueva versión de su calculadora de cantidad de artículos en JavaScript puro:
const EL = (sel, parent) => (parent||document).querySelector(sel); const ELS = (sel, parent) => (parent||document).querySelectorAll(sel); const calcItemInit = (EL_item) => { // Get elements const ELS_ckb = ELS(".wc-pao-addon-checkbox", EL_item); const ELS_sel = ELS(".wc-pao-addon-select", EL_item); const EL_amount = EL(".woocommerce-Price-amount", EL_item); const EL_currency = EL(".woocommerce-Price-currencySymbol", EL_item); // Get data const price = parseFloat(EL_item.dataset.price); const currency = EL_item.dataset.currency; // Calc const calc = () => { let amount = price || 0; // Add checkboxes values ELS_ckb.forEach(el => { if (el.checked) amount += parseFloat(el.value); }); // Add select values ELS_sel.forEach(el => { amount += parseFloat(el.value || 0); }); // Set Amount! EL_amount.textContent = amount.toFixed(2); EL_currency.textContent = currency; }; // Events: ELS_ckb.forEach(el => el.addEventListener("change", calc)); ELS_sel.forEach(el => el.addEventListener("change", calc)); // Init: calc(); }; ELS(".calc").forEach(calcItemInit); <div class="calc" data-currency="€" data-price="12.00"> <div>Item: <b>JS Book Of The Year</b></div> <div>Price: <b>12.00 €</b></div> <div>Extras: <label><input type="checkbox" class="wc-pao-addon-checkbox" value="3.99"> + Book cover</label> <label><input type="checkbox" class="wc-pao-addon-checkbox" value="14.00"> + All pages</label> <label> <select class="wc-pao-addon-select"> <option value="29.99" selected>One year old</option> <option value="10.25">Two years old</option> <option value="10.15">Ten years old</option> </select> </label> </div> <div> Final price: <span class="woocommerce-Price-amount"></span> <span class="woocommerce-Price-currencySymbol"></span> </div> </div>