Hiding product swatches or blurring or crossing when variation not available v2
Hello
I've been checking the forum and you need something similar to this web address that I show:
https://bemorebg.com/product/black-logo-oversize/#
That is to say, Hiding product swatches or blurring or crossing when variation not available.
I have used the java code in the topic that appears in topics (https://forum.muffingroup.com/betheme/discussion/comment/250563#Comment_250563), but it still does not work.
I would like to use it on the store page, on the section pages and on the product page.
Could you help us?
In java code it is:
****
document.addEventListener('DOMContentLoaded', function() {
// Obtenemos el texto del elemento con clase. 'woocommerce-product-details__short-description'
var availabilityText = document.querySelector('.woocommerce-product-details__short-description').innerText;
// Dividimos el texto en variaciones
var variations = availabilityText.split(',');
// За всяка вариация, проверяваме наличността
var variationLinks = document.querySelectorAll('.mfn-vr-options a');
variationLinks.forEach(function(link) {
// Вземаме буквата на вариацията от текста на връзката
var variationLetter = link.innerText.trim();
// Търсим буквата в текста на наличностите
var regex = new RegExp(variationLetter + ' - (\\d) бр');
var match = regex.exec(availabilityText);
if (match && match[1] === '0') {
// Ако вариацията не е налична, задраскай буквата и приложи същия стил като в CSS
link.style.textDecoration = 'none'; // Премахваме задраскването
link.style.position = 'relative'; // Приложи position: relative;
var xElement = document.createElement('span'); // Създаваме елемент span за "X"
xElement.innerText = 'X'; // Задаваме текста на елемента
xElement.style.position = 'absolute'; // Приложи position: absolute;
xElement.style.top = '50%'; // Позиционирай вертикално в средата на елемента
xElement.style.left = '50%'; // Позиционирай хоризонтално в средата на елемента
xElement.style.transform = 'translate(-50%, -50%)'; // Центрирай по хоризонтала и вертикалата
xElement.style.fontSize = '20px'; // Задай големина на шрифта
link.appendChild(xElement); // Добави "X" към връзката
}
});
});
****
Thanks
Comments
Hi,
What you ask for requires file customization, which, in reference to the Item Support Policy, is not allowed. http://themeforest.net/page/item_support_policy
So, if you want to modify files and don't know how, you should contact your web developer. Item Policy says:
Item support does not include services to modify or extend the item beyond the original features, style, and functionality described on the item page. For customization services that will help you tailor the item to your specific requirements, we recommend contacting the author to see if they privately offer paid customization services or checking out the great service providers on Envato Studio.
Thanks