WooCommerce缺货商品变量置灰问题求助

I’ve run into this exact issue with variation swatch plugins before—your current code correctly disables the underlying variation option, but the swatch UI elements don’t get the visual feedback because the plugin doesn’t automatically sync the disabled state from the <option> to the swatch markup. Let’s fix this with a two-part solution: adding a custom class to out-of-stock swatches, then styling that class.

Step 1: Update Your Functions.php Code #

Replace your existing filter with this modified version that adds a custom class to out-of-stock swatch items. This works with most popular swatch plugins (like WooCommerce Variation Swatches for Attributes):

// Disable out-of-stock variations and add custom class to their swatches
add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );
function grey_out_variations_when_out_of_stock( $active, $variation ) {
    if ( ! $variation->is_in_stock() ) {
        $active = false;
        
        // Add a filter to inject our custom class into the swatch item
        add_filter( 'woocommerce_variation_swatches_item_classes', function( $classes, $term, $attribute, $product ) use ( $variation ) {
            // Match the swatch term to the variation's attribute value
            $variation_attrs = $variation->get_attributes();
            if ( isset( $variation_attrs[ $attribute ] ) && $variation_attrs[ $attribute ] === $term->slug ) {
                $classes[] = 'out-of-stock-swatch';
            }
            return $classes;
        }, 10, 4 );
    }
    return $active;
}

If your swatch plugin doesn’t support the woocommerce_variation_swatches_item_classes hook, use this JS-based fallback instead (add it to your child theme’s functions.php):

// Add JavaScript to detect disabled options and mark swatches
add_action( 'woocommerce_after_variation_form', 'add_out_of_stock_swatch_js' );
function add_out_of_stock_swatch_js() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            // Loop through disabled variation options
            $('select.variations option:disabled').each(function() {
                const optionValue = $(this).val();
                const attributeName = $(this).parent().attr('name').replace('attribute_', '');
                
                // Target the matching swatch item (adjust selector to match your plugin's markup)
                $(`.swatch[data-attribute_name="${attributeName}"] .swatch-item[data-value="${optionValue}"]`).addClass('out-of-stock-swatch');
            });
        });
    </script>
    <?php
}

Step 2: Add CSS for Visual Styling #

Now add this CSS to your child theme’s style.css or via the Customizer’s Additional CSS panel to grey out the swatches and adjust text color:

/* Style out-of-stock swatches */
.out-of-stock-swatch {
    opacity: 0.5;
    pointer-events: none; /* Reinforce non-clickable state */
    color: #999 !important; /* Grey out text */
}

/* Optional: Add a faded overlay for color swatches */
.out-of-stock-swatch::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: inherit; /* Match swatch shape */
}

Why Your Original Code Didn’t Work #

Your initial filter correctly sets the variation to inactive, which adds the disabled attribute to the hidden <option> element. However, swatch plugins render their own UI elements (like <li> or <button>) that aren’t linked to the <option>’s state by default. By adding the out-of-stock-swatch class directly to these UI elements, we give CSS a target to style.

Troubleshooting Tips #

• If the JS selector doesn’t work, inspect your swatch HTML to find the correct attribute names and classes. For example, some plugins use .variation-swatch-item instead of .swatch-item.
• Clear your site cache after making changes—WooCommerce and swatch plugins often cache variation data.

内容的提问来源于stack exchange，提问作者בר גבאי