How to Show Magento 2 Out of Stock Associated Products in Configurable Products Dropdown
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]\
123456<?php\Magento\Framework\Component\ComponentRegistrar::register(\Magento\Framework\Component\ComponentRegistrar::MODULE,'[Vendor]_[Namespace]',__DIR__); - Create module.xml file in app\code\[Vendor]\[Namespace]\etc
1234<?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> - Create catalog_product_view_type_configurable.xml file in app\code\[Vendor]\[Namespace]\view\frontend\layout
123456789<?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> - Create child-drop-down.phtml file in app\code\[Vendor]\[Namespace]\view\frontend\templates\product
1234567891011121314151617181920212223<?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> - Create Data.php file in app\code\[Vendor]\[Namespace]\Helper
1234567891011121314151617181920212223242526272829303132333435363738namespace [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.
8 Comments
This code is not working on Product Listing page.
Hi,
This is only for product view page.
Thanks.
can use for M2.3.3 ?
Hello Dharmin,
The above solution works for up to Magento 2.2.X versions.
Thank you.
Upto what Magento version this will work ?
Thank You
Hello Saurabh, the above solution works for up to Magento 2.2.X versions.
Thank you.
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
Hello,
Yes, you can do that with customization in the above code.
Thanks.