PHP function output only updates after click on page

So I was looking for a way to update Pricing for a variable Product (Woocommerce + WP), without showing the Price Range + Final Price (including Variables).

I stumbled upon this script, which seems to work perfectly for my use case. Source – Stackoverflow

It works fine on mobile. However, in Desktop Browser, it requires me to click on a random place of the page to update the pricing. This is very inconvenient. Any idea how to fix this?

My coding skills are limited to HTML/CSS and very basic js. Any help is appreciated.

This is the code:

   add_action( 'woocommerce_before_single_product', 'check_if_variable_first' );
function check_if_variable_first(){
   if ( is_product() ) {
       global $post;
       $product = wc_get_product( $post->ID );
       if ( $product->is_type( 'variable' ) ) {
           // removing the price of variable products
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

// Change location of
add_action( 'woocommerce_single_product_summary', 'custom_wc_template_single_price', 10 );
function custom_wc_template_single_price(){
   global $product;

// Variable product only
if($product->is_type('variable')):

   // Main Price
   $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
   $price = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   // Sale Price
   $prices = array( $product->get_variation_regular_price( 'min', true ), $product->get_variation_regular_price( 'max', true ) );
   sort( $prices );
   $saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'From: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

   if ( $price !== $saleprice && $product->is_on_sale() ) {
       $price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
   }

   ?>
   <style>
       div.woocommerce-variation-price,
       div.woocommerce-variation-availability,
       div.hidden-variable-price {
           height: 0px !important;
           overflow:hidden;
           position:relative;
           line-height: 0px !important;
           font-size: 0% !important;
       }
   </style>
   <script>
   jQuery(document).ready(function($) {
       $('select').blur( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>
   <?php

   echo '<p class="price">'.$price.'</p>
   <div class="hidden-variable-price" >'.$price.'</div>';

endif;
}

       }
   }
}

LINK to Image for Usecase explanation – See also Stackoverflow Link where I took the code from

Answer

The problem which you are facing seems to be the $('select').blur(). As you want this to change automatically, I suggest changing this to change()..

   <script>
   jQuery(document).ready(function($) {
       $('select').change( function(){
           if( '' != $('input.variation_id').val() ){
               $('p.price').html($('div.woocommerce-variation-price > span.price').html()).append('<p class="availability">'+$('div.woocommerce-variation-availability').html()+'</p>');
               console.log($('input.variation_id').val());
           } else {
               $('p.price').html($('div.hidden-variable-price').html());
               if($('p.availability'))
                   $('p.availability').remove();
               console.log('NULL');
           }
       });
   });
   </script>

The blur() event occurs when an object loses focus.. In your case, when you click off the screen.

the change() event occurs when the object changes.. In your case, whenever the select option changes

Advertisement

Answer