Скачать или смотреть How to Display Only In-Stock Product Attributes on WooCommerce Shop Page

Learn how to show only `available` sizes for variable products in WooCommerce by modifying your code to filter out out-of-stock attributes. This guide helps enhance the customer experience in your online store.
---
This video is based on the question https://stackoverflow.com/q/77283194/ asked by the user 'Dmitry' ( https://stackoverflow.com/u/10240291/ ) and on the answer https://stackoverflow.com/a/77285937/ provided by the user 'LoicTheAztec' ( https://stackoverflow.com/u/3730754/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Display values of product attributes available in stock on the WooCommerce shop page

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Displaying In-Stock Product Attributes on WooCommerce Shop Page

When managing an online store using WooCommerce, it's essential to provide potential customers with accurate information about product availability. Particularly for variable products—with multiple options such as sizes and colors—showing only in-stock attributes can significantly enhance user experience. In this post, we will explore how to modify existing code to display only the product attributes that are currently in stock.

Problem Statement

As it stands, if your WooCommerce shop displays all sizes for variable products, regardless of stock levels, customers might become frustrated when they can only select options that are out of stock. For instance, if a product offers three sizes, where two are sold out and one is available, displaying all sizes leads to confusion. Our goal is to update our WooCommerce shop page to show only the available size(s) based on actual stock quantities.

Our Solution

To resolve this issue, we need to modify the existing code related to displaying product attributes in WooCommerce. Below is a step-by-step process to achieve this:

Step 1: Retrieve In-Stock Attribute Terms

First, we will create a utility function that executes a SQL query to fetch only the names of in-stock attribute terms for our variable product.

[[See Video to Reveal this Text or Code Snippet]]

This function checks the stock of each variation for a given product ID and returns the names of those that are in stock.

Step 2: Update the Existing WooCommerce Hook

Next, we'll make adjustments to the custom function that displays the product metadata on the shop page. We only want to show attributes where the stock is greater than zero.

[[See Video to Reveal this Text or Code Snippet]]

With this code, we check for in-stock sizes and display them appropriately. If no sizes are available, nothing will be shown.

Step 3: Where to Place the Code

To implement this solution, place the above code in the functions.php file of your child theme, or you may opt to create a custom plugin for easier management. This ensures that your changes are preserved when your theme or WooCommerce is updated.

Final Touches

Make sure to test your changes thoroughly. Navigate to your WooCommerce shop page and confirm that only available sizes for your variable products are being displayed. This solution not only helps to reduce customer confusion but also showcases your in-stock products more effectively, potentially increasing your sales.

Conclusion

By adapting your WooCommerce shop page to display only in-stock products, you deliver a more user-friendly shopping experience. This coding solution is straightforward and can significantly enhance the functionality of your online store. Happy coding!