向顯示為色板的變體添加“缺貨”類 - WooCommerce

Question

我試圖找出在 WooCommerce 變體中添加“缺貨”類的方法，當它們的庫存水平為 0 時顯示為色板。

當它們顯示在標准 WooCommerce 下拉列表中時，我發現了多種“變灰”缺貨變體的方法 - 代碼如下所示：

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;
}

但是，當使用插件將我的變化顯示為色板時，這不起作用。

我目前有一個尺寸屬性，並使用一個插件將每個尺寸顯示為一個可以選擇的單獨框。 類似於此線程中顯示的內容： 單擊此處

是否有一些 PHP 或 JS 可以用來將新庫存添加到缺貨變體中，然后我可以更改 CSS。 將它們顯示為一個紅色框，例如帶有一個十字。

到目前為止，在我的搜索過程中，我空手而歸，因此將不勝感激。

Answer 1

好的，我為插件WooCommerce Variation Swatches and Photos編寫了這段代碼。 將要做的是將一個稱為out-of-stock的類添加到零庫存的任何變體中。 您需要確保在選中管理庫存的情況下設置了變體。 當變體的庫存為零時，該類將添加到變體鏈接中。 然后，您可以設置該類的樣式，但要顯示它已禁用。

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;
}

要在樣本內顯示尺寸標簽，您可以使用此過濾器刪除 text-index 屬性。

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

如果您需要隱藏色板（僅限顏色選項），那么您可以使用這個放置在標簽之前。 注意！ 您必須檢查插件色板的類是否相同，您使用的示例更改 .tawcvs-swatches 插件使用的樣式類。

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