Skip to content
Advertisement

Show/hide custom field based on a select field with validation in WooCommerce checkout

I have added a custom select field and a custom text field on the checkout page in WooCommerce using the code below.

I want to hide this text field by default and it should only be visible when the “Referral Program” option is selected from the select field

Here is my code, which works. Except that the textfield is always visible, whatever choice is made.

JavaScript

Can you please guide me on how to achieve the text field is only visible, depending on the choice in the select field using WordPress hooks and functions?

Advertisement

Answer

  • If nothing is selected in the select field, an error message will appear, when submitting the form.
  • If “Referral Program” is selected, the textfield will become visible. If another option is selected, the textfield will be hidden.
  • Since the “referralname” textfield is optional, no validation is provided.

So you get:

JavaScript
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement