Display out of stock configurable product options without showing out of stock products in categories and search results

Question

Currently I need to display out of stock options for configurable products in the products drop down. For example, a configurable product might have the following options: Small, Medium, Large.

When an option is out of stock, it still needs to display in the configurable products drop down, it just needs to be greyed out.

This can be achieved by enabling the following setting:

Stores > Configuration > Inventory > Display Out of Stock Products > Yes

The problem is that this configuration setting also enables out of stock products to display on both category pages and in search results.

How can I display out of stock options for configurable products, without showing out of stock products in categories and search results?

Answer 1

This part of the system is highly reliant on javascript. So, the answer is it will be tough to perform your requirement.

• you have 2 ways to think of it:

1. you can leave out of stock config setting as it is and write a javascript mixin. However, it is not this simple because the stock data do not appear in the javascript that powers the select in the configurable product. SO, you also have to modify the code that feeds the configurable javascript

--> the advantage of this solution is that your customisation is contained to one page / one part of the code base

2. the other option is to change the config flag and modify the search and anything that can be showing out of stock products. This seems less complex but it has many more use cases and will likely yield to more changes. As a consequence it will be hard to test, more difficult to maintain