WooWeekly #277: Dynamically Hide / Show Checkout Field

How you doing?

It’s yet another Thursday here in Palermo, Sicily. I’ve had a busy week (hence this newsletter 1 day delay) but thankfully it’s all well and good ๐Ÿ™‚

So, welcome back to our WooCommerce Weekly appointment – here comes a series of WooCommerce articles put together by yours truly so that you can learn something new – you’ll also find a list of previous articles in case you missed any.

New WooCommerce Tutorials

WooCommerce: Dynamically Hide / Show Checkout Field

We already saw a lot of examples e.g. hiding checkout fields if a product is virtual or hiding checkout fields if a checkbox is manually checkedโ€ฆ but this time I want to hide a field dynamically โ€“ automatically โ€“ based on whether another checkout field is empty or no value is entered in it. In this example, I will demonstrate how to hide the “billing phone” if “billing company” is empty or no information is entered. Of course, you also have to disable the mandatory attribute for the billing phone from the Customizer settings, otherwise checkout validation will fail. You can readapt this snippet to any other checkout field combo โ€“ just identify the IDs and change jQuery accordingly. Enjoy: https://businessbloomer.com/woocommerce-dynamically-hide-show-checkout-field/

Author

  • Rodolfo Melogli

    Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

    View all posts

Proudly supported by

Join them?