I would like to hide the price on the product page of WooCommerce until the customer has selected all fields of variations.
I have found a solution using CSS and Javascript, but it doesn't work for me, it shows the price as soon as one of the options is selected.
Here is the code I found:
CSS:
.woocommerce .price,
.woocommerce-page .price {
display: none;
}
JS:
(function($){
$(document).ready(function(){
$('.variations_form.cart select').change(function(){
$('.woocommerce .price').css('display', 'block');
console.log('changed');
});
});
})(jQuery);
Source: https://theme.co/apex/forums/topic/hiding-woocommerce-price-until-all-attributes-selected/
There is another solution which does not work for me too.
Maybe someone finds the error or has another solution. Because the "Add to cart" button is only activated when a suitable option is selected - why can't it be done with the price?
Thanks a lot!
Updated - There is already dedicated some jQuery delegated events attached to the form, that you can use to show / hide the variable product price when a variation is selected or not…
Below I use show()
or hide()
jQuery functions that makes things smother, but you can use the jQuery css()
function instead if you prefer...
Try the following instead:
The CSS:
.woocommerce .price,
.woocommerce-page .price {
display: none;
}
The JS (jQuery) :
jQuery(function($){
// On selected variation event
$('form.variations_form').on('show_variation', function(event, data){
$('.woocommerce .price').hide('fast');
console.log('Variation Id '+data.variation_id+' is selected | Hide price');
});
// On unselected (or not selected) variation event
$('form.variations_form').on('hide_variation', function(){
$('.woocommerce .price').show('fast');
console.log('No variation is selected | Show price');
});
});
Tested and works.
IT can be implemented in a hooked function (Will not work in some cases depending on the theme customizations) :
add_action( 'woocommerce_single_product_summary', 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
global $product;
if( $product->is_type('variable') ) {
?>
<style> .woocommerce .price, .woocommerce-page .price { display: none; } </style>
<script type="text/javascript">
jQuery(function($){
// On selected variation event
$('form.variations_form').on('show_variation', function(){
$('.woocommerce .price').hide('fast');
console.log('Variation is selected | Hide price');
});
// On unselected (or not selected) variation event
$('form.variations_form').on('hide_variation', function(){
$('.woocommerce .price').show('fast');
console.log('No variation is selected | Show price');
});
});
</script>
<?php
}
}
Code goes in functions.php file of your active child theme (or active theme). Tested and works on storefront theme.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.