cancel
Showing results for 
Search instead for 
Did you mean: 

Hide Configurable Product Price until Option is Selected

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Hide Configurable Product Price until Option is Selected

Is there a better way to hide the price of the configurable product on the product page but reveal the price once a selection is made?

 

jQuery( ".product-options .price" ).hide();
jQuery( ".super-attribute-select" ).change(function () {
if (jQuery( ".super-attribute-select" ).val() !== "Choose an Option..." ) {
jQuery( ".product-options .price" ).show();
}
else if (jQuery( ".super-attribute-select" ).val() == "Choose an Option..." ) {
jQuery( ".product-options .price" ).show();
}
});

 

Second, is there a way to hide the price again in case the "Choose an Option" selection is made once again? My else if statement doesnt seem to work correctly, as the $0.00 price remains visible if you reselect "Choose an Option".

eCommerce Development, Marketing Strategy & Creative Design (Magento Certified x2)
LinkedIn | Website | GitHub | Magento Certifications
4 REPLIES 4

Re: Hide Configurable Product Price until Option is Selected

@joshua34

 

Try with the Element Id or you need to make changes into the js file to fulfil your requirements.

Was my answer helpful? You can accept it as a solution.
200+ Premium Magento 2 Extensions Need help? Hire Magento Developer

Re: Hide Configurable Product Price until Option is Selected

Has anyone made this work?

Re: Hide Configurable Product Price until Option is Selected

You can try it by

 

jQuery( ".wapper-view" ).show();
 jQuery( ".super-attribute-select" ).change(function () {
if (jQuery( ".super-attribute-select" ).val() == "" ) {
    jQuery( ".wapper-view" ).hide();
}else  {
    jQuery( ".wapper-view" ).show();
}
});

Re: Hide Configurable Product Price until Option is Selected

Some one make that work ?