Instructions:

• The section that you want to hide should this CSS ID: outer-related-posts
• Add an HTML widget inside that same section (anywhere below the Loop Grid is fine).
• Paste the following code inside the HTML widget:

……………………………………………………………………………………………………………..

<style>
/* Hide while checking to avoid flicker */
#outer-related-posts { visibility: hidden; }
/* Reveal only when we confirm items exist */
#outer-related-posts.show-related { visibility: visible; }
</style>

<script>
(function () {
var section = document.getElementById(‘outer-related-posts’);
if (!section) return;

function hasLoopResults(root) {
// Elementor widgets that can render loop/grid posts
var widget = root.querySelector(‘.elementor-widget-loop-grid, .elementor-widget-posts, .elementor-widget-woocommerce-products’);
if (!widget) return false;

// Common selectors for actual items
var items = widget.querySelectorAll(‘.e-loop-item, article, .elementor-post, .elementor-grid-item, .product’);
if (items && items.length > 0) return true;

// Known “no results” markers
if (widget.querySelector(‘.elementor-widget-empty, .elementor-nothing-found, .e-loop-nothing-found, .elementor-loop-no-results, .no-posts-found’)) return false;

// Empty containers Elementor uses
var container = widget.querySelector(‘.elementor-loop-container, .e-loop-items, .elementor-grid’);
if (container && container.children.length === 0) return false;

// As a final safety, treat missing items as “no results”
return false;
}

function apply() {
if (hasLoopResults(section)) {
section.classList.add(‘show-related’); // show when items exist
} else {
section.style.display = ‘none’; // hide entire section otherwise
}
}

if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, apply);
} else {
apply();
}

// Watch for AJAX render/pagination
var obs = new MutationObserver(apply);
obs.observe(section, { childList: true, subtree: true });
})();
</script>

……………………………………………………………………………………………………………..