• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Damien Carbery - Website Development

Getting You Online & Keeping You There

Getting You Online & Keeping You There Get Started
  • Home
  • Services
  • Maintenance Plans
  • Portfolio
  • Blog
  • About Me
  • Contact
You are here: Home / Website Development / Elementor – Remove markup of hidden element

Elementor – Remove markup of hidden element

Published: June 1, 2021

Elementor – Remove markup of hidden element
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

Screenshot of Elementor's Responsive Visibility settings used to hide an element.

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.

The code

Related Posts

Percentage Circle block for Elementor

I converted my ACF Blocks Percentage Circle block to an Elementor widget.

Comment Block for Gutenberg

A comment block that is only shown when editing content. It is not displayed on front end.

Screenshot showing ACF Field Group field keys

ACF Date Picker – set end date to after start date

With two related date picker fields limit the end date to be after the start date.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Blog Categories

  • Being Green
  • Food
  • Grammar
  • Just Strange
  • Laziness
  • Personal
  • Portfolio
  • Race Reports
  • Shudder
  • Typo
  • Website Development
  • WooCommerce Tips
  • Facebook
  • Twitter

Copyright © 2013–2023 Damien Carbery · Using Genesis Framework · Privacy Policy