I have a Fabric store which i need it to clearly state to customers the amount they are adding to the basket. The product is set at 1/2 meter prices. So 1 quantity of stock is half a meter of fabric.
https://thefabricboutique.co.uk/product/jennifer-cotton/
I need it to say above the add to cart.
Add (X) meters for (Price).
(x) - Half of what the quantity states. (3 quantity = 1.5 Meters) (Price) - Increase price as the quantity increases. (3 quantity at £7 = £21)
This is an attempt at getting the price so for but i'm just struggling to complete it! Any help would be amazing thank you.
I tried this code and it works with the price but seems to drop of the currency symbol before quantity is changed.
add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_front_add_cart' );
function qty_front_add_cart() {
global $woocommerce, $product;
// let's setup our divs
echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.wc_get_price_to_display($product).'</span>');
?>
<script>
jQuery(function($){
var price = <?php echo wc_get_price_to_display($product); ?>,
currency = '<?php echo get_woocommerce_currency_symbol(); ?>';
$('[name=quantity]').change(function(){
if (!(this.value < 1)) {
var product_total = parseFloat(price * this.value);
$('#product_total_price .price').html( currency + product_total.toFixed(2));
}
});
});
</script>
<?php
}
There are some mistakes and missing things in your code, try the following instead:
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_product_total_amount_html' );
function display_product_total_amount_html() {
global $product;
$meters_per_qty = 0.5;
$display_price = wc_get_price_to_display($product);
$formatted_price = '<span class="price-amount">'. number_format($display_price, 2) . '</span>';
// Output product total price amount
$price_string = sprintf( __('Add %s for %s', 'woocommerce'),
'<span class="qty-meters">' . $meters_per_qty . ' meter</span>',
str_replace('0.00', $formatted_price, wc_price(0)) );
// Output product total price amount
echo '<div class="total-price_qty" style="margin-bottom:20px;">'.$price_string.'</div>'
?>
<script>
jQuery(function($){
$('input[name=quantity]').on( 'input change', function(){
const qty = $(this).val();
if ( qty != 0 ) {
const lengthTxt = qty > 2 ? ' meters' : ' meter';
$('.total-price_qty .price-amount').html( parseFloat(<?php echo $display_price; ?> * qty).toFixed(2) );
$('.total-price_qty .qty-meters').html( parseFloat(<?php echo $meters_per_qty; ?> * qty)+lengthTxt );
}
});
});
</script>
<?php
}
Code goes on functions.php file of your child theme (or in a plugin). Tested and works.