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 CustomizeWoo.com FREE * @author        Rodolfo Melogli * @compatible    WooCommerce 5 * @donate $9     https://businessbloomer.com/bloomer-armada/ */add_action( 'woocommerce_after_add_to_cart_form', 'bbloomer_echo_variation_info' );function bbloomer_echo_variation_info() {	global $product;	if ( ! $product->is_type( 'variable' ) ) return;	echo '<div class="var_info"></div>';   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);

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