Meta Boxes Conditional Logic
In this tutorial I will explain you how to show or hide a field depending on a value of another field within a simple WordPress metabox.
Like this:

For more details you can also check my tutorial about WordPress meta boxes.
In order to create a meta box with conditional logic for its fields, we just have to implement two steps. First step is to paste the following code into your current theme functions.php
file or to a custom plugin.
<?php
add_action( 'add_meta_boxes', 'misha_add_product_metabox' );
function misha_add_product_metabox() {
add_meta_box( 'misha_product_metabox', 'Meta Box', 'misha_callback', 'product', 'normal', 'default' );
}
function misha_callback( $post ) {
$product_type = get_post_meta( $post->ID, 'product_type', true );
$items_in_stock = get_post_meta( $post->ID, 'items_in_stock', true );
// you can add a nonce field here as well
?>
<table class="form-table">
<tbody>
<tr>
<th>Product type</th>
<td>
<p>
<label>
<input type="radio" name="product_type"<?php checked( $product_type, 'virtual' ) ?> value="virtual"> Virtual
</label>
</p>
<p>
<label>
<input type="radio" name="product_type"<?php checked( $product_type, 'physical' ) ?> value="physical"> Physical
</label>
</p>
</td>
</tr>
<tr<?php echo 'physical' !== $product_type ? ' style="display:none"' : '' ?>>
<th><label for="items_in_stock">Items in stock</label></th>
<td>
<input type="number" id="items_in_stock" name="items_in_stock" value="<?php echo absint( $items_in_stock ) ?>" class="small-text">
</td>
</tr>
</tbody>
</table>
<?php
}
add_action( 'save_post', 'misha_save_product_meta', 10, 2 );
function misha_save_product_meta( $post_id, $post ) {
// you can add nonce, permission and post type validation here
update_post_meta( $post_id, 'product_type', sanitize_text_field( $_POST[ 'product_type' ] ) );
update_post_meta( $post_id, 'items_in_stock', absint( $_POST[ 'items_in_stock' ] ) );
}
- To keep things simple, I didn’t add any nonce check, user permission and post type validation into
misha_save_product_meta()
function, but you’d better add it. If you have no idea what I’m talking about, please read my meta boxes tutorial. - If you insert this code as is and you don’t have a custom post type
product
registered, nothing will happen, so you either have to change post type name on line4
or register a product post type.
And now the second step – we also have to add some JavaScript, so the number field will be hidden or shown depending on the value of radio buttons. Here is it:
jQuery( function( $ ) {
$( 'input[name="product_type"]' ).change( function() {
if( 'physical' == $(this).val() ) {
$( '#items_in_stock' ).parent().parent().show();
} else {
$( '#items_in_stock' ).parent().parent().hide();
}
});
} );
How to Create Conditional Fields Easily with My Plugin
It is OK, if you decide to create a meta box with conditional fields from scratch, but I personally never do that, because it consumes so much time.
I created Simple Fields plugin in order to save tons of time when creating meta boxes.
So once you installed my plugin to your website, you can easily replace the above code with this small and simple code snippet:
add_filter( 'simple_register_metaboxes', 'misha_product_metabox' );
function misha_product_metabox( $metaboxes ) {
$metaboxes[] = array(
'id' => 'my_product_metabox',
'name' => 'Meta Box',
'post_type' => array( 'product' ),
'fields' => array(
array(
'id' => 'product_type',
'label' => 'Product type',
'type' => 'radio',
'default' => 'virtual',
'options' => array(
'virtual' => 'Virtual',
'physical' => 'Physical'
),
),
array(
'id' => 'items_in_stock',
'label' => 'Items in stock',
'type' => 'number',
'default' => 1,
'show_if' => array(
'id' => 'product_type',
'value' => 'physical',
),
)
)
);
return $metaboxes;
}

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Thanks