CODEWITHSUNDEEP
phpjquerywordpresswoocommerceproduct
Paudun
Paudun

Reputation: 287

Woocommerce product displayed price manipulation using jQuery

Based on "Get selected variation price in jQuery on Woocommerce Variable products" answer code to one of my last questions, this code gets the users input to the product options and I'm trying to use the values to calculate the price displayed to the user, but I can't figure it out.

All of the code works, except the part above the window alert message. I have tried to add a filter function get_price_html() inside php tags above the alert message as well, but it shows all kind of errors.

Is it possible to just use javascript to change the price displayed?

This is the code that I am using actually:

add_action( 'woocommerce_before_add_to_cart_quantity', 'func_option_valgt');
function func_option_valgt() {
    global $product;

    if ( $product->is_type('variable') ) {
        $variations_data =[]; // Initializing

        // Loop through variations data
        foreach($product->get_available_variations() as $variation ) {
            // Set for each variation ID the corresponding price in the data array (to be used in jQuery)
            $variations_data[$variation['variation_id']] = $variation['display_price'];
        }
        ?>
        <script>
        jQuery(function($) {
            var jsonData = <?php echo json_encode($variations_data); ?>,
                inputVID = 'input.variation_id';

            $('input').change( function(){
                if( '' != $(inputVID).val() ) {
                    var vid      = $(inputVID).val(), // VARIATION ID
                        length   = $('#cfwc-title-field').val(), // LENGTH
                        diameter = $('#diameter').val(),  // DIAMETER
                        vprice   = ''; // Initilizing

                    // Loop through variation IDs / Prices pairs
                    $.each( jsonData, function( index, price ) {
                        if( index == $(inputVID).val() ) {
                            vprice = price; // The right variation price
                        }
                    });

                    var rope_price = length*vprice;
                    document.cookie = 'rope_price_cookie='+rope_price;

                    ////////// This is where I would like to add some code to change the displayed price //////
                    $('price') = rope_price;  /// something like this, only it doesn't work :(

                    alert('variation Id: '+vid+' || Length: '+length+' || Diameter: '+diameter+' || Variantprice: '+vprice+' ||Rope price: '+rope_price);

                        }
                    }
            });
        });
        </script>
        <?php       
    }   
}

Any help appreciated.

Upvotes: 1

Views: 1592

Answers (1)

Sven Hakvoort
Sven Hakvoort

Reputation: 3621

You can assign an ID to a <span> element, for example <span id="price"></span> and then in your JS do the following:

$("#price").html(rope_price);

Please note that the # indicates an ID, you can also use a class selector (.price) which can be useful if you display the price in multiple sections of your page. You can then update these elements all at once when using a class (make it a more descriptive class then price then to prevent name collisions)

Upvotes: 1

Related Questions