Display Out of Stock Simple Products swatches in configurable product

Question

Configurable product should display all simple products, also the simple products which are out of stock.

For example an item has the sizes S, M, L, XL. And M is out of stock.

At this moment it only shows S L XL.

I need Magento to show also the size M (with an "out of stock" css class added to it).

How can I fix this for Magento 2.3(!) ?

Answer 1

The above one is a known issue for Magento and can be solved partially by installing the below extension.

https://github.com/interjar/configurable-child-visibility

Reference for the Issue can be found at Magento Issue 10454

Answer 2

To make visible swatshes that related to out of stock products try to make such changes

1. Create your own module
2. Create etc/di.xml file

add there code

<type name="Magento\ConfigurableProduct\Helper\Data">
    <plugin name="VendorName_ModuleName_Plugin_Magento_ConfigurableProduct_Helper_Data"
            type="VendorName\ModuleName\Plugin\Magento\ConfigurableProduct\Helper\Data" sortOrder="10" disabled="false"/>
</type>

3. Create Plugin Class VendorName\ModuleName\Plugin\Magento\ConfigurableProduct\Helper\Data

/

namespace VendorName\ModuleName\Plugin\Magento\ConfigurableProduct\Helper;

use Magento\Framework\App\Config\ScopeConfigInterface;

/**
* Plugin for making visible swatches that related to  out of stock products
* depend on the setting admin->Stores->configuration->Catalog->Inventory->Stock Options->Out of Stock Products
*/
class Data
{
    const SHOW_OUT_OF_STOCK_CONFIG_PATH = "cataloginventory/options/show_out_of_stock";
    protected ScopeConfigInterface $scopeConfig;

    /** 
    *@param ScopeConfigInterface $scopeConfig
    */    
    public function __construct(ScopeConfigInterface $scopeConfig)
    {
        $this->scopeConfig = $scopeConfig;
    }

    /**
     * @param \Magento\ConfigurableProduct\Helper\Data $subject
     * @param \Closure $proceed
     * @param $currentProduct
     * @param $allowedProducts
     * @return array
     */
public function aroundGetOptions(
    \Magento\ConfigurableProduct\Helper\Data $subject,
    \Closure                                 $proceed,
                                             $currentProduct,
                                             $allowedProducts

) {
    $result = $proceed($currentProduct, $allowedProducts);

    $show_out_of_stock = $this->scopeConfig->getValue(self::SHOW_OUT_OF_STOCK_CONFIG_PATH,
        \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    $options = [];
    $allowAttributes = $subject->getAllowAttributes($currentProduct);

    foreach ($allowedProducts as $product) {
        $productId = $product->getId();
        foreach ($allowAttributes as $attribute) {
            $productAttribute = $attribute->getProductAttribute();
            $productAttributeId = $productAttribute->getId();
            $attributeValue = $product->getData($productAttribute->getAttributeCode());
            if ($show_out_of_stock || $product->isSalable()) {
                $options[$productAttributeId][$attributeValue][] = $productId;
            }
            $options['index'][$productId][$productAttributeId] = $attributeValue;
        }
    }

    return $options;
  }
}