Conditional Logic in WordPress Meta Boxes

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.

Conditional meta box in WordPress
Example of conditional meta box where one field visibility depends on the value of another field.

Following my meta box tutorial it is not difficult to create one, let’s begin with inserting the following code in either your current theme functions.php or a custom plugin.

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
 
	echo '<table class="form-table"><tbody>
		<tr>
			<th>Product type</th>
			<td>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'virtual', false) . ' value="virtual"> Virtual</label></p>
				<p><label><input type="radio" name="product_type"' . checked( $product_type, 'physical', false) . ' value="physical"> Physical</label></p>
			</td>
		</tr>
		<tr' . ( '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="1" class="small-text">
			</td>
		</tr>
	</tbody></table>';
 
}
 
 
 
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
 
 
	if( isset( $_POST[ 'product_type' ] ) ) {
		update_post_meta( $post_id, 'product_type', sanitize_text_field( $_POST[ 'product_type' ] ) );
	} else {
		delete_post_meta( $post_id, 'product_type' );
	}
	if( isset( $_POST[ 'items_in_stock' ] ) ) {
		update_post_meta( $post_id, 'items_in_stock', intval( $_POST[ 'items_in_stock' ] ) );
	} else {
		delete_post_meta( $post_id, 'items_in_stock' );
	}
 
	return $post_id;
 
}

Actually it is not all. 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() {
		var val = $(this).val();
		if( 'physical' == 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 a meta box plugin which allows to replace the above code with the code you can see below.

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;
 
}

You can read more about conditional logic in my plugin documentation.

Misha Rudrastyh

Misha Rudrastyh

I love WordPress, WooCommerce and Gutenberg so much. 11 yrs of experience.

Need some custom developer help? Get in touch