Woocommerce: Size filter issue: Out of stock items always appear in "Layered nav: filter" widget

[ifede84]

I have a 1.000 shoes store, so for my costumers, filtering by size is the best way to quickly find what they are looking for and to purchase it.

The default size woocommerce widget can't help my users because it show every items that have size selected by the users, even if the variations stock is set 0.

So, if a costumer filters for size 41, the widget shows shoes that has actually 41 in stock and shoes that had 41 in stock but have not actually.

This is very frustating for users that have to look into every item to see if the size 41 is avalaible or not. Consequently, they quit after the first few items which don’t have the size they are looking for.

Here you can see a little screencast to better explain what i'am talking about: https://youtu.be/pYZqnLMe_4k

Is it possible to improve size widget, so that it only shows items that have selected size INSTOCK?
P.s: backorder are not allowed; manage stock is checked for every item

[claudiulodro]

Hi,

This is currently a 'wontfix' item - I'll briefly explain why it's not possible to do this at this point.

• Attributes (your shoe sizes) are terms.
• The terms are not directly tied to a 'variation', they are tied to a parent variable product.
• When querying products using widgets like layered nav, they look at the parents only. They cannot look at the variations because the variations are not assigned to the term.
• Since the query cannot look at the variation, it cannot check its stock level and exclude it.

In the future we may try to revisit this, but as it stands, looping over all variations during layered nav queries would be a massive bottleneck and would cause too large of a performance issue to warrant it's inclusion. It may be possible once product tables are in WooCommerce core, but right now it's not possible. Hope you understand.

Thanks.

[ifede84]

Dear claudiulodro,

thank for your help.

I've notice that you copy&paste your answer from an old ticket opened four years ago. So i think "future" it will be a long wait.

Sorry dude, but i can't understand. It's incredible that an advanced platform like woocommerce doesn't have a simple feature like filtering by attributes.

You should warn every user about this issue, because it' s a serious problem for who sells clothes, shoes, and others variable items.

I want to be honest with you: i I would never have chosen Woocommerce for my store if I had known about this problem.

[claudiulodro]

Future is coming in 2019. The product custom tables are under development now and will be in WooCommerce 4.0. These should make it possible to do the sort of variation attribute filtering you are trying to do since attributes will have their own optimized database tables instead of the WP terms tables.

[ifede84]

SOUNDS GOOD!

when is it going to come out, approximately?

[Moultrex]

@ifede84

I made a solution based on this snippet and it works

https://github.com/ctuxboy/Woocommerce-out-of-stock-variations-loop

You can find it here.

https://github.com/Moultrex/Woocommerce-out-of-stock-variations-loop/blob/master/wc-out-of-stock-variation.php

Change the $_GET['filter_megethos'] with your URL filter that is generated when you apply a filter and change ['attribute_pa_megethos'] with your attribute. Don't forget to change the widgets' filter condition to OR

[ifede84]

Dear @Moultrex , thank you for your help!

I've tried it but it' doesn't run. Maybe i did something wrong.

This is a filtered url before adding your snippet:
_https://www.website.com/shop/scarpe/?filter_numero=35_

• i insert the snippet on functions.php of child theme
• i change both $_GET['filter_megethos'] with _$_GET['?filter_']_
• i change all of ['attribute_pa_megethos'] with _numero_
• i change the widget's filter condition to OR

[Moultrex]

@ifede84 Change $_GET['filter_megethos'] to $_GET['filter_numero']
Change attribute_pa_megethos to attribute_pa_numero

[ifede84]

It still not running: this is the code i've added to functions.php
add_action( 'woocommerce_before_shop_loop_item_title', 'wk_out_of_stock_variations_loop' );
function wk_out_of_stock_variations_loop(){
global $product;
if ( $product->product_type == 'variable' ) { // if variation product is out of stock
$available = $product->get_available_variations();
if ( $available )foreach ( $available as $instockvar ) {
if ( isset($instockvar['attributes']['attribute_pa_numero'] ) ) {

    if(isset($_GET['filter_numero'])){

       $destostock = $_GET['filter_numero'];


      $array = explode(',', $destostock);



if (in_array($instockvar['attributes']['attribute_pa_numero'], $array )&& (!$instockvar['max_qty']>0)){
       global $product;
       $id = $product->get_id();

        echo "<style>.post-$id{display: none}</style>";

}
      else{

      if (in_array($instockvar['attributes']['attribute_pa_numero'], $array )&& ($instockvar['max_qty']>0)){
       global $product;
       $id = $product->get_id();

        echo "<style>.post-$id{display: block !important}</style>";

      }
      }

    }
}

}
}
}

[Moultrex]

Your attribute slung is numero? You have to put attribute_pa_insert-attribute-slung

Where did you put that code on child-theme? Or on main theme functions.php file?

I guarantee you it is working. Something is wrong on your end. Do you have additional snippets on custom functions enabled? What are your shop permalinks settings?

[scoxnet]

hello,
I have the same identical problem of ifede84, and the code doesn't work for me too...

[Moultrex]

@scoxnet Probably you have write the wrong attribute inside the code. Dm me your shop url to check how the filters work. We have this function in our shop and is working flawlessly

[scoxnet]

the website is pattyshoes.it

[Moultrex]

@scoxnet You can find the code for your store here

https://pastebin.com/55TqLG7e

Add this code with a plugin like

https://wordpress.org/plugins/code-snippets/

[ifede84]

>

Future is coming in 2019. The product custom tables are under development now and will be in WooCommerce 4.0. These should make it possible to do the sort of variation attribute filtering you are trying to do since attributes will have their own optimized database tables instead of the WP terms tables.

@claudiulodro Any idea when WOO 4.0 is goint to be released?

@Moultrex Sorry dude, i've tried many times, but your code still doesn't run. I've removed every other code from child functions.php, uncheck the "hide out of stock feature" and set filter size widgent on OR

This is the code i've added:

add_action( 'woocommerce_before_shop_loop_item_title', 'wk_out_of_stock_variations_loop' );
function wk_out_of_stock_variations_loop(){
    global $product;
    if ( $product->product_type == 'variable' ) { // if variation product is out of stock
        $available = $product->get_available_variations();
        if ( $available )foreach ( $available as $instockvar ) {
            if ( isset($instockvar['attributes']['attribute_pa_numero'] ) ) {

        if ( ( $instockvar['attributes']['attribute_pa_numero'] == $_GET['filter_numero'] ) && (!$instockvar['max_qty']>0) ) {
           global $product;
           $id = $product->get_id();
               echo "<style>.post-$id{display: none}</style>";
           // echo  '<p style="color:red;font-weight: bold;">OUT OF STOCK</p>';
                }
            }
        }
    }   
    if ( !$product->is_in_stock() ) { // if single product is out of stock
        echo  '<p style="color:red;font-weight: bold;">OUT OF STOCK</p>';
    }
}

[Moultrex]

@ifede84

I don't know maybe you have any other custom modification or maybe your theme overrides the url and adds something else.

We have this code in our store and is working like it should be.

[ifede84]

@Moultrex I double check the code, fix one error and now it's running :) The problem now is that are shown also out of stock items: is there any way to hide them?

[Moultrex]

@ifede84

Check again on woocommerce settings the option hide out of stock feature you have unchecked

EDIT: Sorry if you choose that option the whole product would be hidden although you have available variations. Leave it unchecked.

Can you explain when you select a variation that is out of stock what the shop page is showing?

[ifede84]

Can you explain when you select a variation that is out of stock what the shop page is showing?

If hide of stock is unchecked: only shoes with chosen size on stock are shown
if hide of stock is checked: even shoes with chosen size out of stock are shown, despite your code

[Moultrex]

Can you explain when you select a variation that is out of stock what the shop page is showing?

If hide of stock is unchecked: only shoes with chosen size on stock are shown
if hide of stock is checked: even shoes with chosen size out of stock are shown, despite your code

If hide of stock is unchecked: only shoes with chosen size on stock are shown

Ok this is how it should work.

[woolityourslef]

Hi
And a real big thanks for work and explainations about this huge problem.

You've understood I also have the exact same issue, and try to find the solution ; so I have tried @Moultrex code, but for now it doesn't work ; but I permit myself to post here to ask if i'm doing it well

my website : https://bellemme.com/
woocommerce : 3.5
theme : Xstore

1/ I have copied the code
2/ I have edited the code to replace atributes slung with the good info (in my case megethos > imprimes)
3/ I have pasted this code in the child theme functions.php
4/ I have unchecked the 'hide the out of stock' option in woocommerce

Is there anything i forgot to do ?

Regards !

ps i paste here my modified code

add_action( 'woocommerce_before_shop_loop_item_title', 'wk_out_of_stock_variations_loop' );
function wk_out_of_stock_variations_loop(){
global $product;
if ( $product->product_type == 'variable' ) { // if variation product is out of stock
$available = $product->get_available_variations();
if ( $available )foreach ( $available as $instockvar ) {
if ( isset($instockvar['attributes']['attribute_pa_imprimes'] ) ) {

    if(isset($_GET['filter_imprimes'])){

       $destostock = $_GET['filter_imprimes'];


      $array = explode(',', $destostock);



if (in_array($instockvar['attributes']['attribute_pa_imprimes'], $array )&& (!$instockvar['max_qty']>0)){
       global $product;
       $id = $product->get_id();

        echo "<style>.post-$id{display: none}</style>";

}
      else{

      if (in_array($instockvar['attributes']['attribute_pa_imprimes'], $array )&& ($instockvar['max_qty']>0)){
       global $product;
       $id = $product->get_id();

        echo "<style>.post-$id{display: block !important}</style>";

      }
      }

    }
}

}
}
}

[Moultrex]

@woolityourslef

Do you have the child theme enabled?

Does your url when you apply a filter look something like this?

https://prnt.sc/mqwmd6

On your attributes on wordpress admin page if you hover above the edit button do you see down left at the web page something like this on the url?

https://prnt.sc/mqwmwh

[Moultrex]

@woolityourslef

Try to add this code i make it on pastebin based on your attribute.
Remove yours first.

https://pastebin.com/z5Q5rpu8

[woolityourslef]

Thks again for your help @Moultrex !

to answer to your questions

the child theme is enabled
my urls do not change
here the hover attribut : https://prnt.sc/mqwzur
I have changed the code

regards

[Moultrex]

@woolityourslef

Do you have products that are out of stock to check it?

I had a demo of Xstore theme and try it. It works.

Remove the code from your child theme and use this plugin

https://wordpress.org/plugins/code-snippets/

Maybe you have some other code in functions.php file and is conflicting.

I can guarantee you the code works.

[woolityourslef]

@Moultrex
you can see the an out of stock variation here : https://bellemme.com/produit/sac-rond-albertine ; where the term "bangalore" is out of stock (in the middle)

I try whith code snippets, and i believe you that it works, i'm only worried about my abaility to do it well ;)

[Moultrex]

@woolityourslef

But you don't have Widget Filter on your sidebar with the attribute to filter the products. You have the category filters only.

The out of stock swatch is not showing Out of stock message instead it shows a notification pop up

Sorry, no products matched your selection. Please choose a different combination

You have something not set right in your variations.

[Moultrex]

@woolityourslef

Look how it should work:

http://recordit.co/JpwOkn2E7B

[woolityourslef]

@Moultrex

I've seen your exemple, and that's effectivly exactly what i try to do (that and do not show the variations not available in the product detail page)

So i'm sure your solution could work, and that's only due to my settings ; I let you here a sample of a variation setting for an out of stock variation : https://prnt.sc/mr7d0p
Is there a mistake in it ? Should i configure it differently ?

Thanks again

[Moultrex]

@woolityourslef

The variation seems ok. Did you add on the sidebar the product filter for this attribute? I only see the category filter.

[woolityourslef]

@Moultrex
sorry i hadn't save it :/ .. so know the attributes filter is on

ps : for example the "bangalore" term should not show the "sac rond albertine" product cause its out of stock

[Moultrex]

@woolityourslef

I think something is strange with your permalink structure. Normally after accessoires there must be a trailing slash /

Must be

https://bellemme.com/categorie-produit/accessoires/?filter_imprimes=bangalore&query_type_imprimes=or

But yours is

https://bellemme.com/categorie-produit/accessoires?filter_imprimes=bangalore&query_type_imprimes=or

Without the slash, maybe that's the problem.

https://prnt.sc/mr8pnz

[woolityourslef]

@Moultrex
I see ... and do you think there is a way to "force" the permalink to this structure (with the "/") ?

[Moultrex]

@woolityourslef

Normally is on by default with the trailing slash, i try it with no trailing slash on my demo site and it still works.

Something is clearly misconfigured. Did you add the code in code snippets plugin and run it every where?

Maybe you have something else and it is conflicting. I don't know how you configured your site.

[woolityourslef]

@Moultrex , once again huge thks for help, and time spent on my case !

I confirm i added the code (first removed manualy from the functions file) via Code Snippets, and checked the option "everywhere" (admin+website)

For a conflict, I have a classical configuration for catalog and products, but use obviously some plugin, one is related to variation, it is Smart Variation , it permits to manage an alternative galery for a variation

[Moultrex]

@woolityourslef

Can you temporarly disable this plugin to check how it works? Leave enable only the theme's vital plugins.

[woolityourslef]

@Moultrex

done ;) .. the Smart Variation Images Pro is off .. but that do not solve it

I also have shut off some other plugin .. the on ly "heavy" plugin still on for the woocommerce management is Stripe

