[Resolved] Cannot get correct stock status for WooCommerce variable products

[Author]

Posts

[robbertR]

I am trying to:
Show the correct stock status of a variable woocommerce product

Link to a page where the issue can be seen:
hidden link

I expected to see:
I created a view 2 conditional fields as follows:

[wpv-conditional if="( woo_product_in_stock() eq '1' ) "]<p><span class="stockinfo_is">In stock</span></p>[/wpv-conditional]
[wpv-conditional if="( woo_product_in_stock() eq '0' ) " ]<p><span class="stockinfo_oos">Out of stock</span></p>[/wpv-conditional]

This is working for simple products.
But for variable products, the output doesn't change based on the stock status of de chosen variation. This is confusing for my visitors, cause the message might be 'in stock' where the add-to-cart button disables because the chosen variation isn't in stock.
So my question is: how to show/update the correct stock status for variations?

[Beda]

Well, does the WooCommerce native method woo_product_in_stock() even support AJAXified updates of in-stock status when changing a products variation?

I don't think this works even without Toolset, can you confirm this?

I think instead you could use views_woo_in_stock.
https://toolset.com/forums/topic/how-i-can-displaying-sold-out-when-the-stock-is-0/#post-1145575

This field is also available in Views, see https://toolset.com/documentation/user-guides/woocommerce-views-calculated-fields-and-batch-update/
Note that for variable products the output is broad:
- In the example above we are using the views_woo_in_stock. This will return 1 (true) if the product has stock and 0 (false) if the product out of stock.
- views_woo_on_sale is similar and will also return values of 1 (true) and 0 (false) if the product is on sale. For Variable products, this will be true if any of the Product Variants are on sale.
- views_woo_price. This will return the product’s normal price or, if it is currently on sale, the sale price. For Variable products, the lowest price for the Products variants will be returned.

Note however that HTML conditionals won't listen to things that happen on the fly, for them to work you need to reload the screen, to trigger the condition, which is made with PHP (not frontend interactive scripts)

Maybe you can hide and show the contents using a Custom JS applied on a DIV's visibility?
HTML conditions won't react upon "on the fly" events properly, wich WooCommerce's variation handling is.

Does this help to resolve the issue?

[robbertR]

Hi Beda,
Thank you for your help. However:

- On the product page, with default Woo and NO Toolset activated, it is working as exptected: as soon as the user chooses a variation that is no longer available, a 'out of stock' message appears. With Toolset activated this doesn't work and as well my own code example as the ones you mentioned all give the same result: there's no change in the output when the user makes a variation selection. In other words, I suppose that in default WooCommerce this is using Ajax, where in Toolset there's just plain html so not a chance that it will change based on the user making a variation choice.

- The code examples provides dó work, but just not for variable products.

- Strange that I'm the first one asking this?

[Beda]

The only results you get in the entire Google for woo_product_in_stock, are your post here and https://toolset.com/forums/topic/woocommerce-views-4/
I must apologize that while I thought those where core WooCommerce methods, it seems those are actually in fact Core Toolset Views methods, added in Version 2.0!
But our Changelog (the public one) does not mention that, neither our DOC.
I only found it in the core code changelog txt file, that was the first hint.

I am currently setting up a full test site to check what those methods are supposed to do, how to use them, where and when.
I'll update the thread here with my findings as soon as possible.

[Beda]

The function indeed is for adding default WooCommerce Views functions to be used for WordPress Views plugin wpv-if (nowadays wpv-conditional) statements, along with woo_product_on_sale(), woo_product_in_stock(), wpv_woo_single_products_rating_func()
These methods also automatically appear in Views Conditional Functions supported area in the Toolset Settings, so they can be used in conditionals.

There is even an example usage in the code:

[wpv-if evaluate="woo_product_in_stock() = 1"]
  Stock is available for this product.
[/wpv-if]
[wpv-if evaluate="woo_product_in_stock() = 0"]
  Stock is not available for this product.
[/wpv-if]

