
A demo of how to conditionally display an Elementor section using the section ID and class.
Last year I wrote code to remove the markup up an element hidden via Elementor’s Responsive Visibility settings. This time I wanted to remove the markup based on different criteria – the day of the week in the demo below.
Different filter
My client wanted to provide free resources to customers based on products they had purchased. She considered creating a page for each resource and emailing the appropriate link to each customer. This would be tedious and open to abuse (e.g. customers sharing links).
I decided to create a single page with multiple Elementor Sections. Each Section would be a group with links to the resources and I would use the Section CSS Classes and CSS ID to identify each one. In last year’s code I used the elementor/widget/render_content filter but that filter is not executed for a Section. Instead a Section has a filter elementor/frontend/{$element_type}/should_render
where $element_type is ‘section’.
Day of the week
For my client we will use custom user meta (implemented with CMB2) to determine which sections to display. For this demo I use the current day of the week.
After creating a section I added ‘day_of_week
‘ to the CSS Classes list in the Advanced tab. The code will only examine sections with this class. Then it compares the CSS ID (‘Monday
‘ in the screenshot) with the current day, returning false
if it does not match (thus hiding the sections for the other days).

Frontend
Here’s a screenshot of the frontend on a Sunday. Note that none of the other sections with a ‘day_of_week’ CSS class are shown.

The code
The code can be easily expanded to have multiple different conditional sections and different exclusion criteria.
Leave a Reply