Display the selected WooCommerce variation formatted price with shortcode - php

Question

I have created this piece of code that displays the price on any page on the website, which is controlled by woocommerce.
add_shortcode( 'hhs_product_price', 'hhs_woo_product_price_shortcode' );
function hhs_woo_product_price_shortcode( $atts ) {
$atts = shortcode_atts( array(
'id' => null
), $atts, 'hhs_product_price' );
if ( empty( $atts[ 'id' ] ) ) {
return '';
}
$product = wc_get_product( $atts['id'] );
if ( ! $product ) {
return '';
}
return $product->get_price_html();
}
What I would like to do is modify the code so that if a customer selects a product with a variation. Then the price changes to display the variation price. For example right now if a person selects a product, in this case a tincture bottle, with a price variation connected to the size of the bottle. On the products page they see the following:-
Product (Tincture) $30 - $50
From a drop down menu they can select an option of either 10mg bottle ($30), 15mg bottle ($40), or 20mg bottle ($50). So if a person selects option 20mg the price should display $50 instead of $30 - $50
I have already looked at various posts on stackoverflow with a similar problem but non of those solutions are working for me
Display woocommerce variable product price
Woocommerce get variation product price
Any help would be greatly appropriated.
Thank you

Answer 1

To display the selected product price from a variation on variable products, jQuery is required. So the following shortcode will handle all product types, including variable products and their price variations:
add_shortcode( 'product_price', 'display_formatted_product_price' );
function display_formatted_product_price( $atts ) {
extract(shortcode_atts( array(
'id' => null
), $atts, 'product_price' ) );
global $product;
if( ! empty($id) || ! is_a($product, 'WC_Product') ) {
$product = wc_get_product( empty($id) ? get_the_id() : $id );
}
$price_html = $product->get_price_html();
// Others product types than variable
if ( ! $product->is_type('variable') ) {
return '<span class="product-price">' . $price_html . '</span>';
}
// For variable products
else {
ob_start();
?>
<script type="text/javascript">
jQuery( function($){
var p = '<?php echo $price_html; ?>', s = 'span.product-price';
$( 'form.variations_form.cart' ).on('show_variation', function(event, data) {
$(s).html(data.price_html); // Display the selected variation price
});
$( 'form.variations_form.cart' ).on('hide_variation', function() {
$(s).html(p); // Display the variable product price range
});
});
</script>
<?php
return ob_get_clean() . '<span class="product-price">' . $price_html . '</span>';
}
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works.
USAGE:
Use [product_price] or in php code echo do_shortcode('[product_price]').
You can also define a product id like (for example for product id 37): [product_price id="37"]

Answer 2

I'd like to thank LoicTheAztec for this code which is tested and works. However I banged my head on one issue: if product variations are all with the same price, the price_html will come back empty (issue described here: https://github.com/woocommerce/woocommerce/issues/11827). I solved this with a filter found in the github conv above:
add_filter( 'woocommerce_show_variation_price', '__return_true');