Display default and selected variation price from a woocommerce variable product

Question

I've been looking over Stack for an answer but can't find one (even when reading this and this)

Here my trouble: i would like to display (or at least get the variable) of the default and selected price of a woocommerce variable product.

System: Wordpress 5,6 + woocommerce

With a single product, my code is working well and i obtain a display like this: Display for a single product with weight and price rewritten on right after quantity selector

And code is the following:

global $woocommerce;
$productxyz = new WC_Product( get_the_ID() );
$priceproduct = $productxyz->get_regular_price();
$poidsproduct = $productxyz->get_weight();

// CODE FOR THE + AND - QUANTITY
var $ = jQuery;
$(document).ready(function(){
$('.decrement').click(function () {
  $moninput = $(this).nextAll('input#Qte');
  if( Number($moninput.val()) > $moninput.attr("min") ){
     $moninput.val(Number($moninput.val()) - 1);
  }else{
     $moninput.val($moninput.attr("min"));
  }
  Update_Price();
  event.preventDefault();
})
$('.increment').click(function () {
  $moninput = $(this).nextAll('input#Qte');
  $moninput.val(Number($moninput.val()) + 1);
  Update_Price();
  event.preventDefault();
})
$('#btn-cady').click(function () {
 $('[name="add-to-cart"]').click();
 event.preventDefault();
})

// CODE FOR THE TEXT DISPLAYED ON THE RIGHT OF THE QUANTITY SELECTOR
function Update_Price(){
  if($('input#Qte').attr('price') > 0){
    $total =  parseFloat($('input#Qte').val()) * $('input#Qte').attr('price');
    $qtyactuelle = parseFloat($('input#Qte').val());
    $('input[name="quantity"]').val($('input#Qte').val());
    console.log($total);
    if( $qtyactuelle < 2){
    $('.Qtotal h4').html("<font color='#401816'>pack soit " +($('input#Qte').attr('weight')*parseFloat($('input#Qte').val()))+"g |</font> "+parseFloat($total).toFixed(2)+" €");
    }
    if($qtyactuelle > 1){
    $('.Qtotal h4').html("<font color='#401816'>packs soit " +($('input#Qte').attr('weight')*parseFloat($('input#Qte').val()))+"g |</font> "+parseFloat($total).toFixed(2)+" €");
    }
  }
}
Update_Price();
});

But for a variation product... i feel so ashamed to show my result because when it's displaying well, function is not working. And when functions are working, display is very terrible Code result for variation product

I tried to use get_available_variations() and also the following foreach but...

foreach( $product->get_available_variations() as $variation ){
        $found = true;
        // Loop through variation attributes
        foreach( $variation['attributes'] as $key => $value ){
            $taxonomy = str_replace( 'attribute_', '', $key );
            // Searching for a matching variation as default
            if( isset($default_attributes[$taxonomy]) && $default_attributes[$taxonomy] != $value ){
                $found = false;
                break;
            }
        }
        // If we get the default variation
        if( $found ) {
            $default_variaton = $variation;
            break;
        }

Has anyone an idea of how to developp it? I'm feeling speechless.

In advance, thanks a lot!!!

code_chef code_chef · Accepted Answer · 2020-12-21T23:37:10

On WooCommerce variable product pages, product variation data is stored in the data-product_variations attribute of the multi-select <form class="variation_form"> element. The variation data is stored in JSON format which you can then decode using the JSON.parse() method. There is no need to output this data yourself via PHP as WooCommerce already does it for you.

The JSON stored in the data-product_variations attribute includes the following price related properties:

display_price
regular_price
sale_price

With a little bit of jQuery/JS, you can easily output or mutate the default or selected variation pricing with the above properties.

Good Luck!

Display default and selected variation price from a woocommerce variable product

1 Answers