Woocommerce Variation

Question

I have woocommerce setup with products and variations on these products. When I change the variation (for example, the size of the product (340g or 900g), I want it to dynamically on the page update the price so the person can see what the price difference is between the two sizes. At the moment, I can't even get the variation ID of the variation. This does not seem to be working at all.

If I test and modify the variations, this is all I get from the Javascript console:

Here is my code:

// 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(){
       console.log("blur");
       if( '' != $('input.variation_id').val() ){
         console.log($('input.variation_id'));
         console.log($('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;
}

Here is the site: https://bricksandmortar.ca/product/no-eye-contact/#

Any ideas?

Answer 1

You can hook into the show_variation trigger with some jQuery to get all of the information about the selected variation. Here's an example that will write the price formatted in HTML to the console.

(function( $ ) {
    'use strict';
    $(function() {

        var $variation_form = $( '.variations_form' );

        $variation_form.on( "show_variation", function ( event, variation ) {
            // Fired when the user selects all the required attributes
            console.log(variation.price_html);
        } );

    });

})( jQuery );