WooCommerce: Replace Variable Price With Active Variation Price

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!

Here’s the default display when a variable product has a price range: on top there is the “static” price for all variations;

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
* @community     https://businessbloomer.com/club/
*/

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:

Once the snippet above is active, there is only 1 price! If a variation is active, the variation price will show at the top – if no variation is found or after clicking the “clear” button, the price will go back to the one of the parent variable product

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!

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Hide Prices on the Shop & Category Pages
    Interesting WooCommerce customization here. A client of mine asked me to hide/remove prices from the shop page and category pages as she wanted to drive more customers to the single product pages (i.e. increasing the click-through rate). As usual, a simple PHP snippet does the trick. I never recommend to use CSS to “hide” prices, […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

27 thoughts on “WooCommerce: Replace Variable Price With Active Variation Price

  1. you a genious, been struggling with it for a the whole day. Woocommerce should really look into it. We are not in the stone age to not have a possibility to update the variation price.

  2. 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.

  3. Thank you as ever, this was very useful, had to change the classes to .summary-container instead of .summary to target the class correctly.

  4. I see, there’s a problem when there’s only one variation option in dropdown available the price is disappear. Can you check it? 🙂

    1. Just tested, if I only have 1 variation it still displays the price

      1. Ok, so probably theres something wrong with the newest Shoptimizer version 🙂

        1. 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
          * @community     https://businessbloomer.com/club/
          */
           
          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 . "');
          	  });
          	" );
          }
          
  5. Is not working

    1. 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

  6. Thank you for your great snippets.
    Unfortunately, it is not working for me.

    1. 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?

  7. Thank you!
    It still works (WordPress 6.0.3 & Woocommerce 7.0.0)

  8. 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”.

    1. 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!

  9. 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

    1. This works for default WooCommerce. Not sure if Elementor changes anything, and therefore the code may need to be adjusted.

  10. Thank you for the snippet. Is there a way to make it compatible with WooCommerce Subscriptions?

    1. 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!

  11. 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

    1. Hi Damir! Did you read this:

      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.

  12. 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

    1. You’re right, try this new version please and let me know

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *