Always display variable price on product page.

Yes, you can use this in your custom css to overwrite the element style:

.woocommerce-variation.single_variation {
  display:block !important
}

But as well as the price you will get the variation description of the last variation selected, that is of course if you have set variation descriptions. You will also get the stock quantity, if you have enabled show stock. These are all part of the same div.

@lorro, yes that is the first thing I tried since that works in the visual inspector but NOT when added to the stylesheet. I guess that is because its an inline style which is added with another method and not from a stylesheet?

!important will override an inline style. I deleted my snippet from the visual inspector and put it in my custom css using this plugin:
https://www.ads-software.com/plugins/simple-custom-css/
and it worked OK, showing the div and taking precedence over the inline display:none.

If you would like to add in the snippet and post the url to a relevant page I could have a look.

Ok you are right, I can add the css and it applies, I prob didn’t need to be this specific but works:
div.single_variation_wrap > div.woocommerce-variation.single_variation {display:block !important;}

However, what happens is that the price does not display or is not generated on page load, it just shows a blank div UNTIL the first option is chosen at the top as you can see here:
https://myescondidoflorist.com/product/jubilee/

So do know a trick to get the price to display?
Maybe I could have my first option “selected” in the drop down instead of displaying “choose an option” and maybe that would work?
I(client actually) wanted the text “Choose an option” to display in the dropdown so they know there is a choice but maybe I could use a hook and display that text above the selection box?

Or talk the client into sticking with the default layout ?? She wanted the price to only display once.

Thanks for your help !!!

If the dropdown shows “Choose an option” on load, there is no hidden price that could be revealed. You could set a default variation to force a start price to show, but perhaps no-default would be more appropriate for that product.

Why not hide the second price altogether with “display:block !important”. This will take precedence even when the inline style becomes display:block.

The top price is usually a range, presumably you have used a code snippet to show only the lower price.

Sticking to the default layout is usually easier for long term site maintenance!

Yeah I added a function to the top price that shows the range so only the lowest is showing.

I need the bottom price to display as there are other addons available for the products that will increase the price.

I will just tell them the best thing is to stay with the default. They didn’t want the price range at the top, thought that would confuse people but and think I will put “From” preceding the price as I see many others do and that would be best.

Thanks for having a look!