Question

我正在使用Widgets included with WooCommerce的Filter products by attribute中的一个。我在Storefront-child-theme functions.php的类别页面上创建了一个小组件化区域（请参见下面的代码）。

例如，当我按属性size M进行过滤时，它会列出尺寸M缺货的产品...

有什么解决方法吗？

示例：按大小M进行过滤会显示此产品，该产品不可用：

/* FILTER BY SIZE WIDGET */
// Adding the widget area.
if (function_exists('register_sidebar')) {
    register_sidebar(array(
    'name' => 'Below category title',
    'id' => 'extra-widget-area',
    'description' => 'Below category title',
    'before_widget' => '<div class="widget below-cat-title-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h6 class="below-cat-title-widget-title">',
    'after_title' => '</h6>'
    ));
}
// placing the widget
add_action( 'woocommerce_archive_description', 'add_my_widget_area', 31 );
function add_my_widget_area() {
  if (function_exists('dynamic_sidebar')) {
    dynamic_sidebar('Below category title');
  }
}

add_action( 'woocommerce_archive_description', 'filter_button_function', 21 );
function filter_button_function() {
    // if ( is_product_category() ) {
        // global $wp_query;
        // $cat_id = $wp_query->get_queried_object_id();
        // $cat_desc = term_description( $cat_id, 'product_cat' );
        if (get_locale() == 'fr_FR') {
            $filter_html = '<div class="filter_by_size" class="subtitle">'.'FILTRE PAR TAILLE'.'&nbsp;&nbsp;<span class="filter-icon"></span>'.'</div>';
        } else {
            $filter_html = '<div class="filter_by_size" class="subtitle">'.'FILTER BY SIZE'.'&nbsp;&nbsp;<span class="filter-icon"></span>'.'</div>';
        }

        echo $filter_html;
    // }
}

Answer 1

我会直接的：默认情况下，you can't。它与某个主题或插件无关，而与Woocommerce本身有关。这是woocommerce for a very long time中存在的问题。在woocommerce中，默认情况下不可能根据其变体可见性来处理可变产品的库存可见性（库存状态），因为这是Woocommerce ¹的必要条件。

一种方法是添加此动作函数：

add_action('woocommerce_before_shop_loop_item', 'out_of_stock_variations_loop');
function out_of_stock_variations_loop()
{
    global $product;
    $filter = 'size';
    if ($product->product_type === 'variable') {
        $available = $product->get_available_variations();
        if ($available) {
            foreach ($available as $instockvar) {
                if (isset($instockvar[ 'attributes' ][ 'attribute_pa_' . $filter ])) {
                    if ($_GET[ 'filter_' . $filter ]) {
                        if ( !in_array( $instockvar[ 'attributes' ][ 'attribute_pa_' . $filter ], explode(',', $_GET[ 'filter_' . $filter ]) , true ) || ($instockvar[ 'max_qty' ] <= 0) ) {
                            echo "<style>.post-" . $product->get_id() . " {display: none}</style>";
                        } else {
                            echo "<style>.post-" . $product->get_id() . " {display: list-item !important}</style>";
                        }
                    }
                }
            }
        }
    }
}
?>

仅显示库存产品清单。这样做的问题是它将在此查询中删除非库存产品的空白区域，并且仅使用css可能很难解决此问题，因为在每一行上，第一个和最后一个产品都有{{ 1}}和first类，确定它们在CSS中的布局。为了克服这个问题，请将这个jQuery添加到您的儿童主题js脚本中：

last

你应该很好。

^{¹ WOOF Products Filter plugin and out of stock variations issue in Woocommerce}

^相关：

^{-filter products by attribute and hide out of stock items of variable products}

^{-How to prevent `out of stock` items to show as a filter option in the sidebar (layered nav widget ) in WooCommerce?}

^{-https://wordpress.org/support/topic/hide-out-of-stock-variations-when-filtering/#post-7718128}

^{-https://xtemos.com/forums/topic/filter-attributes-dont-show-out-of-stock-variations/}

^{-https://wordpress.org/support/topic/exclude-out-of-stock-products-from-filter/}

Answer 2

这里不是一个很好的答案。

正如@Islam Elshobokshy所说，编辑产品循环查询以消除缺货的变化有点复杂。

不过，您仍然可以使用CSS来“隐藏”列表中缺货的变体。但这可能会“破坏”您的产品列表/网格：如果有足够的产品用于2页（10个产品/页），但是此过滤器在第1页上隐藏了一个产品，则第1页将只有9个产品。我们正在查询产品。

我迅速测试并写了一些受this启发的文章：

这适用于size属性（可以修改以处理Woocommerce的所有属性，或URL参数“ filter_ *”，或对使用的每个属性进行硬编码）

代码：

add_action('woocommerce_before_shop_loop_item', 'out_of_stock_variations_loop');
function out_of_stock_variations_loop()
{
    global $product;

    $filter = 'size'; //to edit

    if ($product->product_type === 'variable') {
        $available = $product->get_available_variations();
        if ($available) {
            foreach ($available as $instockvar) {
                if (isset($instockvar[ 'attributes' ][ 'attribute_pa_' . $filter ])) {
                    if (($instockvar[ 'attributes' ][ 'attribute_pa_' . $filter ] === $_GET[ 'filter_' . $filter ]) && ($instockvar[ 'max_qty' ] <= 0)) {
                        //sadly echo some inline CSS :(
                        echo "<style>.post-" . $product->get_id() . " {display: none}</style>";

                        //some tests using is_visible() filters, but we are too late here
                        //add_filter( 'woocommerce_product_is_visible', function($visible, $id) use ($the_id) {return $id === $the_id ? false : $visible;}, 50, 2);
                    }
                }
            }
        }
    }
}

要在没有内联CSS的情况下实现相同目的，您可以：

将/woocommerce/template/content-product.php覆盖到your-theme/woocommerce/content-product.php
在method($product)中移动以下代码，对其进行一些编辑以仅对必需产品返回true / false
在“确保可见性”块中调用它，例如if ( empty( $product ) || ! $product->is_visible() || !$method($product) )
这将阻止输出产品，但不会解决网格/列表问题。

最后，更新循环查询以满足您的需求可能很复杂，并且会对性能产生负面影响。但是，要进行更多探索，我将开始以下工作：

通过检测GET过滤器参数（或直接检测与您知道将要过滤的过滤器/属性相匹配的wp_query参数）来添加query_var
找到并了解woocommerce产品wp_query
使用一个方法来检测您的自定义query_var
编辑查询，但如果涉及原始SQL，则可能会很痛苦。

woocommerce小部件“按属性过滤产品”显示不可用的产品

2 个答案: