将“缺货”类添加到显示为样本的变体 - WooCommerce

时间:2018-04-02 11:00:47

标签: php jquery wordpress woocommerce

我试图想办法在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;
}

但是,当使用插件将我的变体显示为色板时,这不起作用。

我目前有一个尺寸属性,并使用插件将每个尺寸显示为可以选择的单独框。与此主题中显示的内容类似:Click Here

是否有一些PHP或JS可用于将新库存添加到缺货变量中,这样我就可以更改CSS。将它们显示为红色框,例如穿过它。

在我搜索到目前为止,我已经空手而归,所以任何帮助都会受到赞赏。

2 个答案:

答案 0 :(得分:0)

好的,我为插件WooCommerce Variation Swatches and Photos编写了这段代码。我们将做的是将一个名为缺货的类添加到零库存的任何变体中。您需要确保通过选中管理库存来设置变体。当变体的库存为零时,该类将添加到变体链接中。然后,您可以设置该类的样式,但是要显示它已禁用。

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

答案 1 :(得分:0)

如果您需要隐藏颜色色板(仅“颜色”选项),则可以在标签前使用此放置。 注意!您必须检查插件色板的类是否相同,例如,示例更改插件使用的样式类的.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>