How to display price of a variable WooCommerce product?

I want to display the price (later on normal price next to sale price) of a variable WooCommerce. The code is inserted into a block (similar to widget) which is placed on my landing page. Unfortunately my price div not working/showing anything 🙁

Could you please help me with that?

Thanks in advance!

<div id="variant">
    <label><input type="radio" name="toggle" id="3"><span>3 Natural Energy-Riegel</span></label>
    <label><input type="radio" name="toggle" id="12" checked="checked"><span>12 Natural Energy-Riegel</span></label>
    <label><input type="radio" name="toggle" id="24"><span>24 Natural Energy-Riegel</span></label>

<div id="price"></div>

<script type="text/javascript">
function get_product_price() {

var $radio = $('input[name=toggle]:checked');

    if ($radio.attr("id") == 3) {
        $_product = wc_get_product('297');
        $price = $_product->get_price();
    } elseif ($radio.attr("id") == 12) {
        $_product = wc_get_product('299');
        $price = $_product->get_price();
    } else ($radio.attr("id") == 24) {
        $_product = wc_get_product('300');
        $price = $_product->get_price();

document.getElementById('price').innerHTML = $price;


Read more here: How to display price of a variable WooCommerce product?

Leave a Reply

Your email address will not be published. Required fields are marked *