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

Display Field Based on Radio Selection – Woocommerce

I’m working on a Woocommerce site where my client would like it so that if the "every month" radio button gets selected then .wapf-wrapper will appear.

I’ve tried multiple solutions but they are not working. This is the code I’ve I’m working with currently:

$(document).ready(function() {
  $('input[name="convert_to_sub_36"]:radio').click(function() {
    var inputValue = $(this).attr("1_month");
    var targetBox = $("." + inputValue);
    $(".wapf-input").not(targetBox).hide();
    $(targetBox).show();
  });
});
.wapf-wrapper {
  display: none;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <span>Choose a purchase plan:</span>
  <ul class="wcsatt-options-product wcsatt-options-product--">
    <li class="one-time-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
                        <span class="one-time-option-details">one time</span>
                                            </label>
    </li>
    <li class="subscription-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" value="1_month">
                        <span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
                                            </label>
    </li>
  </ul>

  <div class="wapf-wrapper">
    <div class="wapf-field-group" data-group="74">

      <div class="wapf-field-row">
        <div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">

          <div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
          <div class="wapf-field-input">
            <div class="wapf-radios">
              <label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
              <label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
            </div>
          </div>



        </div>
      </div>
    </div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>

</html>

You can see the product here.

Tags:

2

Answers


  1. 0

    You can use toggle and pass it a boolean (true/false) to show/hide.

    Single line: $(".wapf-wrapper").toggle(($(this).val() == "1_month"));

    I also changed the click event to change since that is the appropriate event for radio/checkboxes

    $(document).ready(function() {
  $(document).on("change",'input[name="convert_to_sub_36"]',function() {
    $(".wapf-wrapper").toggle(($(this).val() == "1_month"));
    /*
    var inputValue = $(this).attr("1_month");
    var targetBox = $("." + inputValue);
    $(".wapf-input").not(targetBox).hide();
    $(targetBox).show();*/
  });
});
    .wapf-wrapper {
  display: none;
}
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <span>Choose a purchase plan:</span>
  <ul class="wcsatt-options-product wcsatt-options-product--">
    <li class="one-time-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
                        <span class="one-time-option-details">one time</span>
                                            </label>
    </li>
    <li class="subscription-option">
      <label>
                        <input type="radio" name="convert_to_sub_36" value="1_month">
                        <span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
                                            </label>
    </li>
  </ul>

  <div class="wapf-wrapper">
    <div class="wapf-field-group" data-group="74">

      <div class="wapf-field-row">
        <div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">

          <div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
          <div class="wapf-field-input">
            <div class="wapf-radios">
              <label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
              <label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
            </div>
          </div>



        </div>
      </div>
    </div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    With vanilla JS (add it to the end of your JS file):

    document.addEventListener("DOMContentLoaded", () => {
  const wapf = document.querySelector(".wapf-wrapper");

  document.addEventListener("click", (e) => {
    if (e.target && e.target.name == "convert_to_sub_36") {
      wapf.style.display = e.target.value === "1_month" ? "block" : "none";
    }
  });
});

    You can see it in action here – https://codepen.io/ivanduka/pen/eYzJBJv?editors=1111

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

Back To Top
Search