I’m trying to show or hide a div based on variation price of selected items.
For example, we have a product whose base (cheapest) option price is £359.
The same product also has a £455 option.
We also have a finance plugin whose minimum spend cap is £400, and the finance calculator (user front end) exists within a spoiler below our add to cart button called ‘.finance’.
I’d like to be able to hide this spoiler (namely it’s containing div ‘.finance’) dynamically, in response to the selected variation price, so that finance options are not visible to customers when the spend is below the aforementioned finance cap.
I’ve tried the following to no avail – as you can see, I’m not too handy with js:
jQuery( function( $ ) {
$( ".in_stock" ).on( "woocommerce_variation_select_change", function() {
setTimeout( function() {
if ( $( 'span.amount' >= '400' ).length ) {
$( 'div.finance' ).show( 'fast' );
} else {
$( 'div.finance' ).hide( 'fast' );
}
}, 50 );
});
});
How can I achieve that?
2
Answers
I’d probably lose the
setTimeout
because 50 milliseconds isn’t go to make a lot of difference.Assuming that
span.amount
is one element you want to grab its text content, coerce it to a number, and then check if it’s within range.Make use of the snippet below on change of the amount;