Remove the markup for an element that is set to hidden on desktop, table and mobile.
Update 6 January 2023: I got an email to say that the code was no longer removing the markup. When I investigated I found that the $settings[ 'hide_mobile' ] value changed from ‘hidden-phone‘ to ‘hidden-mobile‘. I could not determine which version of Elementor made this change. I have fixed this in version 0.2 of the plugin.
If you want to hide an Elementor widget but do not want to remove it from the page you can use the Responsive Visibility settings. I also wanted to remove the markup from the page.
Responsive Visibility Settings
Setting the element to hidden on desktop, tablet and mobile means it will not show anywhere but the markup is still present – and Elementor can add a lot of markup for each of its widget. Even better would be to remove the markup from the front end when an element is hidden for all configurations. I went ahead and did that.
What filter?
The first step was to find a filter that I could use. I found the Elementor Code Reference and then the PHP hooks with the elementor/widget/render_content filter.
I experimented with that filter, writing various data to the debug.log file (I left the error_log calls in the code to show my experiments). By seeing the data returned by the Elementor get_settings() function I found the visibility settings and values for the widget. The code checks whether all three are set to hide the element and returns nothing or just returns the incoming markup.
Leave a Reply