Info
Overview
The snippet hides the Loop widget when it has no posts to display.
It checks whether Elementor’s built-in empty-state message .e-loop-nothing-found-message is present inside the widget, and if it is, the Loop widget or its wrapper is hidden.
By default, this logic does not run inside the Elementor editor, so empty loops remain visible while you are designing.
Setup
Copy & paste the scripts before the </body> tag of your project. If you added them before for another setup, skip this step.
Right-click in Elementor, choose “Paste from another site,” and while the popup is open, press cmd/ctrl + v to insert the layout.
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.
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-loop-hide-empty]:has(.e-loop-nothing-found-message) {
display: none !important;
}Paste the script through Elementor → Custom Code (set to load after </body>) for site-wide or page-specific loading.
Place the PHP snippet inside your theme’s functions.php or using any code snippet to enable logic.
Add Attribute
Add the attribute ou-loop-hide-empty to either the Loop Grid widget itself or to any wrapper/container that contains the Loop Grid.
If Elementor outputs the “nothing found” message, the element that has the attribute gets hidden.
- Attribute on the loop widget hides only the loop.
- Attribute on a parent wrapper hides the entire wrapper.