[Moultrex]

@woolityourslef

I still see the image swatches. Disable and the Free version of the plugin. The variations must be like a drop down selection like i saw you on our demo site.

[woolityourslef]

@Moultrex

sorry at this step, i'm not sure my english is enough good to understand ... i have disabled the plugin (so no version is used, even not the free version) ..
or do you mean, i have to change setting of the widget for a drop down selection ?

[Moultrex]

@woolityourslef

I can still see the swatches

https://prnt.sc/mr9lug

The default woocommerce plugin has something like that

https://woocommerce-manager.com/wp-content/gallery/create-woocommerce-product-variations/woocommerce-variable-product-at-frontend.png

[woolityourslef]

@Moultrex

Is your screenshot made with a Xstore ? cause i thought it is my theme that sets the display of that .. i'm looking for a way on the theme options .. and let you know

[Moultrex]

@woolityourslef

It was a generic screenshot. On Xstore looks like this

https://prnt.sc/mr9pvg

[woolityourslef]

@Moultrex

ok, i have discussed with the shop manager, and he needs that the attributes "imprimes" to be displayed by image and not by drop down area :/ .. so seems to be a dead end, isn't it ?

[Moultrex]

@woolityourslef

Sorry, i don't know what and how exactly you setup your store. The code you saw it works. Maybe your manager can tweak it to suit your needs.

[woolityourslef]

@Moultrex

I'll ask for it ...and once again, thanks a lot for help ! I'll let you know if we work it differently. Or will wait for woocommerce 4, that could fix the problem

[mischasigtermans]

I'm struggling with this issue too. The code works, however; products that are filtered out with the css are creating white spaces. Any fix for this?

[Moultrex]

@Pixelstart i don't have any solution for your CSS. We use flexbox and everything is arragned normally. Try to implement a flexbox layout

[mischasigtermans]

Guys. @ifede84 is absolutely right @claudiulodro c'mon, we live in 2019. Fix this already. Still can't believe that such a huge community of developer can't seem to find a fix for a feature that is so important to shops.

A weird fix in this topic is not gonna fix the issue. This is a huge issue, see it through please. Give us an ETA so we can tell our clients what to expect.

[ifede84]

Hi @Pixelstart , thanks for support. I've found a third part plugin that solve the issue, but i don't know if i can say the name here. Send me a private message :)

[Moultrex]

@ifede84

Can you share the name here to. Interested to know. Thank you.

[ifede84]

Sure. It's a premium plugin, FACET WP ( https://facetwp.com/ )

You can see it running here, the widget is SCEGLI IL TUO NUMERO (choose your size) https://www.supermarketdellascarpa.com/shop/brands/scarpe-skechers-shop-online/

(if this post violates the netiquette, delete it and send me a pm)

[Moultrex]

Yes facetwp does the job have tested it too.

[mischasigtermans]

@ifede84 I'm about to test FacetWP. However, I just find it very absurd that WooCommerce doesn't come with a solution on something this basic.

[PriitGit]

They just want to sell own Product Filters plugin, thats all. I think that fix that known problem?
https://woocommerce.com/products/product-filters/?_ga=2.192635945.2083807797.1572010923-1736748441.1536312205

[khmahfuzhasan]

Its 2020 now. Is there any update?

I have shoes website where I have few product variations size:36-41. Each size has few products in stock. Is there any way to hide the variations that go out of stock in the drop-down list from front-end? There only 39 size has 1 product in stock others should be removed from the frontend because they haven’t any product in stock of these sizes[red marked].
Thanks

check the screenshots:

1. Dashboard: http://prnt.sc/qx8jsu
2. Front End: http://prnt.sc/qx8k6d

[KoolPal]

@khmahfuzhasan You should raise this issue here: https://github.com/woocommerce/woocommerce/issues/25524

I too landed here today searching for some solution to this nonsense!

[fedosh]

I thought this was something I haven't configured correctly in woocommerce. I am glad I found this.
The people I work with find it incredible that I can't make woocommerce to filter products based on the sizes that are available in stock and hide the ones that have zero stock with backorders not allowed or are just out of stock.
It's essential for many shops having different sizes that people can filter through variations to find the ones available in stock.
Is there any news on this, is 2020? We should be thousands that could use this to work this way, currently there is no use for filters for these kind of shops. Woocommerce must notice this affect all these kind of businesses and in this cases now our websites don't perform as well as others due to this. I really hope this is on the works and is to be released soon.

[mischasigtermans]

@fedosh Amen. Please see https://github.com/woocommerce/woocommerce/issues/25524