Display Woocommerce variation price with css?

I hope its ok to ask about woocommerce but by default they don’t show the price if there are option variations until you choose an option. My first option is basically a “No Options” that has to be selected and then the base price appears. However, I want the base price to appear by default if possible. There is inline css that that shows “display:none” on the div with the price until you choose an option and then it changes to “display:block”.

<div class="woocommerce-variation single_variation" style="display: block;">

Sometimes you guys have some cool tricks or functions, is there anyway I could permanently update or override the inline css that hides that price field?


  • Milan
    • WordPress Wizard

    Hello George

    Hope you are doing well today and thanks for asking us. :slight_smile:

    I think this stack exchange thread can help you here ?


    Also if you could include link to your products, I could check for layout your active theme is rendering and try to find some trick with CSS if possible. :slight_smile:

    Look forward to hearing back. :slight_smile:

    Best Regards,


  • George
    • The Bug Hunter

    Thanks Milan, I did see that post and I think I used part of it.

    Since its a variable price woo shows the price range up top: $20 – $50 and then another price appears at the bottom as soon as you choose an option.

    So we used one of those functions so instead of displaying the price range up top it just shows the lowest price. However, I suppose some people may not notice the second price since it appears way down below the options?

    So I need to add “From:” to the top price that shows (had that client didn’t like) or ideally just have the lowest variable price down below show on initial page load so there is always ONLY one price.

    If this works I will prob just remove the price up top and move the variable price that updates to the top of the page.

    Here is an example where the price does not show until you choose the first “Size” option up top, then the css changes to “display:block”


    So please have a look & let me know if you have a css trick that will work :slight_smile: I also granted access should you need it.

    Thanks so much for your help ! Woocommerce support has been taking 3 – 5 days to answer tickets…

  • Cheryl
    • Design Lord, Child of Thor

    Hello George, sorry to barge into your thread, but I wanted to do exactly the same thing the other day and I found this little piece of code:

    function wc_ninja_custom_variable_price( $price, $product ) {
    // 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 ) {
    $price = '' . $saleprice . ' ' . $price . '';

    return $price;

    Just add it to functions.php in your child theme. Hopefully that might help you.

  • George
    • The Bug Hunter

    Thanks Cheryl, appreciate all the help I can get :slight_smile:

    This code you posted takes the variable price range which displays at the top and then displays From: “lowest price” instead of showing the price range.

    I have that as well but I want to remove that altogether. What my client is thinking is that they do not want the price at the top, and then also another price (with options) displayed at the bottom under the options. They do not want the price displayed twice to avoid consfusion.

    So what I am trying to do is make the variable price that displays below the options to ALWAYS display by default. As it is now they have to select an option before that price shows but I want to remove the “display:none” css & replace permanently with “display:block” so it always shows and then I will remove the price range completely at the top. This way only one price is displayed.

    The code you posted is very helpful and the first thing I tried and what my client should be using but they just want the price displayed once on the page :slight_smile:


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.