After selecting a product variant, only the price of the variant is visible

Hi @gabrielazaucha

Have you tried using the 2 snippets in this post?

https://learnwoo.com/hide-price-range-woocommerce-variable-products/

I used them on my site and with my testing they worked to hide the price until the Variation was selected.

Here’s what it looks like with the snippets and then without

Link to image: https://cld.wthms.co/WBv7jU

it’s not about total concealment. the point is to make it change depending on whether the variant is chosen – as here:

https://www.dropbox.com/viariable-ok.mp4

I had done it and it worked. However, it turned out that products with more variants have a problem – as here:

https://www.dropbox.com/variable-wrong.mp4

A function that worked but now causes a conflict is:

// Utility function to get the default variation (if it exist)
function get_default_variation( $product ){
    $attributes_count = count($product->get_variation_attributes());
    $default_attributes = $product->get_default_attributes();
    // If no default variation exist we exit
    if( $attributes_count != count($default_attributes) )
        return false;

    // Loop through available variations
    foreach( $product->get_available_variations() as $variation ){
        $found = true;
        // Loop through variation attributes
        foreach( $variation['attributes'] as $key => $value ){
            $taxonomy = str_replace( 'attribute_', '', $key );
            // Searching for a matching variation as default
            if( isset($default_attributes[$taxonomy]) && $default_attributes[$taxonomy] != $value ){
                $found = false;
                break;
            }
        }
        // If we get the default variation
        if( $found ) {
            $default_variaton = $variation;
            break;
        }
        // If not we continue
        else {
            continue;
        }
    }
    return isset($default_variaton) ? $default_variaton : false;
}

add_action( 'woocommerce_before_single_product', 'move_variations_single_price', 1 );
function move_variations_single_price(){
    global $product, $post;

    if ( $product->is_type( 'variable' ) ) {
        // removing the variations price for variable products
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

        // Change location and inserting back the variations price
        add_action( 'woocommerce_before_add_to_cart_button', 'replace_variation_single_price', 29 );
    }
}

function replace_variation_single_price(){
    global $product;

    // Main Price
    $prices = array( $product->get_variation_price( 'min', true ), $product->get_variation_price( 'max', true ) );
    $active_price = $prices[0] !== $prices[1] ? sprintf( __( '<small>Ju? od:</small> %1$s', 'meganstyle24' ), 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 );
    $regular_price = $prices[0] !== $prices[1] ? sprintf( __( '<small>Ju? od:</small> %1$s', 'meganstyle24' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );

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

    // When a default variation is set for the variable product
    if( get_default_variation( $product ) ) {
        $default_variaton = get_default_variation( $product );
        if( ! empty($default_variaton['price_html']) ){
            $price_html = $default_variaton['price_html'];
        } else {
            if ( ! $product->is_on_sale() )
                $price_html = $price = wc_price($default_variaton['display_price']);
            else
                $price_html = $price;
        }
        $availiability = $default_variaton['availability_html'];
    } else {
        $price_html = $price;
        $availiability = '';
    }
    // Styles ?>
    <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>
    <?php // Jquery ?>
    <script>
    jQuery(document).ready(function($) {
        var a = 'div.wc-availability', p = 'p.price';

        $('select').blur( function(){
            if( '' != $('input.variation_id').val() ){
                if($(a).html() != '' ) $(a).html('');
                $(p).html($('div.woocommerce-variation-price > span.price').html());
                $(a).html($('div.woocommerce-variation-availability').html());
            } else {
                if($(a).html() != '' ) $(a).html('');
                $(p).html($('div.hidden-variable-price').html());
            }
        });
    });
    </script>
    <?php
    echo '<p class="price">'.$price_html.'</p>
    <div class="wc-availability">'.$availiability.'</div>
    <div class="hidden-variable-price" >'.$price.'</div>';
}

Unfortunately I can’t deal with it so I started trying in a different way.
I started writing JS functions in template product (viariable.php) – I wrote them above.
Someone will help?
My ideas are running out, and unfortunately I’m not a JS champion …

The first function I wrote hides p.price-range when #price-variation appears.
But it only works after the next click.
so not when <span> with ID #price-variation appears, but after the next action.
Just like here:

https://www.dropbox.com/first-function.mp4

	function myPrice() {
		var swatchlabele = document.querySelectorAll(".wcvaswatchlabel");
	  var price = document.getElementById("price-range");
		var pricenext = document.querySelectorAll(".woocommerce-variation.single_variation");
		var pricevariation = document.getElementById("price-variation");

					if(document.body.contains(document.getElementById('price-variation'))){
				price.style.display = "none";
			    } else{
			    }
			}

it unfortunately doesn’t work properly ….

The second function I wrote works a little better but causes a problem that I can’t accept.
After clicking on the variant, the OnClick function is called, which changes the CSS “display” property.
But … And there is a problem
Product with variants that have the same price – quite disappears price …..
Example here:

https://www.dropbox.com/second-function.mp4

	function myPrice() {
		var swatchlabele = document.querySelectorAll(".wcvaswatchlabel");
	  var price = document.getElementById("price-range");
		var pricenext = document.querySelectorAll(".woocommerce-variation.single_variation");
		var pricevariation = document.getElementById("price-variation");

				if (swatchlabele.checked && pricenext.style.display === "none") {
			    price.style.display = "block";
			  } else {
			    price.style.display = "none";
					pricenext.style.display = "block";
			  }
			}

The second function is a bit clumsy …
I have no more ideas, please help

This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the following places for more development-oriented questions:

1. WooCommerce Slack Community: https://woocommerce.com/community-slack/
2. Advanced WooCommerce group on Facebook: https://www.facebook.com/groups/advanced.woocommerce/

We haven’t heard from other users in a while, so I’ll proceed to close this thread for now. I’d recommend visiting the other resources recommended by Amanda below:

If it’s important for you to solve this soon and you need any coding help, you can reach out to one of WooCommerce’s customization partners:

https://woocommerce.com/customizations

They’d be able to give you a clearer idea about the scope of the project and quote you for their services.