How can I modify the `get_price_html` Output, so that it Outputs the sum of a Maths Input?

I am currently using the WooCommerce Platform, in order to put together an eCommerce website.

I am having problems with the Price Output, where I want the get_price_html() to Output not just the inputted price but the sum of an actual Maths entry.

Now, I understand that the get_price_html() function is responsible for Outputting the price. My first question is, where is this function stored?

Then more importantly, and I assume this would need to be entered into the functions.php file, how would I enter the following Math:

Product Price + (£2 * Characters Entered into Custom Field)

The Product Price being the current Output by get_price_html();

I understand that the below code would not work but I hope this helps give an understanding of what I am trying to achieve:

function custom_price() {
    echo 'sum of (get_price_html + (2*Amount of Letters Entered in Custom Field))';
add_action( 'woocommerce_before_add_to_cart_button', 'custom_price' );

Ideally, I would need the Product Price to change in real time. Therefore, when a Shopper enters a character, the price goes up by £2. Similarly, if the Shopper removes a Character, the Product Price would go down by £2.

Custom Field

The Custom Field appears on the Product Page and allows shoppers to input their own text. This text is then to be applied to the product. To generate the Custom Field, I used a Plugin. The outputted HTML for the Custom Field is:

<div class="fields-group-1">    

        <table class="fields_table  product-custom-text-wrapper" cellspacing="0">
                    <td class="label"><label class=" product-custom-text-label" for="custom_text">Custom Text</label></td>
                    <td class="value">
                                            <input type="text" class="field product-custom-text" name="custom_text" value="" placeholder="Enter Custom Text ..." maxlength="16" type="text" pattern="mandatory" mandatory="no"  />
                        <span class="validation-message is-valid-1"></span>


Character Count

I understand that I would naturally need to create a Character Counter, and then Output this to the Page, so that the number can be ‘dynamically pulled’ into the above Maths. To achieve such a Character Counter, I have entered the following code into the Single Page 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;

At present, I am outputting the actual count to the Product Page, via the following code in the functions.php file:

function character_counter_output(){
    echo '<span id="character_count"></span>';
add_action('woocommerce_single_product_summary', 'character_counter_output', 29);

Any suggestions on what my next step would be, would be greatly appreciated. I would welcome any pointers on my approach as to whether I am going in the right direction or whether to achieve such a goal, I would need to explore some other coding approach.

Thanks in advance, for any suggestions!

Read more here: How can I modify the `get_price_html` Output, so that it Outputs the sum of a Maths Input?

Leave a Reply

Your email address will not be published. Required fields are marked *