I would like some help if possible with some code that i have on my Fabric Store which adds a custom message to help the customer how much fabric they are ordering.
You can see here how the message is presented and changes with the change of quantity: https://thefabricboutique.co.uk/product/pastel-abstract-viscose-linen-blend/
Add 0.5 metre for £6.25
I would like to know how to change this to the following code:
Add 1 unit for 0.5 metre (£6.25 for 0.5 metre)
So just adding 'Add 1 unit' (With the 1 changing as the quantity changes) And the brackets for the price. Which has a duplicated metre change feature from the first part.
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_product_total_amount_html' );
function display_product_total_amount_html() {
global $product;
if( ! has_term( array('fabric'), 'product_cat', $product->get_id() ) ) return;
$metres_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-metres">' . $metres_per_qty . ' metre</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 ? ' metres' : ' metre';
$('.total-price_qty .price-amount').html( parseFloat(<?php echo $display_price; ?> * qty).toFixed(2) );
$('.total-price_qty .qty-metres').html( parseFloat(<?php echo $metres_per_qty; ?> * qty)+lengthTxt );
}
});
});
</script>
<?php
}
I've tried to re-code it myself without success.
Replace your code with the following:
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_product_total_amount_html' );
function display_product_total_amount_html() {
global $product;
if( !has_term( array('fabric'), 'product_cat', $product->get_id() ) ) return;
$metres_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 (%s for %s)', 'woocommerce'),
'<span class="qty-units">1 unit</span>',
'<span class="qty-metres">' . $metres_per_qty . ' metre</span>',
str_replace('0.00', $formatted_price, wc_price(0)),
'<span class="qty-metre2">' . $metres_per_qty . ' metre</span>' );
// 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 qtyTxt = qty > 2 ? ' units' : ' unit',
lengthTxt = qty > 2 ? ' metres' : ' metre';
$('.total-price_qty .qty-units').html( parseInt(qty)+qtyTxt );
$('.total-price_qty .price-amount').html( parseFloat(<?php echo $display_price; ?> * qty).toFixed(2) );
$('.total-price_qty .qty-metres, .total-price_qty .qty-metre2').html( parseFloat(<?php echo $metres_per_qty; ?> * qty)+lengthTxt );
}
});
});
</script>
<?php
}
You will get something like:
Related: Display formated WooCommerce product total based on quantity above add to cart button