• I have created a Custom Input Text Box on a Product Page, which allows users to enter a piece of text that they would like to be placed on the associated Product. I would then like to create a function which assigns each letter entered a price. For this example, lets say £2. I would then like the Product Price to dynamically inflate/decrease (in real time) by a difference of £2 for every letter entered/removed in the Custom Input Text Box.

    So far, I have created a 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>

    I am then using the below code, in the functions.php file, in order to Output the Character Count:

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

    My thoughts being that now that I have the Character Count Outputted to the page, I just need to figure out how to create a function which performs the following equation:

    Original Product Price + (Characters Entered x £1)

    which then dynamically alters the starting Product Price in real time.

    Is anyone aware of how this can be achieved?

    Thanks in advance.

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Identify the HTML element that contains the price and set its content with .text() just as you do for your element. You may need to add more content, like ‘£’ and format the number for appropriately, either 0 or 2 decimal places. Also be sure to set any form field values that may contain the price sent to the server. The elements may be one and the same, or not. The point is be sure the server gets the same price that was displayed.

Viewing 1 replies (of 1 total)
  • The topic ‘How can I dynamically change the Price of a Product based on a character input?’ is closed to new replies.