That's exactly as you apply it too.
But wpv-if, or wpv-conditionals do NOT listen to AJAX events, as explained previously.
Whether or not the function would actually display updated data, the HTML conditions do not listen to any "on the fly" change.
They only apply what comes from the server, when the page is loaded, not when it's modified with later scripts or events.

If you only want to display the out of stock, or other native WooCommerce messages related to the stock, then there are ways to achieve that, but displaying messages conditionally after some changes done with AJAX or JS in an HTML condition is not possible.
That does not execute as JS, it executed already as PHP at this moment.

You can try this easily, make an HTML condition that listens to whichever data you can alter with JS on the front end.
Making changes won't affect the condition, only after reloading it with that data it'll affect the condition.
This is different than in Toolset Forms Conditions, which are responsive by nature to changes on the fly.

The out of stock displayed by WooCommerce should instead be displayed by using Toolset's ShortCodes for the add to cart and choose options:
https://toolset.com/documentation/user-guides/views-shortcodes/#woocommerce-views-2, https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154367

The HTML conditions will not respond to AJAX, but only to page reloads.
So if once the produce is actually out of stock (all of it, not just single variations), then it will display the out of stock part as set in your HTML condition, but only after a full reload of that page.

Concluding, there should be nothing broken so far.

Can you solve the issue on your end by using the ShortCodes we provide for the handling of stock (and other) message handling?
If not, a custom JS solution should be created, as a conditional display with AJAX is not possible using HTML conditions like this.

[robbertR]

Hi Beda

Thank you for your time and answers!
Sorry, but I do not completely get this. I do understand why my solution isn't working. Its output is static html and will never update - or I should force a page reload, which is very annoying on a product detail page of course.

However, I also understood from your message that it should be possible to display an out of stock message on the product detail page, just as default WooCommerce does when the user selects a variation that is no longer on stock. I'm looking at the links you provided but cannot find the direction on how to do that.

My item does display an 'item was added to cart' message as soon as I do that.
In other words, I'm still confused but on a much higer level 😉
Could you please point me into the right direction to get this solved? This how my view currently looks. Now, I understand that I can just as well remove the conditional, since it won't work. But how do I make sure the 'out of stock' message will appear?

----

<div class="row">[wpv-add-to-cart-message]</div>
<div class="row">
<div class="col-sm-6">[wpv-woo-product-image]</div>

<div class="col-sm-6">
<h3>[wpv-post-title]</h3>
<p>Adviesprijs: [types field='msrp' format='FIELD_VALUE'][/types]</p>
<p>Onze prijs: [wpv-woo-product-price]</p>

<p>[wpv-post-excerpt]</p>

• [types field='productusp1' separator=', '][/types]
• [types field='productusp2'][/types]
• [types field='productusp3'][/types]

[wpv-woo-product-meta]
<p><span style="font-weight:bold;">Merk: </span>[types field='brand'][/types]</p>
[wpv-conditional if="( $(views_woo_in_stock) eq '1' )"]<p><span class="stockinfo_is">Op voorraad</span></p>[/wpv-conditional]
[wpv-conditional if="( $(views_woo_in_stock) eq '0' ) " ]<p><span class="stockinfo_oos">Niet op voorraad</span></p>[/wpv-conditional]
[wpv-woo-buy-options add_to_cart_text="In Winkelmand"]
</div>
</div>
<div class="row">

[wpv-woo-display-tabs]

</div>

[Beda]

Yes, this is possible, as I outline in the previous reply.

1. With HTML conditional, on page load, related to the entire product (so if at least one variation has stock it'll trigger the has a stock message)

2. Or, with our method to display native WooCommerce stock and product handling. The easiest is using the hidden Field for it, as shown here:
https://toolset.com/forums/topic/unable-to-display-stock-quantity/
That returns the stock.
This can be used to either display it or also listen conditionally to its amount.

3. With the [types field='views_woo_in_stock'][/types] shortcode, which can be inserted usinbg the In Stock Status ShortCode available in Views (WooCommerce Views)

I apologize if my previous reply about the confirmation message (https://toolset.com/documentation/user-guides/views-shortcodes/#vf-154367) confused you.

Please let me know if above helps.