price span not showing

Hey Munford,
When I check the price shows for each variation:

Best regards,
Mike

Hi,
Can we login to examine?

Best regards,
Mike

Hi,

Thank you for the info.

We added the following code to the functions.php file to replace the base price with the variable price — it should also update based on the selected variation.

add_action( 'wp', function() {
    if ( is_product() ) {
        $product = wc_get_product( get_the_ID() );
        if ( $product && $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
            add_action( 'woocommerce_single_product_summary', 'ava_woocommerce_single_product_summary_mod', 10 );
        }
    }
});

function ava_woocommerce_single_product_summary_mod() {
    $product = wc_get_product( get_the_ID() );
    if ( ! $product || ! $product->is_type( 'variable' ) ) return;

    echo '
<div class="av-variable-price">';
    echo $product->get_price_html();
    echo '</div>
';
}

add_action( 'wp_footer', function() {
    if ( is_product() ) : ?>
        <script type="text/javascript">
        jQuery(function($){
            $('.variations_form').on('show_variation', function(event, variation){
                $('.av-variable-price').html(variation.price_html);
            });

            $('.variations_form').on('reset_data', function(){
                var productMinMaxPrice = $('.variations_form').data('product_variations')[0].display_price_html;
                $('.av-variable-price').html(productMinMaxPrice);
            });
        });
        </script>
    <?php endif;
});

Best regards,
Ismael

Hi,

We have adjusted the code a bit. You may notice a short delay before the price range displays because we needed to override the default variation switching behavior. Once the page is fully loaded, the price range should display correctly and selecting variations will switch the price as normal.

add_action( 'wp', function() {
    if ( is_product() ) {
        $product = wc_get_product( get_the_ID() );
        if ( $product && $product->is_type( 'variable' ) ) {
            remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
            add_action( 'woocommerce_single_product_summary', 'ava_woocommerce_single_product_summary_mod', 10 );
        }
    }
});

function ava_woocommerce_single_product_summary_mod() {
    $product = wc_get_product( get_the_ID() );
    if ( ! $product || ! $product->is_type( 'variable' ) ) return;

    $min_price = $product->get_variation_price( 'min', true );
    $max_price = $product->get_variation_price( 'max', true );

    if ( $min_price !== $max_price ) {
        $price_html = wc_price( $min_price ) . ' - ' . wc_price( $max_price );
    } else {
        $price_html = wc_price( $min_price );
    }

    echo '
<div class="av-variable-price" style="opacity:0; transition: opacity 0.5s;"><span class="price"><span class="woocommerce-Price-amount amount"><bdi>' . $price_html . '</bdi></span></span></div>
';
}

add_action( 'wp_footer', function() {
    if ( is_product() ) : ?>
        <script type="text/javascript">
        jQuery(function($){
            var $priceContainer = $('.av-variable-price');

            function formatPrice(price){
                return price.toLocaleString('da-DK', { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + ' kr.';
            }

            function updatePrice(min, max){
                var html = '';
                if (min != max){
                    html = '<span class="price"><span class="woocommerce-Price-amount amount"><bdi>' + formatPrice(min) + ' - ' + formatPrice(max) + '</bdi></span></span>';
                } else {
                    html = '<span class="price"><span class="woocommerce-Price-amount amount"><bdi>' + formatPrice(min) + '</bdi></span></span>';
                }
                $priceContainer.html(html).css('opacity', 1);
            }
			
            $(window).on('load', function(){
                setTimeout(function(){
                    var productMin = <?php echo wc_get_price_to_display( wc_get_product(get_the_ID()), array('price'=>wc_get_product(get_the_ID())->get_variation_price('min', true)) ); ?>;
                    var productMax = <?php echo wc_get_price_to_display( wc_get_product(get_the_ID()), array('price'=>wc_get_product(get_the_ID())->get_variation_price('max', true)) ); ?>;
                    updatePrice(productMin, productMax);
                }, 1000);
            });
			
            $('.variations_form').on('show_variation', function(event, variation){
                $priceContainer.css('opacity', 0);
                setTimeout(function(){
                    $priceContainer.html(variation.price_html).css('opacity', 1);
                }, 100);
            });
        });
        </script>
    <?php endif;
});

Screenshot:

Best regards,
Ismael

Hi,

can it just be with a static price range under the title?

That should be possible — simply remove this block of code from the functions.php file:

 
$('.variations_form').on('show_variation', function(event, variation){
                $priceContainer.css('opacity', 0);
                setTimeout(function(){
                    $priceContainer.html(variation.price_html).css('opacity', 1);
                }, 100);
            });

Best regards,
Ismael

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard