Conditionally show an Elementor section

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.