Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Hiding a div based on variation price – Woocommerce

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?

Tags:

2

Answers


  1. 0

    1. I’d probably lose the setTimeout because 50 milliseconds isn’t go to make a lot of difference.

    2. 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.

    $('.in_stock').on('woocommerce_variation_select_change', function() {
  const value = Number($('span.amount').text());
  if (value >= 400) {
    $('div.finance').show('fast');
  } else {
    $('div.finance').hide('fast');
  }
});
    Login or Signup to reply.
  2. 0

    Make use of the snippet below on change of the amount;

    jQuery( function( $ ) {
  // Run on selected variation price change.
  let currency_symbol = '£';

  for ( let i = 0; i < $( 'p.price' ).length; i++ ) {
    // Define the subtotal block.
    let sub_total = $( 'p.price:contains(Subtotal ' + currency_symbol + ')' );
 
    // Define the condition for the finance block.
    let amount = Number( sub_total.text().split( ' ' + currency_symbol )[1] ) >= 400;

    // Show or hide the finance block based on the condition above.
    amount ? $( 'div.finance' ).show( 'fast' ) : $( 'div.finance' ).hide( 'fast' );
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search