Details
Overview
This snippet hides an Elementor Loop widget by checking for .e-loop-item and removing the widget when it has no items to show.
This prevents empty loop sections from occupying space on the page.
Setup
Add External Scripts
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Add HTML
Place the code in an HTML widget or add it through Elementor → Custom Code (before the closing </body> tag) either globally or only on selected pages.
Add custom CSS
Paste the code through the page or site settings, or add it via Elementor → Custom Code (before </body>) for broader use.
body:not(.elementor-editor-active)
[ou-hide-if-empty-loop]:not(:has(.e-loop-item)) {
display: none !important;
}Add custom Javascript
Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
Add custom PHP
Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.
Add Attribute
Add the attribute ou-hide-if-empty-loop to the Loop Grid widget, or to a parent wrapper that contains the Loop Grid.
If the loop renders zero items, the element with the attribute hides on the live site. The rule excludes the Elementor editor, so you still see the section while designing.
- Attribute on the Loop widget hides only the loop.
- Attribute on a parent wrapper hides the full wrapper section.
Publish and preview live
Some solutions only work on the live site. Always publish and test after each change, as results may not appear in the editor.