How can I dynamically change the price of a Product based on the amount of characters entered into a Custom Field by a Shopper?

209
May 09, 2017, at 11:19 AM

I am currently working on a WordPress website, with WooCommerce functionality. On the Product Page, I have created a Custom Field, which allows shoppers to enter a piece of text that they would like to appear on the associated product.

Each product has a starting price with my client wanting to then charge the shopper an additional fee of (for example) £1 per letter entered into the Custom Field.

My client would then like the Product Price, on the Product Page, to change in real time to reflect the amount of letters entered. For example:

Product A: £20

As shopper enters 5 letters, the Product Price changes to £25 in real time.

So far, I have created the Character Counter on the Product Page, using the following code:

JavaScript/jQuery:

<script type="text/javascript"> 
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);
function updateCount() {
    var cs = jQuery(this).val().length;
    jQuery('#character_count').text(cs);
}
</script>

At present, I am Outputting this Character Counter through the use of the below code in the functions.php file:

Code Entered into functions.php file:

function custom_character_counter(){
    echo 'Letters Entered:  <span id="character_count"></span>';
}
add_action('woocommerce_single_product_summary', 'custom_character_counter');

I could be wrong, but I assume I now need to manipulate the product price to reflect the following equation:

Original Product Price + (Characters Entered x £1)

Does anyone have any idea on how I can achieve this or indeed if there is a better approach?

Thanks in advance.

Answer 1

Add an input hidden for the product price / price per letter / and new price then do the computation with it .. the new price will be the one to be pass to the form for its total price.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="custom-letters-container"> 
    <h1>Product 1</h1> 
    <input type="hidden" name="price" class="product-price" value="20" /> 
    <input type="hidden" name="price" class="letter-price" value="2" /> 
     
    <input type="text" name="letters" class="product-custom-text" /> 
     
    <input type="hidden" name="price" class="product-new-price-hidden" /> 
    <div class="character_count"></div> 
</div> 
 
<div class="custom-letters-container"> 
    <h1>Product 2</h1> 
    <input type="hidden" name="price" class="product-price" value="25" /> 
    <input type="hidden" name="price" class="letter-price" value="5" /> 
     
    <input type="text" name="letters" class="product-custom-text" /> 
     
    <input type="hidden" name="price" class="product-new-price-hidden" /> 
    <div class="character_count"></div> 
</div> 
 
    <script type="text/javascript">  
        jQuery(document).on('keyup', '.product-custom-text', updateCount); 
        jQuery(document).on('keydown', '.product-custom-text', updateCount); 
     
        function updateCount() { 
            var strlen = jQuery(this).val().length; 
            var lettertotal = parseInt(jQuery(this).parent().children('.letter-price').val()) * strlen; 
            var totalprice = parseInt(jQuery(this).parent().children('.product-price').val()) + lettertotal; 
            jQuery(this).parent().children('.product-new-price-hidden').val(totalprice); 
        jQuery(this).parent().children('.character_count').text(totalprice); 
        } 
    </script>

Rent Charter Buses Company
READ ALSO
Laravel JWT : generated tokens on the localhost are valid on the server

Laravel JWT : generated tokens on the localhost are valid on the server

im writing api for a mobile app , the backend website is written in laravel

344
How to save onpaste image with a src of &ldquo;data:image/png;base64,&hellip;&rdquo; using php

How to save onpaste image with a src of “data:image/png;base64,…” using php

I'm trying to save the pasted image into a folder and the relevant details to the database, but my current code is not saving the pasted image, I try to put a hard coded url on the src attribute and it was working

368
Not entering if condition in Php mySQL [on hold]

Not entering if condition in Php mySQL [on hold]

I can't figure out why my if statement isn't running after I submit the form

251