how to hide div on variable product pages (woocommerce)

Question

I've been searching for this for like 5 or 6 days now and nothing seems to be working...

I am trying to use the code below to hide the div "" only on woocommerce variable products... but I can't seem to get it to work.

add_action( 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
    global $product;

    if( $product->has_child() ) {
        ?>
        <style>
            .summary-price-box {
                display: none;
            }
        </style>
        <?php
    }
}

I have also tried using this line in the above code and still nothing...

if( $product->is_type('variable') ) {

Answer 1

So I actually solved this earlier today.

You can either achieve this using CSS like this:

.product-type-variable .summary-price-box {
    display: none !important;
}

or you can achieve this using Javascript like this:

add_filter('woocommerce_get_price_html', 'lw_hide_variation_price', 10, 2);
function lw_hide_variation_price( $v_price, $v_product ) {
$v_product_types = array( 'variable');
if ( in_array ( $v_product->product_type, $v_product_types ) && !(is_shop()) ) {
return '';
}
// return regular price
return $v_price;
}

the css with hide the full "summary-price-box" and the javascript will hide only the "price range" or "From: $X.XX"