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 businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 7
* @community https://businessbloomer.com/club/
*/
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'
'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);
Thanks for the code! It works for the price but how can I make this work for a custom attribute that is not in your list? I have an attribute that I created called “Size” (slug: size) and I need to get the selected value. I tried entering “size” into the code (with and without “_html”) but it didn’t work. Any ideas what I need to do? Thanks 🙂
You can use the following filter, and add your own data:
Hi Rodolfo,
How do i get the selected variation name and append it after price?
For example: $9.99 for 10ml
Tejas, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello
Thank you for the snippet, this is exactly what I am looking for.
However, I would like to display the Variation Info on the other plugin template “WooCommerce PDF Invoices & Packing Slips” to display in in the .pdf invoice file.
What should I do?
Waiting for your reply
Best regards,
TOM
Hi Tom, I suggest you contact the plugin dev and ask them. Thank you
How can I use this code to assign the value to a variable instead of printing it to HTML?
JS or PHP variable?
this code works fantastic. was wondering if there was a way to display the sku on non variable products also? also is there a way to have the basic sku show before variations are chosen. For example, if the overall product sku is CS5 can that be displayed then when the variations are chosen the variable sku would be shown like the code does right now. Your tutorials have been very helpful thank you for the information.
Hi Ben thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!