Delivery dates section not hidden for out-of-stock variations

Hi, there,
I have a problem:

Issue Description:
For variable products, when a variation is “Out of stock”, the expected delivery dates section is still displayed. This creates confusion for customers, as they see delivery information for an item that cannot be purchased.

Expected Behavior:
When the selected variation is out of stock, the delivery dates section should automatically be hidden or not rendered at all.

Possible Solution:
Add a condition on variation change that checks the stock status and shows/hides the delivery section accordingly.

https://snipboard.io/Fr72G3.jpg

Can you help me?
Regards,
Pavel

Hello,

You can change this by adding the following code snippet to the Custom JS on document ready in Theme Settings. You can remove the code after our 8.3 update

function hideEstDelOutOfStockVariation() {
	function init() {
		var variationsForm = document.querySelector('.variations_form');

		if (variationsForm) {
			jQuery('.variations_form')
				.off('show_variation', handleFoundVariation)
				.on('show_variation', handleFoundVariation)
				.off('click', '.reset_variations', handleResetVariations)
				.on('click', '.reset_variations', handleResetVariations);
		}
	}

	function handleFoundVariation(e, variation) {
		var estDelClass = document.querySelector('.wd-est-del');

		if (!estDelClass) {
			return;
		}

		if (variation.is_in_stock) {
			estDelClass.classList.remove('wd-hide');
		} else {
			estDelClass.classList.add('wd-hide');
		}
	}

	function handleResetVariations(e) {
		var estDelClass = document.querySelector('.wd-est-del');

		if (!estDelClass) {
			return;
		}

		estDelClass.classList.remove('wd-hide');
	}

	init();
}

hideEstDelOutOfStockVariation();

Kind Regards

[Author]

Posts