If you’re struggling with displaying dynamic variation prices in Elementor’s Product Price widget, here’s a quick solution that doesn’t require any complex PHP modifications.
- First, add a custom ID ‘price-wrapper’ to your Elementor Product Price widget.
- Then, add an HTML widget with this simple jQuery snippet that listens for variation changes.
jQuery(document).ready(function ($) {
$('.variations_form').on('woocommerce_variation_has_changed', function () {
$('#price-wrapper .elementor-widget-container').html($('.woocommerce-variation-price').html());
});
});
How it works
- The script listens for the ‘woocommerce_variation_has_changed’ event
- When a customer selects a different variation
- It automatically updates the price display by copying the new variation price
- Works seamlessly with all WooCommerce price formats and currencies
Another method (can be used with Elementor)
Let’s explore two different approaches to handle variation price updates.
jQuery(document).ready(function ($) {
//Change archive price on varition change
$('form.variations_form').on('found_variation', function (event, variation) {
let priceWrapper = $('#price-wrapper');
//console.log("Variation selected!");
if (variation) {
let variationId = variation.variation_id;
let price = variation.display_price;
priceWrapper.html(`<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span> ${price}</bdi></span> <small class="woocommerce-price-suffix">incl. BTW</small>`);
//console.log(`Selected Variation ID: ${variationId}, Price: ${price}`);
}
});
});
Key Differences between these two approaches
Including both posts and pages in search results can significantly enhance the content discoverability on your website. This is particularly useful for sites with important content distributed across both posts and pages. By tweaking the search function, users can receive a more comprehensive set of results, making the site more user-friendly and efficient.
The ‘woocommerce_variation_has_changed’ Event Method
- It triggers on any variation change, including invalid selections
- It requires DOM manipulation to get updated prices
- Simpler for basic price updates, especially with default WooCommerce formatting
The ‘found_variation’ Event Method
- It triggers only when a valid variation is found
- It provides direct access to variation data (ID, price, etc.)
- Better for custom price formatting and additional variation-specific logic