diff --git a/erpnext/e_commerce/variant_selector/utils.py b/erpnext/e_commerce/variant_selector/utils.py
index df62c23aa4..1a3e737928 100644
--- a/erpnext/e_commerce/variant_selector/utils.py
+++ b/erpnext/e_commerce/variant_selector/utils.py
@@ -1,5 +1,5 @@
 import frappe
-from frappe.utils import cint
+from frappe.utils import cint, flt
 
 from erpnext.e_commerce.doctype.e_commerce_settings.e_commerce_settings import (
 	get_shopping_cart_settings,
@@ -166,6 +166,27 @@ def get_next_attribute_and_values(item_code, selected_attributes):
 	else:
 		product_info = None
 
+	product_id = ""
+	website_warehouse = ""
+	if exact_match or filtered_items:
+		if exact_match and len(exact_match) == 1:
+			product_id = exact_match[0]
+		elif filtered_items_count == 1:
+			product_id = list(filtered_items)[0]
+
+	if product_id:
+		website_warehouse = frappe.get_cached_value(
+			"Website Item", {"item_code": product_id}, "website_warehouse"
+		)
+
+	available_qty = 0.0
+	if website_warehouse:
+		available_qty = flt(
+			frappe.db.get_value(
+				"Bin", {"item_code": product_id, "warehouse": website_warehouse}, "actual_qty"
+			)
+		)
+
 	return {
 		"next_attribute": next_attribute,
 		"valid_options_for_attributes": valid_options_for_attributes,
@@ -173,6 +194,7 @@ def get_next_attribute_and_values(item_code, selected_attributes):
 		"filtered_items": filtered_items if filtered_items_count < 10 else [],
 		"exact_match": exact_match,
 		"product_info": product_info,
+		"available_qty": available_qty,
 	}
 
 
diff --git a/erpnext/templates/generators/item/item_configure.js b/erpnext/templates/generators/item/item_configure.js
index 231ae0587e..613c967e3d 100644
--- a/erpnext/templates/generators/item/item_configure.js
+++ b/erpnext/templates/generators/item/item_configure.js
@@ -186,14 +186,14 @@ class ItemConfigure {
 		this.dialog.$status_area.empty();
 	}
 
-	get_html_for_item_found({ filtered_items_count, filtered_items, exact_match, product_info }) {
+	get_html_for_item_found({ filtered_items_count, filtered_items, exact_match, product_info, available_qty, settings }) {
 		const one_item = exact_match.length === 1
 			? exact_match[0]
 			: filtered_items_count === 1
 				? filtered_items[0]
 				: '';
 
-		const item_add_to_cart = one_item ? `
+		let item_add_to_cart = one_item ? `
 			<button data-item-code="${one_item}"
 				class="btn btn-primary btn-add-to-cart w-100"
 				data-action="btn_add_to_cart"
@@ -218,6 +218,9 @@ class ItemConfigure {
 						? '(' + product_info.price.formatted_price_sales_uom + ')'
 						: ''
 					}
+
+					${available_qty === 0 ? '<span class="text-danger">(' + __('Out of Stock') + ')</span>' : ''}
+
 				</div></div>
 				<a href data-action="btn_clear_values" data-item-code="${one_item}">
 					${__('Clear Values')}
@@ -233,6 +236,10 @@ class ItemConfigure {
 			</div>`;
 		/* eslint-disable indent */
 
+		if (!product_info?.allow_items_not_in_stock && available_qty === 0) {
+			item_add_to_cart = '';
+		}
+
 		return `
 			${item_found_status}
 			${item_add_to_cart}
@@ -257,12 +264,15 @@ class ItemConfigure {
 
 	btn_clear_values() {
 		this.dialog.fields_list.forEach(f => {
-			f.df.options = f.df.options.map(option => {
-				option.disabled = false;
-				return option;
-			});
+			if (f.df?.options) {
+				f.df.options = f.df.options.map(option => {
+					option.disabled = false;
+					return option;
+				});
+			}
 		});
 		this.dialog.clear();
+		this.dialog.$status_area.empty();
 		this.on_attribute_selection();
 	}