How to Use JavaScript for Live Price Updates in WooCommerce Variations – 2026

WooCommerce variable products allow customers to choose different attributes, such as size or colour, with each variation potentially having a unique price. However, the default behaviour only updates the price when an attribute is selected. By using JavaScript, you can make these updates seamless and live, improving the shopping experience.

This guide explains how to implement live price updates for WooCommerce variations using JavaScript, ensuring the price dynamically reflects the customer’s selection.

Step 1: Add a Custom JavaScript File to Your Theme

First, enqueue a custom JavaScript file that will handle the live price updates.

Code to Enqueue the JavaScript File

Add this to your theme’s functions.php file or your child theme:

/*
 * Snippet: How to Use JavaScript for Live Price Updates in WooCommerce Variations – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1839
 * Tested with WooCommerce 10.7.0
 * "This function enqueues the JavaScript file for live price updates"
*/
function wcsuccess_enqueue_variation_price_script() {
    if ( is_product() ) {
        wp_enqueue_script(
            'wcsuccess-live-price-update',
            get_stylesheet_directory_uri() . '/js/live-price-update.js',
            array( 'jquery' ),
            '1.0',
            true
        );
    }
}
add_action( 'wp_enqueue_scripts', 'wcsuccess_enqueue_variation_price_script' );

Explanation:

• Conditional Loading: Ensures the script is only loaded on single product pages.
• File Path: Points to a live-price-update.js file in the theme’s js folder.

Step 2: Create the JavaScript File

Create a new file named live-price-update.js in your theme’s js folder and add the following code:

/*
 * Snippet: How to Use JavaScript for Live Price Updates in WooCommerce Variations – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1839
 * Tested with WooCommerce 10.7.0
 * "This script handles live price updates for WooCommerce variations"
*/
jQuery(document).ready(function ($) {
    var $priceDisplay = $('.woocommerce-variation-price .price'); // Price element for variations

    // Listen for variation selection changes
    $('form.variations_form').on('found_variation', function (event, variation) {
        if (variation.display_price) {
            // Update the price dynamically
            $priceDisplay.html(variation.price_html);
        }
    });

    // Reset price if no variation is selected
    $('form.variations_form').on('reset_data', function () {
        var $defaultPrice = $('.woocommerce-Price-amount').first();
        $priceDisplay.html($defaultPrice.html());
    });
});

Explanation:

• Variation Change Detection: Uses the found_variation event to detect when a variation is selected.
• Dynamic Price Update: Updates the price display dynamically based on the selected variation.
• Reset Behaviour: Restores the default price when the selection is cleared.

Step 3: Style the Price for Better Visibility

To make the updated price more noticeable, you can add custom CSS.

CSS for Price Styling

Add this CSS to your theme’s style.css file or the WordPress customiser:

.woocommerce-variation-price .price {
    font-size: 1.5rem;
    color: #3498db; /* Light blue colour */
    font-weight: bold;
    transition: color 0.3s ease;
}

.woocommerce-variation-price .price:hover {
    color: #2ecc71; /* Green on hover */
}

Explanation:

• Font Size and Colour: Enlarges the price and applies a distinct colour.
• Hover Effect: Adds a hover effect to make the price stand out.

Step 4: Test the Live Price Updates

1. Create a Variable Product:
   • Go to Products > Add New in WordPress.
   • Add attributes and variations with unique prices.
2. View the Product on the Front End:
   • Navigate to the product page and select attributes.
3. Check the Price Updates:
   • Confirm that the price dynamically updates as you select different variations.

Use Case Example

When the customer selects Medium (Blue), the price instantly updates to $30.00 without reloading the page.

Additional Features

Include Sale Prices

If you want to include the sale price for variations, WooCommerce’s variation object already contains this data. The code above dynamically handles both regular and sale prices using the variation.price_html property.

Show Stock Information

To display stock information alongside the price, modify the JavaScript like this:

$('form.variations_form').on('found_variation', function (event, variation) {
    if (variation.display_price) {
        $priceDisplay.html(variation.price_html);
        if (variation.is_in_stock) {
            $('.stock-info').html('In stock: ' + variation.stock_quantity + ' items');
        } else {
            $('.stock-info').html('<span style="color: red;">Out of stock</span>');
        }
    }
});

Add an empty <div class="stock-info"></div> below the price in your product template for this to work.

Conclusion

Using JavaScript for live price updates in WooCommerce variations enhances the user experience by dynamically reflecting price changes without page reloads. This approach provides a smooth and interactive interface, ensuring your customers can easily see the price of selected variations.

Test these changes in a staging environment before applying them to your live site. For more WooCommerce customisation tips, explore our WooCommerce Visual Hooks Guide or use our wp-config generator for advanced configurations.

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.