优化加载：隐藏WooCommerce商城/归档页无价格产品

Hey there! I’ve dealt with this exact WooCommerce issue before—slow page loads from filtering products after they’re already loaded is no fun. Let’s break down the most efficient solutions, starting with the best backend approach, then frontend fixes for fallback scenarios.

Optimized PHP Solution (Best for Speed) #

The problem with your previous PHP code is likely that it was checking each product individually in the loop (causing "N+1" database queries, which kills load times). Instead, we’ll modify the main product query directly to exclude products with empty/missing prices at the database level—this way, those products never even get loaded onto the page.

Add this code to your child theme’s functions.php file (or a custom plugin, to avoid losing it when updating your theme):

add_action('woocommerce_product_query', 'filter_out_empty_price_products');
function filter_out_empty_price_products($query) {
    // Only target frontend product archives (shop, categories, tags)
    if (!is_admin() && $query->is_main_query() && (is_shop() || is_product_category() || is_product_tag())) {
        $existing_meta_query = $query->get('meta_query', []);
        
        // Add conditions to keep only products with a valid price
        $existing_meta_query[] = [
            'key'     => '_price',
            'value'   => '',
            'compare' => '!='
        ];
        $existing_meta_query[] = [
            'key'     => '_price',
            'compare' => 'EXISTS'
        ];
        
        $query->set('meta_query', $existing_meta_query);
    }
}

Why this works: #

• It hooks directly into WooCommerce’s product query, so we filter products before they’re fetched from the database.
• We check for products where the _price meta field exists and isn’t empty—this covers both products with no price set at all and those with an empty price value.
• No extra per-product queries = way faster page loads (should drop those 8-9 seconds down to normal levels).

CSS Solution (Quick, But With Caveats) #

If you need a temporary fix or can’t modify PHP, CSS can hide products without prices instantly. Note that this might cause a brief "flash" of hidden products before the CSS loads, and it relies on modern browser support for the :has() selector.

Add this to your theme’s custom CSS (Appearance > Customize > Additional CSS):

/* Hide products with no price element */
.products li.product:not(:has(.price)) {
    display: none !important;
}

/* Hide products where the price element is empty */
.products li.product:has(.price:empty) {
    display: none !important;
}

Caveats: #

• Older browsers (like IE) won’t support :has(), so some users might still see empty-price products.
• Products will briefly appear before the CSS applies (called "FOUC"—Flash Of Unstyled Content).

JavaScript Solution (Fallback for Compatibility) #

To fix the CSS compatibility issues and reduce FOUC, pair it with a small JS snippet that hides products once the page loads. This ensures all users see the correct products, even if their browser doesn’t support :has().

Add this to your theme’s custom JS (or via a plugin like Code Snippets):

document.addEventListener('DOMContentLoaded', function() {
    // Get all product items on the page
    const productItems = document.querySelectorAll('.products li.product');
    
    productItems.forEach(item => {
        const priceElement = item.querySelector('.price');
        // Hide the product if no price exists, or the price is empty
        if (!priceElement || priceElement.textContent.trim() === '') {
            item.style.display = 'none';
        }
    });
});

Pro tip: #

For even less FOUC, add a tiny inline style to hide products initially, then let JS show the valid ones:

.products li.product {
    visibility: hidden;
}

Then modify the JS to set visibility: visible for valid products:

// Inside the forEach loop
if (priceElement && priceElement.textContent.trim() !== '') {
    item.style.visibility = 'visible';
} else {
    item.style.display = 'none';
}

Final Recommendation #

Always go with the PHP solution first—it’s the most efficient, eliminates FOUC entirely, and reduces server load by not fetching unnecessary products. Use CSS/JS only as a fallback if you can’t modify PHP (e.g., on a managed host that restricts theme edits).

内容的提问来源于stack exchange，提问作者sevenkader