WooCommerce: Display Selected Variation Info (price, weight, etc.) @ Single Product Page

We already saw how to get the “Variation ID” from the single product page once product attributes dropdown are selected. In that tutorial, we ran a jQuery “change” event once “input.variation_id” got updated.

However, that only gives us access to the variation ID. What if I need to read the variation price, stock quantity, SKU, weight, and so on? Well, in such case, we need different code. Enjoy!

PHP/jQuery Snippet: Get Currently Selected Variation Info @ WooCommerce Single Product Page

In this case studio, we will print the variation price (price_html) in a custom DIV right below the add to cart button. Of course, you can show the info in a JavaScript alert instead or do anything else you like with it.

We will target the custom WooCommerce jQuery event called “found_variation”, which of course triggers once a variation is currently selected.

After the snippet, you find a list of data keys you can use instead of “price_html” in order to get other variation info.

/**
 * @snippet       Get Current Variation Info @ WooCommerce Single Product
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://www.tutoraspire.com
 */

add_action( 'woocommerce_after_add_to_cart_form', 'tutoraspire_echo_variation_info' );

function tutoraspire_echo_variation_info() {
global $product;
if ( ! $product->is_type( 'variable' ) ) return;
echo '
';
   wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {
$('.var_info').html(variation.price_html); // SIMPLY CHANGE price_html INTO ONE OF THE KEYS BELOW       
});
" );
}

As I mentioned earlier, if you need other info rather than “price_html”, here’s the list of data keys you can use instead.

'attributes'
'availability_html'
'backorders_allowed'
'dimensions'
'dimensions_html'
'display_price'
'display_regular_price'
'price'
'image'
'image_id'
'is_downloadable'
'is_in_stock'
'is_purchasable'
'is_sold_individually'
'is_virtual'
'max_qty'
'min_qty'
'price_html'
'sku' 
'variation_description'
'variation_id'
'variation_is_active'
'variation_is_visible'
'weight'
'weight_html'

In the snippet, simply change:

.html(variation.price_html);

into e.g.:

.html(variation.dimensions_html);