Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Add message above add to cart to say – 'Add 0.5 meters for £7' as an example

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 
}
Tags:

2

Answers


  1. 0

    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.

    enter image description here

    Login or Signup to reply.
  2. 0

    To finish your code, you could echo another HTML element in the same way you echo your price div (id="product_total_price"). Then you can add another variable and calculation function to your JavaScript.

    This code will display the total price and the total meters (half of the quantity) above the "Add to Cart" button, and updates these values when the quantity changes:

    // Add a function to the 'woocommerce_before_add_to_cart_quantity' action hook
add_action( 'woocommerce_before_add_to_cart_quantity', 'qty_front_add_cart' );

// Define the function
function qty_front_add_cart() {
    // Access the global product object
    global $product;

    // Display the total price message
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.get_woocommerce_currency_symbol().wc_get_price_to_display($product).'</span>');
    // Display the initial meter message and total price
    echo sprintf('<div id="product_total_meter" style="margin-bottom:20px;">%s</div>',__('Add 0.5 meters for ','woocommerce').'<span class="meter_price">'.get_woocommerce_currency_symbol().wc_get_price_to_display($product).'</span>');

    // JavaScript code
    ?>
        <script>
            // When the document is ready
            jQuery(function($){
                // Get the product price from PHP and assign to JavaScript variable
                var price = <?php echo wc_get_price_to_display($product); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';

                // When the quantity input field changes
                $('[name=quantity]').change(function(){
                    // If the new quantity is not less than 1
                    if (!(this.value < 1)) {
                        // Calculate the total price and assign to variable
                        var product_total = parseFloat(price * this.value);
                        // Calculate the total meters and assign to variable
                        var product_meter = parseFloat(this.value) / 2;

                        // Update the total price on the page
                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                        // Update the total meters on the page
                        $('#product_total_meter .meter_price').html('Add ' + product_meter.toFixed(1) + ' meters for ' + currency + product_total.toFixed(2));
                    }
                });
            });
        </script>
    <?php
}

    The code should be added to the bottom of your functions.php file, of your child theme.

    I have tested this code, and it works on my end. Also, my currency symbol remains even on quantity change.

    Remember:

    • This code will load on any product page.
    • You can omit the div product_total_price and $('#product_total_price .price').html( currency + product_total.toFixed(2)); from the code, if you only need to display the "Add (X) meters for (Price)".
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search