I am using on of the Widgets included with WooCommerce called Filter products by attribute. I created a widgetized area on the category page in my Storefront-child-theme functions.php
(see code below).
But when I filter by attribue size M
for example, it lists products where size M is out of stock…
Any idea how to fix this?
EXAMPLE: Filtering by size M displays this product, which is not available:
/* 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'.' <span class="filter-icon"></span>'.'</div>';
} else {
$filter_html = '<div class="filter_by_size" class="subtitle">'.'FILTER BY SIZE'.' <span class="filter-icon"></span>'.'</div>';
}
echo $filter_html;
// }
}
2
Answers
I’ll be direct : by default, you can’t. It’s not related to a certain theme or plugin, but to Woocommerce itself. This is a problem that exists in woocommerce for a very long time. It’s not possible by default in woocommerce to handle variable products stock visibility (stock status) based on it’s variations visibility as it’s something necessary and needed by Woocommerce1.
A way of doing this is to add this action function :
Which will only show the list of products in stock. The problem with this is that it will leave blank spaces where the not-in-stock products are deleted by this query, and it can be difficult to circumvent this problem only with css because, on each row, first and last products have
first
andlast
classes that determines their layout in CSS. To overcome this, add this jQuery to your child-theme js script:And you should be good to go.
1 WOOF Products Filter plugin and out of stock variations issue in Woocommerce
Related :
– 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/
Not a really good answer here.
As @Islam Elshobokshy said, it’s a bit complex to edit the product loop query to remove out of stock variations.
Still, you can trick using CSS to "hide" out of stock variations from the list. But it may "break" your product list/grid: if there is enough product for 2 pages (10 items/page), but one product is hidden on page 1 by this filter, page 1 will only have 9 products. We are after the product query.
I quickly tested and wrote something inspired from this:
size
attribute (it could be adapted to handle all attributes from Woocommerce, or URL parameters "filter_*", or hardcoded for every attribute used)Code:
To achieve the same without inline CSS, you can:
/woocommerce/template/content-product.php
toyour-theme/woocommerce/content-product.php
method($product)
, edit it a bit to return true/false only for required productsif ( empty( $product ) || ! $product->is_visible() || !$method($product) )
In the end, updating the loop query to match your need may be complex, and negatively impact performance. But, to explore more, I would start something like: