Elementor Pro CSS Hide Conditions

With Elementor Pro and GeoDirectory, you can use CSS Hide Conditions to hide information if the GD custom field is not set or is set to a specific value.  Individual elements can be hidden, or whole sections can be hidden.

CSS Hide Conditions

CSS Hide Conditions are available on most elements that support dynamic content.  Find them by selecting and element > Advanced > Layout > CSS Classes.  Click the dynamic button and scroll to the bottom of the list and look for "GD CSS Hide Conditions

Click the wrench icon and then select the GD custom field to use.

You have many options when it comes to the actual condition, which gives you all the possibilities for creating the ideal hide condition.

Notes on Elementor Icon List Element:

If you are using the Elementor "Social Icons" element, this will automatically hide the icon if the value is empty, however, if you are using the "Icon List" element, this would still show the icon and then an empty value:

For the Icon List element, the solution to this is to only add one item to the list and then duplicate the whole list to add a new item, this way you can use the CSS Hide Conditions to hide the element: