Replace price range with selected variation price when product is out of stock

Hi @russellviode,

It appears that WooCommerce displays the price both when the variable product is in stock and when it is not in stock. I’ve tested this and you can check the result here:

Link to screencast: https://i.imgur.com/BpW0YYA.gif

From what you describe this could be likely caused by a conflict with your theme or with another plugin.

Read more about plugin and theme conflicts in our Self-Service Guide.

For more detailed instructions about conflict testing, check out this – How to test for plugin and theme conflicts.

Please let us know how that goes.

Thanks for the reply!

Apologies I should have been clearer – It is not triggering the exact variation price when I have “Hide out of stock items from the catalog” checked in woocommerce > settings > product > inventory

I am trying to grey out variations that are not in stock (by hiding them) but I still want it to show the exact price of each variation when you select it regardless.

If that makes sense?

Hi there,

It is not triggering the exact variation price when I have “Hide out of stock items from the catalog” checked in woocommerce > settings > product > inventory

The default behavior for WooCommerce when you have the option “Hide out of stock items from the catalog” enabled is that the specific variation (out of stock) will be hidden. So I’m not sure how you get the variation and the variation price there. Are you using a plugin to control the stock?

You can check the default behavior by deactivating all other plugins and having only the default Storefront theme and core WooCommerce plugin active.

I am trying to grey out variations that are not in stock (by hiding them) but I still want it to show the exact price of each variation when you select it regardless.

Which method are you using to grey out variations? It would be helpful if you could share some screenshots. I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on that page, then paste the URL in this chat.

Thanks.

https://thewatersportscentre.com/product/ozone-wasp-v2-foil-wing-2021/

Here’s a link to the website in question with a variable product (with 2 attributes) as an example. You can see here the variations which are in stock trigger the price to change, where as out of stock (or hidden) variations simply shows default var product price “from ￡790”.

I actually have [“Hide out of stock items from the catalog” in woocommerce > settings > product > inventory] unchecked and i am using this code snippet below to hide the out of stock variations

————————

add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );

function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {
  
  ?>
  <script type="text/javascript">
  jQuery( document ).bind( 'woocommerce_update_variation_values', function() {

    jQuery( '.variations select option' ).each( function( index, el ) {
      var sold_out = '<?php _e( 'sold out', 'woocommerce' ); ?>';
      var re = new RegExp( ' - ' + sold_out + '$' );
      el = jQuery( el );

      if ( el.is( ':disabled' ) ) {
        if ( ! el.html().match( re ) ) el.html( el.html() + ' - ' + sold_out );
      } else {
        if ( el.html().match( re ) ) el.html( el.html().replace( re,'' ) );
      }
    } );

  } );
</script>
   <?php

    if ( ! $variation->is_in_stock() )
        return false;

    return true;
}

————————

I am also using this code snippet below to replace the variable price range by the chosen variation price so that there is just 1 price at the top when selecting variations

————————

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
  global $product, $post;
  if ( $product->is_type( 'variable' ) ) {
    add_action( 'woocommerce_single_product_summary', 'replace_variation_single_price', 10 );
  }
}

function replace_variation_single_price() {
  ?>
    <style>
      .woocommerce-variation-price {
        display: none;
      }
    </style>
    <script>
      jQuery(document).ready(function($) {
        var priceselector = '.product p.price';
        var originalprice = $(priceselector).html();

        $( document ).on('show_variation', function() {
          $(priceselector).html($('.single_variation .woocommerce-variation-price').html());
        });
        $( document ).on('hide_variation', function() {
          $(priceselector).html(originalprice);
        });
      });
    </script>
  <?php
}

————————

Hopefully this helps more with the scenario and i really appreciate your help!

• This reply was modified 3 years, 4 months ago by Russell.

Hi @russellviode,

Thanks for sharing the site’s URL.

I went to test the Cart on this product and to me it looks all it’s properly working. You can see the loom video here:

You may have already solved this but if you have further questions kindly let me know.

Thanks.

Hi there,

It’s been a while since we last heard from you, so I’m marking this thread as resolved.

Hopefully, you’ve been able to resolve this, but if you haven’t, please open up a new thread and we’ll be happy to check further.

Thanks.