edvinuddfalk

I wrote this code to achieve this and it 100% works (I’m using Todd Mottos html5 blank theme). Goes in your functions.php.

This code displays the base product name and its price with all the addons selected for the product. It also shows the quantity and updates it based on what quantity you choose.

It also validates if the addons summary element is shown. If it isn’t shown (since no addons are selected) it will not show the product name and price.

// Add price to fpf counter in bottom
function add_dynamic_product_data_to_footer() {
if (is_product()) {
global $product;
$product_name = $product->get_name();
$product_price = wc_price($product->get_price());
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var productName = <?php echo json_encode($product_name . ':'); ?>;
var productPrice = <?php echo json_encode($product_price); ?>;
function updateProductNameWithQuantity() {
var quantity = $('.quantity .qty').val() || 1;
var formattedProductName = quantity + ' x ' + productName;
$('#fpf_totals dt.product-name').text(formattedProductName);
}
function addProductNameAndPrice() {
if (!$('#fpf_totals dt.product-name').length) {
var newDt = $('<dt class="product-name"></dt>').text(productName);
var newDd = $('<dd class="product-price"></dd>').html(productPrice);
$('#fpf_totals').prepend(newDd).prepend(newDt);
updateProductNameWithQuantity();
}
}
$('.quantity .qty').on('change', function() {
updateProductNameWithQuantity();
});
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if ($('#fpf_totals').css('display') !== 'none') {
addProductNameAndPrice();
}
});
});
observer.observe($('.fpf-totals')[0], {
childList: true,
subtree: true
});
});
</script>
<?php
}
}
add_action('wp_footer', 'add_dynamic_product_data_to_footer');