Woocommerce Variation swatches插件交叉出不匹配的属性？

下面是我选择第一个属性（大小）时显示变体的截图，它没有显示匹配的颜色，也没有显示不匹配的颜色，如下面的截图（这是一个名为改进的变量产品属性插件的高级插件）。

有没有办法通过添加简单的Javascript来为Woocommerce的Variation Swatches Plugin中的不匹配属性划掉 ？

经过一些试验和错误尝试后，我写了一些代码。 其他人有更好的贡献赞赏。

Answer 1

经过一些试验和错误后，我在下面的代码中编写了这个代码并添加到wp-content\plugins\variation-swatches-for-woocommerce\assets\js\frondend.js文件中的click事件中。

在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添加这个交叉的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); } 

添加此代码段后的结果