向显示为样本的变体添加“缺货”类 - WooCommerce答案

【问题标题】：Adding an "out-of-stock" class to variations shown as swatches - WooCommerce向显示为样本的变体添加“缺货”类 - WooCommerce
【发布时间】：2018-04-02 11:00:47
【问题描述】：

我试图想办法为 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。将它们显示为一个红色框，例如带有一个十字。

到目前为止，在我的搜索过程中，我空手而归，因此我们将不胜感激。

【问题讨论】：

您是否使用特定的 WooCommerce 添加插件来显示样本？
我一直在使用一对，只是想看看它们之间是否有任何变化。插件一：wordpress.org/plugins/woo-variation-swatches 插件二：wordpress.org/plugins/variation-swatches-for-woocommerce
我没有使用过这些插件，我使用 WooCommerce 网站上出售的插件“WooCommerce Variation Swatches and Photos”编写了一个解决方案。

标签： php jquery wordpress woocommerce

【解决方案1】：

好的，我为插件WooCommerce Variation Swatches and Photos 编写了这段代码。将要做的是将一个名为 out-of-stock 的类添加到任何零库存的变体中。您需要确保在设置变体时选中了Manage 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);
}

【讨论】：

你好安德鲁，谢谢你。我已将此代码与 github 上的插件文件一起使用，它确实有效，但是，在该特定插件上，我无法将变体显示在框中。例如，我的尺寸变化应该像这样显示：[S] [M] [L] [XL] 但我无法做到这一点。如果我弄明白了，我会用这个。我已经厌倦了为其他插件做类似的事情，但这样做没有运气！
@JoshSouthern 这不是一个免费插件，所以它不会在 GitHub 上可用。你从哪里得到它的 URL 是什么？
有什么方法可以通过该 URL 私下向您发送消息吗？如果我无法获取代码，我不想将链接放在任何地方。
@JoshSouthern 或者我认为您可以按照此链接中的说明与我聊天meta.stackexchange.com/questions/231544/…
不幸的是，我似乎无法进行聊天，我认为这可能与我的低声望有关。但是，是的，该文本位于 woocommerce-swatches.php 文件中。

【解决方案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>

【讨论】：