I am working on a WordPress website, with WooCommerce functionality.

I have created a Custom Field, which appears on the Product Pages, which allows shoppers to enter their own custom text. This custom text will then be engraved onto the associated product, with my client wanting to charge £2 per letter entered. My client has also requested for the Product Price to update, in real time, as and when a shopper enters/removes a letter in the custom field.

Therefore, I need to manipulate the get_price_html() function as to Output the sum of the following equation:

Current Product Price + (Character Count * £2)

In order to generate the Character Count, I have entered the following jQuery Code into the Single Product Template:

<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('#letter_count').text(cs);
}
</script>

Then to Output the Character Count, I entered the next bit of coding into the functions.php file:

function custom_letter_counter(){
    echo '<span id="letter_count"></span>';
}
add_action('woocommerce_single_product_summary', 'custom_letter_counter');

Is anyone able to point me in the right direction as to the next step I would need to do, in order to manipulate/override the get_price_html() function as to reflect the sum of the above equation?

Read more here: How can I manipulate the `get_price_html()` function?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: