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

Question

我正在使用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

我会很直接：默认情况下，你不能。它与某个主题或插件无关，而是与 Woocommerce 本身有关。这是woocommerce长期存在的问题。默认情况下，woocommerce 不可能根据其变体可见性来处理可变产品库存可见性（库存状态），因为它是 Woocommerce ^{1 所}必需和需要的。

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

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 很难规避这个问题，因为在每一行上，第一个和最后一个产品都有first和last类这决定了它们在 CSS 中的布局。为了克服这个问题，将此 jQuery 添加到您的子主题 js 脚本中：

function openLayeredNavFilterIfSelected() {

  if (jQuery('.wc-layered-nav-term').hasClass('woocommerce-widget-layered-nav-list__item--chosen')) {

    /*keep layered nav filter open, if at least an attribute is selected*/
    jQuery('.woocommerce-widget-layered-nav-list__item--chosen').parent().parent().show();
    if (!jQuery('.filter-icon').hasClass('arrow_up')) {
      jQuery('.filter-icon').addClass('arrow_up');
    }

    /*redistribute products rows to avoid missing spaces*/
    jQuery('.site-main ul.products.columns-3 li.product').removeClass('first').removeClass('last');
    jQuery('.site-main ul.products.columns-3 li.product:visible').each(function(i) {
      if (i % 3 == 0) jQuery(this).addClass('first'); //add class first to firsts products of rows
      if (i % 3 == 2) jQuery(this).addClass('last'); //add class last to lasts products of rows
    });
  }
}

openLayeredNavFilterIfSelected();
jQuery(window).resize(openLayeredNavFilterIfSelected);

你应该很高兴去。

^{1 WOOF 产品过滤器插件和 Woocommerce 中的缺货变化问题}

^{有关的 ：}

^{-按属性过滤产品并隐藏可变产品的缺货项目}

^{-如何防止“缺货”项目在 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/}