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

jQuery Show Hide WC Chekout Field if Number Field Value 0 – Woocommerce

This is the HTML table I need to conditionally hide the fee row if the value is 0 which uses a number woocommerce_form_field type number.

$('.donation_amount').keyup(function() {
  if ($(this).val().length == 0) {
    $('.fee th').hide();
  } else {
    $('.fee th').show();
  }
}).keyup();
<input type="number" class="input-text " name="donation_amount" id="donation_amount" placeholder="" value="">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="shop_table woocommerce-checkout-review-order-table">
  <tbody>
    <tr class="fee">
      <th>Amount</th>
      <td>
        <span class="woocommerce-Price-amount amount">
      <bdi><span class="woocommerce-Price-currencySymbol">$</span>0.00</bdi>
        </span>
      </td>
    </tr>
  </tbody>
</table>

Update : This is what i have tried so far :

jQuery(document).ready(function($){

 val = $('input#donation_amount').val();

  if (val == "0") {

    $('.fee').hide();
    $( 'tr').removeClass('fee');
    $('.fee').css("display", "none");
//  } else {
//    $('.fee').show();
  }

   amount = $('#woocommerce-Price-amount').val();

  if (amount == "0.00") {

    $('.fee').hide();
    $( 'tr').removeClass('fee');
    $('.fee').css("display", "none");
//  } else {
//    $('.fee').show();
  }

     num = $('.woocommerce-Price-currencySymbol').val();

  if (num == "0.00") {

    $('.fee').hide();
    $( 'tr').removeClass('fee');
    $('.fee').css("display", "none");
//  } else {
//    $('.fee').show();
  }

    amount = $('#donation-amount').val();

  if (amount == "0.00") {

    $('.fee').hide();
    $( 'tr').removeClass('fee');
    $('.fee').css("display", "none");
//  } else {
//    $('.fee').show();
  }

  $('#donation_amount').on('keyup change', function() {
    if ($(this).val() == 0 ) {

      $('.fee').hide();
      $( "tr" ).removeClass( "fee" );
  }
});

});

I’ve tried using the div id for the number field #donation_amount and the value for the price currency field but neither works with any of the 3 methods i have tested.

Tags:

2

Answers


  1. 0

    You can try this jQuery code,

    jQuery( '#donation_amount' ).on( 'keyup', function () {
    if ( jQuery(this).val() == 0 ) {
        $( '.fee' ).hide();
    } else {
        $( '.fee' ).show();
    }
} );
    Login or Signup to reply.
  2. 0

    I would write a simple function that gets the value from the input and uses that value to determine whether or not to show or hide the .fee row with jQuery’s .toggle method:

    function updateFeeDisplay () {
  const value =  Number($('#donation_amount').val()) || 0;

  $('.fee').toggle(value > 0);
}

$('#donation_amount').on('change keyup', updateFeeDisplay);

updateFeeDisplay();

    Here is an example fidde.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search