Introduction

Elementor Pro recently introduced a robust “Display Conditions” feature, empowering users to dynamically control the visibility of widgets based on specific criteria. However, users integrating Advanced Custom Fields (ACF) with Elementor have encountered a limitation: Elementor caps the number of custom field keys it loads into the dropdown list. That cap was 50 until Elementor Pro 3.27.1 raised it to 500, which is where it sits today. This restriction can be a significant hurdle for developers and designers who manage sites with extensive custom fields.

The Challenge

In many advanced Elementor projects, particularly those utilising a wide array of custom fields, the default limit on dynamic tags restricts full utilisation of the Display Conditions feature. Once the site has more custom field keys than the cap allows, some will not appear in the dropdown menu, leaving them inaccessible for setting display conditions.

The Solution

To bypass this limitation, you can modify the limit by adding a custom PHP function to your theme’s functions.php file or a site-specific plugin. This function adjusts the maximum number of dynamic tags Elementor should load into the dropdown.

Here’s the PHP code snippet you need:

function custom_custom_fields_meta_limit( $limit ) {
    $new_limit = 1000; // Change this to your desired limit
    return $new_limit;
}

add_filter('elementor_pro/display_conditions/dynamic_tags/custom_fields_meta_limit', 'custom_custom_fields_meta_limit');

How to implement the code

  • Locate the File: Open the functions.php file of your active theme. This file is typically found in /wp-content/themes/your-theme-name/.
  • Insert the Code: Paste the provided snippet into the functions.php file. Be mindful of placing it outside any existing function or conditional statement.
  • Customise the Limit: Change the $new_limit variable to reflect the number of dynamic tags you wish to make available in Elementor. This number should be based on your specific needs, and it needs to be higher than Elementor’s own default of 500, or you will hide fields rather than reveal them.
  • Save Changes: After editing, save the file. If you are working on a local environment, ensure to upload the updated file to your server.
  • Verify the Result: Return to your Elementor editor to check if the new limit has taken effect, ensuring that more dynamic tags are available in the dropdown.

How it works

This solution leverages the WordPress filter hook mechanism, which allows developers to intercept and modify various processes within WordPress and its plugins. By increasing the number of dynamic tags that Elementor loads, you can fully leverage the Display Conditions feature without being hindered by the default limitations.

Conclusion

This tweak is essential for developers and web designers who need to manage complex websites with many custom fields. By extending the limit of dynamic tags visible in Elementor, you enhance your ability to create more dynamic, responsive, and tailored web experiences. This adjustment ensures that your Elementor and ACF integration works seamlessly, making your web development process more efficient and effective.

Hitting this ceiling usually means a site has outgrown what its theme was built for. That is normally the point to plan the structure properly rather than keep raising limits, which is most of what our WordPress website development work involves.