Adding an “out-of-stock” class to variations shown as swatches - WooCommerce

Question

I'm trying to figure out of way of adding an "out-of-stock" class to WooCommerce variations shown as swatches when their stock level is at 0.

I've found multiple ways of "greying out" out of stock variations when they are displayed in the standard WooCommerce drop down list - code shown below:

add_filter( 'woocommerce_variation_is_active', 'grey_out_variations_when_out_of_stock', 10, 2 );
function grey_out_variations_when_out_of_stock( $grey_out, $variation ) {

if ( ! $variation->is_in_stock() )
    return false;
    return true;
}

However, this does not work when using a plugin to show my variations as swatches.

I currently have a size attribute, and have used a plugin to shown each size as a separate box that can be selected. Similar to what is shown in this thread: Click Here

Is there some PHP, or JS that i could use to add a new stock to out of stock variations, which will then allow me to alter the CSS. Showing them as a red box, with a cross through it for example.

During my search so far, i have come up empty handed, so any help would be appreciated.

Answer 1

Ok I wrote this code for pluginWooCommerce Variation Swatches and Photos . What is will do is add a class called out-of-stock to any variation with zero stock. You will need to ensure that the variations are setup with Manage Stock checked. When a variation has zero stock then the class is added to the variation link. You can then style the class however you want to show it is disabled.

add_filter('woocommerce_swatches_get_swatch_anchor_css_class', 'add_swatch_out_stock_class', 10, 2);

function add_swatch_out_stock_class( $anchor_classes, $swatch_term ) {
    if ( is_product() ) {
        global $post;
        $product = wc_get_product($post);

        if ( $product->get_type() === 'variable' ) {
            foreach( $product->get_available_variations() as $variation ) {
                $product_variation = new WC_Product_Variation($variation['variation_id']);

                if( $product_variation->get_stock_quantity() === 0 ) {
                    foreach( $product_variation->get_variation_attributes() as $var_attribute) {
                        if( $swatch_term->term_slug === $var_attribute) {
                            $anchor_classes .= ' out-of-stock';
                        }
                    }
                }
            }
        }
    }
    return $anchor_classes;
}

To show the size labels inside the swatch you can remove the text-index property using this filter.

add_filter('woocommerce_swatches_picker_html', 'remove_text_indent', 10, 2);

function remove_text_indent( $picker, $swatch_term) {

    return str_replace('text-indent:-9999px;', '', $picker);
}

Answer 2

If you need to hide Color Swatches (Color option only) then you can use this put before tags. NB! You have to check that classes are same for plugin swatches what you use example change .tawcvs-swatches for your style class what plugin uses.

 <script language="JavaScript" type="text/javascript" src="jquery/jquery.js"></script> <script> jQuery.noConflict(); (function ($) { function readyFn() { $( ".variations_form" ).on( "woocommerce_update_variation_values", function () { let $swatches = $('.tawcvs-swatches'); $swatches.find('.swatch').removeClass('hidden'); $swatches.each(function(){ let $select = $(this).prev().find('select'); $(this).find('.swatch').each(function(){ if (!($select.find('option[value="'+ $(this).attr('data-value') +'"]').length > 0)) { $(this).addClass('hidden'); } }) }) } ); } $(document).ready(readyFn); })(jQuery); </script>