How to Hide Out-of-Stock Variations in WooCommerce Shop Page and Product Page?

Ever noticed how frustrating it is for customers to click through a product variation—like size or color—only to find “Out of stock” variations? This happens because WooCommerce, by default, still displays all variations of a variable product, even the ones that are out of stock. The native product filters don’t help either; they only work at the parent product level, not the variation level. And on the single product page, out-of-stock options still appear (just with the Add to Cart button disabled).

Our custom solution changes that. It displays only the in-stock variations directly beneath the parent product on the shop page. Any out-of-stock options are completely hidden both on the shop page and the product page, making the buying process smoother and helping you avoid abandoned carts.

Preliminary Steps

Before applying the snippet, make sure you have a product with multiple variations. For example, a T-shirt with the following options:

• Blue– Small → In Stock
  
• Blue– Medium → In Stock
  
• Blue – Large → Out of Stock
  

This will help us test whether only in-stock variations show up on the shop page.

Solution: Hide Out-of-Stock Variations in WooCommerce

This code displays a styled table beneath each variable product on the shop page, listing only its in-stock variations with names and prices, and ensures out-of-stock variations remain hidden on both the shop and single product pages.

/**
 * Show in-stock variations under each variable product on shop page
 * with a cleaner styled layout
 */
add_action( 'woocommerce_after_shop_loop_item', 'ts_styled_instock_variations_below_parent', 12 );
function ts_styled_instock_variations_below_parent() {
    global $product;

    // Only apply to variable products
    if ( ! $product || ! $product->is_type( 'variable' ) ) {
        return;
    }

    $variations = $product->get_available_variations();

    if ( empty( $variations ) ) {
        return;
    }

    echo '<div class="instock-variations-list" style="margin:12px 0;">';
    echo '<h4 style="font-size:14px; margin-bottom:6px;">Available Options</h4>';
    echo '<table class="shop-variations-table" style="width:100%; border-collapse:collapse; font-size:13px;">';

    foreach ( $variations as $variation ) {
        // Skip out-of-stock
        if ( empty( $variation['is_in_stock'] ) ) {
            continue;
        }

        $variation_obj  = wc_get_product( $variation['variation_id'] );
        $variation_name = wc_get_formatted_variation( $variation_obj->get_variation_attributes(), true, false, true );
        $price_html     = $variation_obj->get_price_html();

        echo '<tr style="border-bottom:1px solid #eee;">';
        echo '<td style="padding:4px 6px; color:#333;">' . esc_html( $variation_name ) . '</td>';
        echo '<td style="padding:4px 6px; text-align:right;">' . $price_html . '</td>';
        echo '</tr>';
    }

    echo '</table>';
    echo '</div>';
}

/**
 * Hide out-of-stock variations on single product pages
 */
add_filter( 'woocommerce_variation_is_visible', 'ts_hide_out_of_stock_variations', 10, 4 );
function ts_hide_out_of_stock_variations( $visible, $variation_id, $parent_id, $variation ) {
    if ( ! $variation->is_in_stock() ) {
        return false;
    }
    return $visible;
}

Output

When a customer visits the shop page and views a variable product, they will see a clean list of all variation combinations that are currently in stock, along with their prices. Any variations that are out of stock will not be shown in this list.

When customers click on select options, they will be redirected to the single product page. On the product page, the out-of-stock variations remain hidden from the dropdown selectors as well.

Hiding out-of-stock variations not only improves the shopping experience but also prevents customer frustration by hiding unavailable choices completely.

If you also want to enhance user experience further by adding affiliate links to each variation, check out our next guide: Add External Links for Each Variations and Open it in New Tab for WooCommerce Variable Products