Introduction

Elementor Pro allows developers to customize how elements are displayed using Display Conditions. In this guide, we will walk through the creation of a custom condition to control the visibility of elements based on user meta data stored in JSON format. By the end of this post, you’ll have a working example, code snippets, and a GitHub repository for reference.

What Are Display Conditions?

Display Conditions in Elementor Pro let you control the visibility of elements based on specific rules, such as user roles, login status, or device types. You can also create custom conditions for more advanced use cases. For instance, showing an element only if certain user metadata matches specific criteria.

Example Use Case: Custom Display Condition Based on Post Meta

In this practical example, we will create a custom Display Condition for Elementor that checks if a specific meta key in the current post’s metadata matches a predefined value. This is particularly useful if you want to display widgets based on post-specific data like custom fields.

Use Case

Imagine you have a custom post type called Properties. Each property has a custom field property_status (e.g., “Available”, “Sold”, “Pending”). You want to show a specific widget on the property page only if the property_status is “Available”.

Implementation

Step 1: Create the Condition Class

Add the following code to your child theme’s functions.php file or a custom plugin.

File: conditions/post-meta-condition.php

<?php
use Elementor\Controls_Manager;
use ElementorPro\Modules\DisplayConditions\Classes\Comparator_Provider;
use ElementorPro\Modules\DisplayConditions\Classes\Comparators_Checker;
use ElementorPro\Modules\DisplayConditions\Conditions\Base\Condition_Base;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

class Post_Meta_Condition extends Condition_Base {
	const CONDITION_KEY = 'post_meta';

	public function get_name() {
		return 'post_meta';
	}

	public function get_label() {
		return esc_html__( 'Post Meta', 'elementor-pro' );
	}

	public function get_group() {
		return 'post';
	}

	/**
	 * Check the condition.
	 *
	 * @param array $args The condition arguments.
	 * @return bool
	 */
	public function check( $args ) : bool {
		$current_post_id = get_the_ID();

		if ( ! $current_post_id ) {
			return false; // Not on a single post.
		}

		// Get the meta value from the current post.
		$meta_key = $args['meta_key'];
		$expected_value = $args['expected_value'];
		$post_meta_value = get_post_meta( $current_post_id, $meta_key, true );

		// Compare the meta value with the expected value.
		return $post_meta_value === $expected_value;
	}

	public function get_options() {
		$this->add_control( 'meta_key', [
			'type' => Controls_Manager::TEXT,
			'label' => esc_html__( 'Meta Key', 'elementor-pro' ),
			'description' => esc_html__( 'Enter the meta key to check.', 'elementor-pro' ),
			'required' => true,
		] );

		$this->add_control( 'expected_value', [
			'type' => Controls_Manager::TEXT,
			'label' => esc_html__( 'Expected Value', 'elementor-pro' ),
			'description' => esc_html__( 'Enter the value to match.', 'elementor-pro' ),
			'required' => true,
		] );
	}
}

Step 2: Register the Condition

Register the condition with Elementor using the following code:

Add this to functions.php or a custom plugin:

add_action( 'elementor/display_conditions/register', function( $conditions_manager ) {
	include get_stylesheet_directory() . '/conditions/post-meta-condition.php';
	$conditions_manager->register_condition_instance( new Post_Meta_Condition() );
} );

Step 3: Test the Condition

Here are test scenario

1. Create or edit a post of the custom post type Properties.
2. Add a custom field property_status with the value Available.
3. Edit a page in Elementor.
4. Add any widget, go to Advanced > Display Conditions.
5. Select Post Meta as the condition:
   • Meta Key: property_status
   • Expected Value: Available
6. Save the page and test.

Example Code Snippet for Adding Meta Data

To add post meta data for testing, you can use the following:

Code Example: Add Meta Data to a Post

add_action( 'save_post', function( $post_id ) {
	if ( get_post_type( $post_id ) === 'properties' ) {
		update_post_meta( $post_id, 'property_status', 'Available' );
	}
} );

GitHub Repository

You can find the complete code for this example on GitHub here.

Conclusion

This custom Display Condition allows you to dynamically show or hide Elementor widgets based on post meta data. It’s ideal for use cases like e-commerce product badges, real estate listings, or any custom post type-driven content.

If you need more help with extending this functionality, let me know!