How to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown

Featured In - Magento 2,

A configurable product seems like a single product with drop-down lists of options for each variation. Each option is a separate simple product with a unique SKU.

The admin can track the inventory of each product variation for configurable products. However, the default Magento 2 does not bifurcate the products display in frontend based on its availability.

For configurable products, what if a customer adds the option that is not in stock and he is taken to the cart only to find out that he can’t make the purchase now! Isn’t it the example of bad shopping experience!

The solution is to show Magento 2 Out of Stock associated products in configurable products dropdown. When associated products of the configurable products are shown under the separate dropdown along with their stock status, it makes it easy for customers to decide which products to add in cart and for which product, to subscribe for the alert notification when back in stock. To enable the notification facility, you can try the Magento 2 Out of Stock Notification extension!

To display the separate dropdown for out of stock associated products in configurable products, follow this method:

Method to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown:

Create registration.php file in app\code\[Vendor]\[Namespace]\

<?php
        \Magento\Framework\Component\ComponentRegistrar::register(
            \Magento\Framework\Component\ComponentRegistrar::MODULE,
            '[Vendor]_[Namespace]',
            __DIR__
        );

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'[Vendor]_[Namespace]',

__DIR__

);

Create module.xml file in app\code\[Vendor]\[Namespace]\etc

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
        <module name="[Vendor]_[Namespace]" setup_version="1.0.0"/>
    </config>

<?xml version="1.0"?>

</config>

Create catalog_product_view_type_configurable.xml file in app\code\[Vendor]\[Namespace]\view\frontend\layout

<?xml version="1.0"?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceBlock name="product.info.options.wrapper">
                <block class="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable" name="child-drop-down" template="[Vendor]_[Namespace]::product/child-drop-down.phtml" before="-"/>
            </referenceBlock>
        </body>
    </page>

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<body>

</referenceBlock>

</body>

</page>

Create child-drop-down.phtml file in app\code\[Vendor]\[Namespace]\view\frontend\templates\product

<?php $registry = $this->_helperFactory->get('Magento\Framework\Registry'); ?>
        <?php $_productId = $registry->registry('product')->getId() ?>
        <?php $helper = $this->helper('[Vendor]\[Namespace]\Helper\Data'); ?>
        <?php $childProducts = $helper->getChildProducts($_productId);
        if ( !empty($childProducts) ):?>
        <div class="out-of-stock-child-products">
            <div class="col-sm-12">
                <div class="col-sm-12">
                    <label class="label" for="product_id" style="font-weight: bold"><span><?php echo __('Please select a product') ?></span></label>
                    <div class="control">
                        <select name="product_id" id="product_id" title="<?php echo __('Please select a product') ?>"
                                class="input-text">
                            <option value=""><?php echo __('Please select a product.') ?></option>
                            <?php foreach ($childProducts as $key => $value): ?>
                                <option value="<?php echo $key ?>"><?php echo $value ?></option>
                            <?php endforeach; ?>
                        </select>
                        <div class="product-error"
                             style="color: red; display: none"><?php echo __('Please select a product.') ?></div>
                    </div>
                </div>
            </div>
        </div>

<?php $registry = $this->_helperFactory->get('Magento\Framework\Registry'); ?>

<?php $_productId = $registry->registry('product')->getId() ?>

<?php $helper = $this->helper('[Vendor]\[Namespace]\Helper\Data'); ?>

<?php $childProducts = $helper->getChildProducts($_productId);

if ( !empty($childProducts) ):?>

<select name="product_id" id="product_id" title="<?php echo __('Please select a product') ?>"

class="input-text">

<?php foreach ($childProducts as $key => $value): ?>

<?php endforeach; ?>

</select>

<div class="product-error"

style="color: red; display: none"><?php echo __('Please select a product.') ?></div>

</div>

Create Data.php file in app\code\[Vendor]\[Namespace]\Helper

