How to Replace Variable Price Range Display with Active Variation Price in WooCommerce – 2026

Displaying the active variation price instead of the variable price range in WooCommerce can enhance the shopping experience by providing clearer pricing information. In this guide, we’ll show you how to achieve this without using any plugins, ensuring a smoother and more user-friendly checkout process.

Why Replace the Variable Price Range Display?

Replacing the variable price range display with the active variation price can:

• Increase Clarity: Show the exact price of the selected variation, reducing confusion for customers.
• Enhance User Experience: Provide immediate pricing feedback when a customer selects a variation.
• Boost Conversions: Clearer pricing can lead to higher conversion rates as customers have a better understanding of costs.

Step 1: Add Custom JavaScript to Update the Price

First, we need to add custom JavaScript to update the price dynamically when a variation is selected. This can be done by enqueueing a script in your theme’s functions.php file. If you don’t have a child theme, you can use our free child theme generator.

1. Open your child theme’s functions.php file.
2. Add the following code to enqueue the custom script:

/*
 * Snippet: How to Replace Variable Price Range Display with Active Variation Price in WooCommerce – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1359
 * Tested with WooCommerce 10.7.0
 * "Enqueue custom JavaScript for updating variation price"
 */
function custom_enqueue_scripts() {
    if (is_product()) {
        wp_enqueue_script('custom-variation-price', get_stylesheet_directory_uri() . '/js/custom-variation-price.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'custom_enqueue_scripts');

3. Create a new JavaScript file named custom-variation-price.js in your child theme’s js directory and add the following code:

/*
 * Snippet: How to Replace Variable Price Range Display with Active Variation Price in WooCommerce – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1359
 * Tested with WooCommerce 10.7.0
 * "JavaScript to update variation price on selection"
 */
jQuery(document).ready(function($) {
    $('.variations_form').on('show_variation', function(event, variation) {
        var $price = $('.single_variation .woocommerce-Price-amount');
        if ($price.length) {
            $('.woocommerce-variation-price').html($price.html());
        }
    });
});

Step 2: Modify the WooCommerce Template to Hide the Range

Next, we need to hide the default price range and display the active variation price instead. This involves modifying the WooCommerce template files.

1. Copy single-product/price.php from the WooCommerce plugin directory to your child theme, maintaining the directory structure.
2. Open the copied price.php file in your child theme and replace the contents with the following code:

/*
 * Snippet: How to Replace Variable Price Range Display with Active Variation Price in WooCommerce – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1359
 * Tested with WooCommerce 10.7.0
 * "Override woocommerce price template to hide price range"
 */
defined('ABSPATH') || exit;

global $product;

if ($product->is_type('variable')) {
    $available_variations = $product->get_available_variations();
    $variation_prices = wp_list_pluck($available_variations, 'display_price');
    $min_price = min($variation_prices);
    $max_price = max($variation_prices);

    if ($min_price !== $max_price) {
        echo '<span class="price"><span class="woocommerce-variation-price"></span></span>';
    } else {
        echo '<span class="price">' . wc_price($min_price) . '</span>';
    }
} else {
    echo '<span class="price">' . $product->get_price_html() . '</span>';
}

Conclusion

By following these steps, you can replace the variable price range display with the active variation price in WooCommerce, providing a clearer and more user-friendly pricing display for your customers. This simple enhancement can improve the overall shopping experience and potentially boost your sales.

For more customisation tips and tools, don’t forget to check out our free WordPress child theme generator.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.

See also  How to Set the Default Order Status Based on Payment Gateway in WooCommerce - 2026