Improving the WooCommerce Grouped Products Layout

Improving the WooCommerce Grouped Products Layout

//* open up grouped.php and change the parent container of the input boxes from this:
<tr>
//*to this:
<tr class="grouped-product-item" data-price="<?php echo $product->get_price() ?>">
// Or change $product->get_price() to $product->get_price_including_tax(> 

//* Functions.php:
add_action( 'woocommerce_single_product_summary', 'woocommerce_total_product_price', 31 ); 
function woocommerce_total_product_price() { 
    global $woocommerce, $product; 
    echo '<div id="product-total-price">'; 
        _e('Total Cost: ','woocommerce'); 
        echo '<span class="currency">' . get_woocommerce_currency_symbol() . '</span><span class="price"></span>'; 
        echo '</div>'; 
    ?> 
    <script> 
    jQuery(function($){ 
        var current_cart_total = <?php echo $woocommerce->cart->cart_contents_total; ?>, currency = '<?php echo get_woocommerce_currency_symbol(); ?>'; 
        $('.input-text.qty, .quantity_select .qty').on('change',function(){ 
            var overall_total = 0; 
            $('.input-text.qty, .quantity_select .qty').each(function(){ 
                var price = $(this).parents('.grouped-product-item').data('price'); 
                var items = $(this).val(); 
                var total = price * items; 
                overall_total = overall_total + total; 
            }); 
        
            if ( overall_total > 0 ) { 
                $('#product-total-price').fadeIn('fast'); 
                $('#product-total-price .price').html( overall_total.toFixed(2)); 
            } 
            else { 
                $('#product-total-price .price').html('0'); } 
            });
     }); 
    </script> 
<?php }