Surprisingly enough, variable products with a price range display two prices: at the top right you find the “parent” product price, displayed as a range; but once you select a variation, a second price appear just above the variation add to cart. Somewhat confusing.
In today’s solution, we’ll see once and for all how to replace the top right variable product price with the one of the current variation, while also hiding the variation price. Therefore, you’ll see a single price on the single product page for variable products. Enjoy!
PHP Snippet: Dynamically Update Variable Product Price With Current Variation Price
Note: the jQuery statements included in the snippet target specific CSS classes in order to replace the price HTML. If your theme uses customized HTML and different classes, the code won’t work. Make sure to test this code on a default theme, such as Storefront, to make sure it actually works; and only then try to adjust the jQuery to target the correct non-default classes.
/**
* @snippet Replace Variable Price With Variation Price | WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @testedwith WooCommerce 7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
add_action( 'woocommerce_variable_add_to_cart', 'bbloomer_update_price_with_variation_price' );
function bbloomer_update_price_with_variation_price() {
global $product;
$price = $product->get_price_html();
wc_enqueue_js( "
$(document).on('found_variation', 'form.cart', function( event, variation ) {
if(variation.price_html) $('.summary > p.price').html(variation.price_html);
$('.woocommerce-variation-price').hide();
});
$(document).on('hide_variation', 'form.cart', function( event, variation ) {
$('.summary > p.price').html('" . $price . "');
});
" );
}
Screenshot after the snippet is installed and a variation is selected:
Mini-Plugin: Business Bloomer WooCommerce Replace Variable Price With Active Variation Price
You don’t feel confident with coding? You need a simple solution for improving the variable product page UX? You don’t want to purchase yet another bloated, expensive plugin? Great!
Business Bloomer Replace Variable Price With Active Variation Price is a mini WooCommerce plugin, without the usual hassles. One feature. Lifetime license. No annoying subscriptions. 1 plugin file. A few lines of code. No banners. No up-sells. No WP notifications. Use it on as many websites as you like. Lifetime support. 1-page documentation. A single and easy admin dashboard.
Screenshot of the settings? Here you go:
Quick demo? Here it is:
As you can see the settings are pretty straight forward – I mean, you may not need to touch any settings whatsoever as usually the plugin works straight away. Awesome!
For those having issues with Elementor, I was able to get the code snippet working by changing the two instances of .summary to “.elementor-widget-container”.
Hope that helps someone. I generally like Elementor, but they have some really disappointing limits when it comes to editing Woocommerce layouts.
Awesome!
Thank you as ever, this was very useful, had to change the classes to .summary-container instead of .summary to target the class correctly.
Great!
I see, there’s a problem when there’s only one variation option in dropdown available the price is disappear. Can you check it? 🙂
Just tested, if I only have 1 variation it still displays the price
Ok, so probably theres something wrong with the newest Shoptimizer version 🙂
I made some change with code for someone 😉
/** * @snippet Replace Variable Price With Variation Price | WooCommerce * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @testedwith WooCommerce 6 * @donate $9 https://businessbloomer.com/bloomer-armada/ */ add_action( 'woocommerce_variable_add_to_cart', 'bbloomer_update_price_with_variation_price' ); function bbloomer_update_price_with_variation_price() { global $product; $price = $product->get_price_html(); wc_enqueue_js( " $(document).on('found_variation', 'form.cart', function( event, variation ) { var priceElement = $('.woocommerce-variation-price .woocommerce-Price-amount'); var priceText = priceElement.text(); var price = parseFloat(priceText.replace(/[^0-9\.]/g, '')); if (!isNaN(price)) { if(variation.price_html) { $('.summary > p.price, .commercekit-pdp-before-form_wrapper .price').html(variation.price_html); } $('.woocommerce-variation-price').hide(); } }); $(document).on('hide_variation', 'form.cart', function( event, variation ) { $('.summary > p.price, .commercekit-pdp-before-form_wrapper .price').html('" . $price . "'); }); " ); }Nice, thank you!
Is not working
Hello Diego, thanks so much for your comment! I just retested this on the latest version of WooCommerce and it still works. Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R
Thank you for your great snippets.
Unfortunately, it is not working for me.
Hi Omar, works for me! Can I have more context? If you disable all plugins but WooCommerce and switch to a default theme, does the code work?
Thank you!
It still works (WordPress 6.0.3 & Woocommerce 7.0.0)
Great!
Hello.
What if let’s say a product has a ‘color’ variation and all variations are the same price? Can you make it say: “Only […]” instead of: “From […]”. Now, if a product has variations with the same price it shows: “From:”, but that is the real price and is not “From”.
Hi Vlad, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi,
First off, thank you for your snippet!
The snippet stopped working. Could you please update it to the new version of Elementor?
Thnak you,
Shai
This works for default WooCommerce. Not sure if Elementor changes anything, and therefore the code may need to be adjusted.
Thank you for the snippet. Is there a way to make it compatible with WooCommerce Subscriptions?
Leandro, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hello,
First off, thank you for your snippet.
Your code seems to remove the bottom price correctly, but the pricerange in the top stays the same after selecting a variation.
Hope you can help me out with this.
Thanks in advance!
Best regards,
Damir
Hi Damir! Did you read this:
When using this code, if a product has two variations, lets say blue and red, and both prices are the same lets say £90. The price hides. there seems to be an issue when the variations have the same price
You’re right, try this new version please and let me know