Woocommerce Variation swatches plugin cross out no

Question

Here is a screenshot of how the variations displayed when I selected first attribute (Size), it doesn't show the matching colors or doesn't cross out unmatching colors like the screenshot below (This is a premium plugin called Improved Variable Product Attributes Plugin).

Is there any way to cross out unmatching attributes in Variation Swatches Plugin For Woocommerce by adding simple Javascript?

After some trial and error tries, I wrote a little bit of code. Anyone else has better contributions appreciated.

Answer 1

After some trial and error, I wrote this below code and added to the click event in wp-content\plugins\variation-swatches-for-woocommerce\assets\js\frondend.js file.

Add the below code at the end of onclick event

/*
* Not Available display Hack
*/
                    var which = $el.closest( '.value' ).parent('tr').siblings();  which.removeClass('curr-select');
                    which.toggleClass('curr-select');
                    var available_value_select = $('.curr-select .value').find( 'select' ),
                    other_swatches = which.find('.swatch');
                    other_swatches.removeClass('tawvs-no-stock');

                if($el.hasClass('selected')) {
                    setTimeout(function() {
                    other_swatches.each(function(index, el) {

                        console.log($( this ).data('value') +' - '+  available_value_select.find('option[value="' + $( this ).data('value') + '"]').val() +' - '+ available_value_select.find('option[value="' + $( this ).data('value') + '"]').length);

                            if( !available_value_select.find('option[value="' + $( this ).data('value') + '"]').length && !$(this).hasClass('selected'))
                                $( this ).addClass('tawvs-no-stock');
                        });

                    },200);
                    // console.log(available_value_select);
                }

/*
* Not Available display Hack
*/

Eg :

$form
    .addClass( 'swatches-support' )
    .on( 'click', '.swatch', function ( e ) {

// code here
})

Also add this css code of cross out in wp-content\plugins\variation-swatches-for-woocommerce\assets\css\frondend.css

.tawvs-no-stock:before, .tawvs-no-stock:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    width: 0px;
    height: 26px;
    display: block;
    border: solid #F44336;
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 6px;
    left: 18px;
}
.tawvs-no-stock:after {
    transform: rotate(-45deg);
}

Results after adding this code snippet