Woocommerce變化色板插件跨越不匹配的屬性？

Question

這裏是變化的顯示時，我所選擇的第一屬性（文件大小），它並不顯示匹配的顏色或不劃掉不匹配的顏色，如以下屏幕截圖的屏幕截圖（這是一個叫做Improved Variable Product Attributes Plugin的高級插件）。

有沒有辦法通過添加簡單的JavaScript來劃去的變化色板插件不匹配屬性Woocommerce？

經過一些試驗和錯誤的嘗試，我寫了一些代碼。 其他人有更好的貢獻讚賞。

Answer 1

經過一些反覆試驗，我寫下了這段代碼，並將其添加到 的wp-content\plugins\variation-swatches-for-woocommerce\assets\js\frondend.js文件中。

在onclick事件的結束

/* 
* 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 
*/ 

例如添加以下代碼：

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

// code here 
}) 

同樣在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); 
} 

添加的橫出這個CSS代碼加入這個代碼後3210

結果摘錄