Hide variable price when an option is selected

[wicara]

I want to hide the variable price when an option is selected is this possible? in the shop when a product is variable the variable price stays I would like it to hide when an option is selected

[friech]

Hi @wicara,

Thanks for writing in! It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding,

[wicara]

previously x theme support has covered this just was a while ago and I wanted to make sure it is current please see https://theme.co/apex/forums/topic/hiding-woocommerce-price-until-all-attributes-selected/

[thai]

Hi @wicara,

Please try adding this custom CSS under Theme Options > CSS:

.product.product-type-variable .price {
    display: none;
}

Hope it helps

[wicara]

That just hides it, i would like to hide it when any option is selected

[rad]

Hi @wicara,

In that case, what you need is Javascript instead of CSS, please add this to Theme Options > JS

jQuery( '.variations select').on('change', function() {

jQuery('.woocommerce div.product .summary .price').hide();

} );

Hope this helps.

[wicara]

sorry tried this one and it did not work, am I missing something ?

[rad]

Hi @wicara,

The thread you have referenced was about hiding the price until variation is selected. Right now, you wish to hide it upon variation is selected, and the code is correct and working on my end. Perhaps you can provide the site’s URL where this code is implemented? I like to directly check it too.

Thanks!

[wicara]

Amarock Sub Zero Seamless Thermal Glove > Rodburn | Safety, Cleaning,...

added it to the global js

[rad]

Hi @wicara,

I see it’s a custom one. The code will only work on the default product page. Plus, the price on your custom product page has no unique selector or class name, thus, even if I provide you an appropriate code, it will just hide all prices.

But for the meantime, please add this javascript replacing the above one.

jQuery('table.variations select').on('change', function() {

jQuery('.price_to_be_hidden .price').hide();


} );

Then make sure in your custom product page, that you wrap the price element with price_to_be_hidden element, example,

<div class="price_to_be_hidden">
<p class="price" ><span class="woocommerce-Price-currencySymbol amount mcmp-variable-price-prefix">From: </span><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>8.20</span></p>
</div>

And that’s something I’m not sure how you’ll edit since it’s a custom one. Please note that we don’t cover any custom development in the forum. What I provided is just an idea, I recommend contacting the developer or person that customized your page.

Thanks!