namespace [Vendor]\[Namespace]\Helper;
    
    use Magento\CatalogInventory\Model\Stock\Item;
    use Magento\Catalog\Model\ProductFactory;
    
    class Data extends AbstractHelper
    {
        public function __construct(Context $context, ProductFactory $productFactory, Item $stockItem)
        {
            parent::__construct($context);
            $this->productFactory = $productFactory;
            $this->stockItem = $stockItem;
        }
        
        public function getChildProducts($_productId)
        {
            $outOfStockProducts = array();
            try {
                $configProduct = $this->productFactory->create()->load($_productId);
                $childProducts = $configProduct->getTypeInstance()->getUsedProducts($configProduct);
                foreach ($childProducts as $childProduct) {
                    $stockItem = $this->getStockItem($childProduct->getID());
                    if ( !$stockItem->getQty() ) {
                        $outOfStockProducts[$childProduct->getID()] = $childProduct->getName();
                    }
                }

            } catch (\Exception $e) {
                return $e->getMassage();
            }
            return $outOfStockProducts;
        }
        public function getStockItem($productId)
        {
            $stockItem = $this->stockItem->load($productId, 'product_id');
            return $stockItem;
        }
    }

namespace [Vendor]\[Namespace]\Helper;

use Magento\CatalogInventory\Model\Stock\Item;

use Magento\Catalog\Model\ProductFactory;

class Data extends AbstractHelper

{

public function __construct(Context $context, ProductFactory $productFactory, Item $stockItem)

{

parent::__construct($context);

$this->productFactory = $productFactory;

$this->stockItem = $stockItem;

}

public function getChildProducts($_productId)

{

$outOfStockProducts = array();

try {

$configProduct = $this->productFactory->create()->load($_productId);

$childProducts = $configProduct->getTypeInstance()->getUsedProducts($configProduct);

foreach ($childProducts as $childProduct) {

$stockItem = $this->getStockItem($childProduct->getID());

if ( !$stockItem->getQty() ) {

$outOfStockProducts[$childProduct->getID()] = $childProduct->getName();

}

} catch (\Exception $e) {

return $e->getMassage();

}

return $outOfStockProducts;

}

public function getStockItem($productId)

{

$stockItem = $this->stockItem->load($productId, 'product_id');

return $stockItem;

}

The above code is compatible with Meetanshi’s Magento 2 Out of Stock Notification extension.

The result is displayed in the frontend:

Using this method, the customers can know the stock status of their desired configurable associated product and hence accordingly make the purchase or decide to wait!

Use the Comments section below to get any help with the implementation of the method.

Thank you.

(based on 13 Reviews)

Sanjay Jethva

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

8 Comments

KM
September 8, 2020 at 8:21 pm
Reply
This code is not working on Product Listing page.
- Sanjay Jethva
  September 10, 2020 at 3:41 pm
  Reply
  Hi,
  This is only for product view page.
  Thanks.
dharmin
August 18, 2020 at 4:20 pm
Reply
can use for M2.3.3 ?
- Sanjay Jethva
  August 20, 2020 at 12:35 pm
  Reply
  Hello Dharmin,
  The above solution works for up to Magento 2.2.X versions.
  Thank you.
Saurabh
March 18, 2020 at 5:32 pm
Reply
Upto what Magento version this will work ?
Thank You
- Sanjay Jethva
  March 18, 2020 at 5:38 pm
  Reply
  Hello Saurabh, the above solution works for up to Magento 2.2.X versions.
  Thank you.
Asad
October 20, 2019 at 12:44 pm
Reply
Sir how can be it possible to set it on Swatch e.g I have 2 glasses blue n black in my configurable product if Blue is out of stock it still shows the swatch option for the product but when I click on the blue glasses then it shows me a message product is out of stock
- Sanjay Jethva
  October 21, 2019 at 10:17 am
  Reply
  Hello,
  Yes, you can do that with customization in the above code.
  Thanks.

Method to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown:

Customer Service

Quick Links

Address

Client's Love

How to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown

Method to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown:

8 Comments

Leave a Reply Cancel reply

Get Weekly Updates

Customer Service

Quick Links

Address

Client's Love

Share

Copy short link